CSS - line spacing on li different in IE {solved}

  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Just a simple query i'm sure most of you will know. I'm currently working on the site navigation system for my new look website. The navigation bar (which is horizontal) seems to have a pretty large gap in between each link in Internet Explorer but looks just fine in Firefox and Safari. I figured i need some sort of line spacing code in order to keep the space at a consistent level on every browser, only i cant seem to find examples of it over the net.

Here is the CSS coding for the navigation bars...

Code: [ Select ]
#nav {
    left: 20px;
    top: 120px;
    position: absolute;
    padding: 10px;
    border-left: 0px solid #c06000;
    margin-left: -30px;
}

#nav li {
    list-style-type:none;
}
#nav li a {
    display:block;
    background:#3e3e3e;
}

#nav li a:hover {
    display: block;
    background: #2c2c2c;
    border-right: 2px solid #000;
    text-decoration: none;
}
  1. #nav {
  2.     left: 20px;
  3.     top: 120px;
  4.     position: absolute;
  5.     padding: 10px;
  6.     border-left: 0px solid #c06000;
  7.     margin-left: -30px;
  8. }
  9. #nav li {
  10.     list-style-type:none;
  11. }
  12. #nav li a {
  13.     display:block;
  14.     background:#3e3e3e;
  15. }
  16. #nav li a:hover {
  17.     display: block;
  18.     background: #2c2c2c;
  19.     border-right: 2px solid #000;
  20.     text-decoration: none;
  21. }


If you know what i need to add to make this appear good in Ie then i'd love to hear from you. Failing that and you happen to notice something that could be written better in CSS from the code i've linked to you then please leave a reply too.

Thanks!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Would
Code: [ Select ]
line-height: 20px;

Work? Also, you can move your
Code: [ Select ]
display: block;

up to the #nav li and save a tiny bit of bandwidth ;)
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

removing the display: block from every line but the #nav li line seems to remove the big spacing. I did that before even looking at the line-height part. So, that's good.

The only problem now is the width of the links doesn't appear to be there. I tried adding the width: command into the #nav li section and it doesn't appear to work. nor does it work in any of the other areas of the navigation CSS.

Any ideas?
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

By adding the width command to every relevant CSS code i've managed to have it displaying perfectly on Internet Explorer now. Firefox and Safari on the other hand... Nearly there, there must be some other code that i'm missing to make this appear good on the other two browsers.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Any chance on the code and/or a sample page?
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

neksus wrote:
Any chance on the code and/or a sample page?


The recently amended code is as follows...

Code: [ Select ]
#nav {
    left: 20px;
    top: 120px;
    position: absolute;
    padding: 10px;
    border-left: 0px solid #c06000;
    margin-left: -30px;
    width: 120px;
}

#nav li {
    display:block;
    list-style-type:none;
    width: 120px;
}
#nav li a {
    background:#3e3e3e;
    width: 120px;
}

#nav li a:hover {
    width: 120px;
    /*background: #2c2c2c;*/
    border-right: 2px solid #000;
    text-decoration: none;
}
  1. #nav {
  2.     left: 20px;
  3.     top: 120px;
  4.     position: absolute;
  5.     padding: 10px;
  6.     border-left: 0px solid #c06000;
  7.     margin-left: -30px;
  8.     width: 120px;
  9. }
  10. #nav li {
  11.     display:block;
  12.     list-style-type:none;
  13.     width: 120px;
  14. }
  15. #nav li a {
  16.     background:#3e3e3e;
  17.     width: 120px;
  18. }
  19. #nav li a:hover {
  20.     width: 120px;
  21.     /*background: #2c2c2c;*/
  22.     border-right: 2px solid #000;
  23.     text-decoration: none;
  24. }
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

I am aware the 0px borders are doing nothing. I'm just experimenting at the mo hence the reason the've been knocked to 0px.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

I meant the html :D
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Whoa, i really feel like saying that is a "no go". It's quite embarrassingly messy at the mo. I feel way to ashamed to even show it here. Although, i think the only way forward would be to do this.

What the heck...

Code: [ Select ]
<body>

<div id="frame">

<div id="logo"><img src="test/test.gif"></div>
<br>
<div id="date">Todays date.</div>
<div id="rightnav">
    <ul>
     <li id="title">Test</li>
    </ul>
</div>
<div id="nav">
    <ul>
     <li id="title">Tutorials</li>
     <li><a href="/">Tut1</a></li>
     <li><a href="/">Tut2</a></li>
     <li><a href="/">Tut3</a></li>
     <li><a href="/">Tut4</a></li>
     <li><a href="/">Tut5</a></li>
    </ul>
</div>

<div id="content">
    
    <div id="indeximage"><img src="test/test.jpg" width="175" height="100" alt="Test">
    <br>
    <img src="test/test.jpg" width="175" height="100" alt="Test"></div>
<p>
<h2>Test</h2>
<br>
<p>test</test>
</p>


</div>
<br>
    <div id="copyright">Test</div>

</div>

</body>
  1. <body>
  2. <div id="frame">
  3. <div id="logo"><img src="test/test.gif"></div>
  4. <br>
  5. <div id="date">Todays date.</div>
  6. <div id="rightnav">
  7.     <ul>
  8.      <li id="title">Test</li>
  9.     </ul>
  10. </div>
  11. <div id="nav">
  12.     <ul>
  13.      <li id="title">Tutorials</li>
  14.      <li><a href="/">Tut1</a></li>
  15.      <li><a href="/">Tut2</a></li>
  16.      <li><a href="/">Tut3</a></li>
  17.      <li><a href="/">Tut4</a></li>
  18.      <li><a href="/">Tut5</a></li>
  19.     </ul>
  20. </div>
  21. <div id="content">
  22.     
  23.     <div id="indeximage"><img src="test/test.jpg" width="175" height="100" alt="Test">
  24.     <br>
  25.     <img src="test/test.jpg" width="175" height="100" alt="Test"></div>
  26. <p>
  27. <h2>Test</h2>
  28. <br>
  29. <p>test</test>
  30. </p>
  31. </div>
  32. <br>
  33.     <div id="copyright">Test</div>
  34. </div>
  35. </body>


While i'm at it, here is the complete CSS file...

Code: [ Select ]
html {
    background:#3e3e3e;
    /*background-image: url(img/background.jpg); background-repeat: repeat-y;*/
    font-family: arial, "lucida console", sans-serif;
    color:#fff;
}

#frame {
    clear: both;
    margin-top: 75px;
    margin-left: 175px;
    margin-right: 175px;
    margin-bottom: 100px;
    padding: 10px;
    text-align: justify;
    border: 0px solid #000;
}

/*#content {
    background-color: #484848;
    width: 100%;
    padding: 10px;
}*/

/*#navbar {
    margin-left: 10px;
    margin-top: 130px;
    margin-left: 25px;
    width: 125px;
    float: top;
    background-color: 000; temp
}*/

#nav {
    left: 20px;
    top: 120px;
    position: absolute;
    padding: 10px;
    border-left: 0px solid #c06000;
    margin-left: -30px;
    width: 120px;
}

#nav li {
    display:block;
    list-style-type:none;
    width: 120px;
}
#nav li a {
    background:#3e3e3e;
    width: 120px;
}

#nav li a:hover {
    width: 120px;
    /*background: #2c2c2c;*/
    border-right: 2px solid #000;
    text-decoration: none;
}

hr {
    background-color: 000;
    width: 100%;
    height: 2px;
}

a {
    font-weight:bolder;
    color: #c2c2c2;
    text-decoration:none;
}

#content {
    margin-right:150px;
    padding: 20px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 2px solid #000;
    border-top: 1px solid #000;
    background-color: #2f2f2f;
}



ul {
    list-style-type: none;
    line-height: 13pt;
}

#copyright {
    position: static;
    bottom: 0px;
    background-color: #c06000;
    margin-right: 150px;
    border: 1px solid #000;
}

#date {
    position: static;
    background-color: #c06000;
    margin-right: 150px;
    margin-bottom: 10px;
    border: 1px solid #000;
    text-align: center;
    font-color: #000;
}

li#title {
    background-color: #;
    border-bottom: 1px solid #fff;
    text-align:left;
    font-weight: bold;
    margin-bottom:10px;
    display: block;
    width: 120px;
    height: 20px;
    line-height: 18pt;
}

#indeximage {
    position: absolute;
    right: 110px;
    top: 200px;
    border: 0px solid #000;
    padding-bottom: 60px;
}



#rightnav {
    position: absolute;
    right: 150px;
    top: 120px;
    padding: 10px;
}
  1. html {
  2.     background:#3e3e3e;
  3.     /*background-image: url(img/background.jpg); background-repeat: repeat-y;*/
  4.     font-family: arial, "lucida console", sans-serif;
  5.     color:#fff;
  6. }
  7. #frame {
  8.     clear: both;
  9.     margin-top: 75px;
  10.     margin-left: 175px;
  11.     margin-right: 175px;
  12.     margin-bottom: 100px;
  13.     padding: 10px;
  14.     text-align: justify;
  15.     border: 0px solid #000;
  16. }
  17. /*#content {
  18.     background-color: #484848;
  19.     width: 100%;
  20.     padding: 10px;
  21. }*/
  22. /*#navbar {
  23.     margin-left: 10px;
  24.     margin-top: 130px;
  25.     margin-left: 25px;
  26.     width: 125px;
  27.     float: top;
  28.     background-color: 000; temp
  29. }*/
  30. #nav {
  31.     left: 20px;
  32.     top: 120px;
  33.     position: absolute;
  34.     padding: 10px;
  35.     border-left: 0px solid #c06000;
  36.     margin-left: -30px;
  37.     width: 120px;
  38. }
  39. #nav li {
  40.     display:block;
  41.     list-style-type:none;
  42.     width: 120px;
  43. }
  44. #nav li a {
  45.     background:#3e3e3e;
  46.     width: 120px;
  47. }
  48. #nav li a:hover {
  49.     width: 120px;
  50.     /*background: #2c2c2c;*/
  51.     border-right: 2px solid #000;
  52.     text-decoration: none;
  53. }
  54. hr {
  55.     background-color: 000;
  56.     width: 100%;
  57.     height: 2px;
  58. }
  59. a {
  60.     font-weight:bolder;
  61.     color: #c2c2c2;
  62.     text-decoration:none;
  63. }
  64. #content {
  65.     margin-right:150px;
  66.     padding: 20px;
  67.     border-left: 1px solid #000;
  68.     border-right: 1px solid #000;
  69.     border-bottom: 2px solid #000;
  70.     border-top: 1px solid #000;
  71.     background-color: #2f2f2f;
  72. }
  73. ul {
  74.     list-style-type: none;
  75.     line-height: 13pt;
  76. }
  77. #copyright {
  78.     position: static;
  79.     bottom: 0px;
  80.     background-color: #c06000;
  81.     margin-right: 150px;
  82.     border: 1px solid #000;
  83. }
  84. #date {
  85.     position: static;
  86.     background-color: #c06000;
  87.     margin-right: 150px;
  88.     margin-bottom: 10px;
  89.     border: 1px solid #000;
  90.     text-align: center;
  91.     font-color: #000;
  92. }
  93. li#title {
  94.     background-color: #;
  95.     border-bottom: 1px solid #fff;
  96.     text-align:left;
  97.     font-weight: bold;
  98.     margin-bottom:10px;
  99.     display: block;
  100.     width: 120px;
  101.     height: 20px;
  102.     line-height: 18pt;
  103. }
  104. #indeximage {
  105.     position: absolute;
  106.     right: 110px;
  107.     top: 200px;
  108.     border: 0px solid #000;
  109.     padding-bottom: 60px;
  110. }
  111. #rightnav {
  112.     position: absolute;
  113.     right: 150px;
  114.     top: 120px;
  115.     padding: 10px;
  116. }


The plan is to move this all into include files so it's easier to maintain. What started off as a muck around has turned into something bigger. It's by no means remotely how i'd like it to look, but it's a work in progress.

Cheers
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

lol if that's messy I'd love to see your clean code :P
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Try changing
Code: [ Select ]
 <ul>
    <li id="title">Tutorials</li>
    <li><a href="/">Tut1</a></li>
    <li><a href="/">Tut2</a></li>
    <li><a href="/">Tut3</a></li>
    <li><a href="/">Tut4</a></li>
    <li><a href="/">Tut5</a></li>
</ul>
  1.  <ul>
  2.     <li id="title">Tutorials</li>
  3.     <li><a href="/">Tut1</a></li>
  4.     <li><a href="/">Tut2</a></li>
  5.     <li><a href="/">Tut3</a></li>
  6.     <li><a href="/">Tut4</a></li>
  7.     <li><a href="/">Tut5</a></li>
  8. </ul>


to
Code: [ Select ]
 <ul><li id="title">Tutorials</li><li><a href="/">Tut1</a></li><li><a href="/">Tut2</a></li><li><a href="/">Tut3</a></li><li><a href="/">Tut4</a></li><li><a href="/">Tut5</a></li></ul>


I know it's messy, but I just want to see if that fixes it :)
Some versions of IE insert spaces for those stupid un-nestled table lists (and form data, FYI).
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

It just feels alot messier than my current site. I really wish i could shake this feeling :lol:

Thanks Neksus, i'll go give that code a try out and let you know in a few mins.
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Unfortunately no luck. Just appears the same as it did before the edited code.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Well at least we know it's parsing correctly :)
Are you sure it's a horizontal list? 120px doesn't seem like much room to work with...
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Actually, that's just a silly mistake on my part. I meant vertical. Oops.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

without a padding:0 or margin:0 in your LI, how would the browser know how to space it?
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Did i also forget to tell you that all of what you see has been self taught and my knowledge as to the reasoning behind some CSS doesn't seem to be as vast as i'd like it to be.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Me too :P
But we won't get into that here :)
I've learned by my own mistakes, so don't think I'm trying to come down on you. Then again, if browsers rendered CSS correctly I may find out I've been doing it wrong all along!
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Ah well, there you go.

Inspired by your last question i started to think about the padding part. I can't believe it never even crossed my mind to even check that one out. I put a padding-right: 100px in the CSS on the #nav li a part and the #nav li a:hover part.

Looks good now on Safari, Firefox and Internet Explorer.

Cheers!
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Yay I helped!

Post Information

  • Total Posts in this topic: 20 posts
  • Users browsing this forum: minddigital and 76 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.