SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Dec 2004
    Location
    stockholm
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE adds extra line break in <li> elements!

    Hi,

    I'm trying to make a menu base on nested lists but I run in to some problems when viewing the menu in IE.

    In Firefox everything works fine but IE adds an extra line break after the <a> element within the <li> elements. What am I doing wrong?


    Here's the source(try it in browser to see what I mean):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//SV">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">

    li {
    font-family: Verdana;
    list-style-type: none;
    padding: 0px 0px 0px 0px;
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-bottom-width: 0px;
    color: #FFFFFF;
    }
    ul {
    padding: 0px;
    margin: 0px;
    }
    a {
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    background-color: #993399;
    }
    /* Level 1 */
    ul {
    background-color: #6D6D6D;
    }
    ul li a{
    font-size: 22px;
    padding: 3px 10px 3px 8px;
    }
    /* Level 2 */
    ul li ul {
    background-color: #999999;
    }
    ul li ul li a{
    font-size: 15px;
    padding: 4px 10px 4px 18px;
    }
    /* Level 3 */
    ul li ul li ul {
    background-color: #999999;
    }
    ul li ul li ul li {
    background-color: #339933;
    }
    ul li ul li ul li a{
    font-size: 10px;
    padding: 4px 10px 4px 30px;
    }
    </style>
    <title>Three level menu (no javascript yet)</title>
    </head>
    <body>
    <ul>
    <li>
    <a href="#">AAA</a>
    <ul>
    <li>
    <a href="#">Aettan</a></li>
    <li>
    <a href="#">Atvåan</a></li>
    <li>
    <a href="#">Atrean</a></li>
    </ul></li>
    <li>
    <a href="#">BBB</a></li>
    <li>
    <a href="#">CCC</a>
    <ul>
    <li>
    <a href="#">Cettan</a></li>
    <li>
    <a href="#">Ctvåan</a>
    <ul>
    <li>
    <a href="#">Cettan111</a></li>
    <li>
    <a href="#">Ctvåan222</a></li>
    <li>
    <a href="#">Ctrean333</a></li>
    </ul></li>
    <li>
    <a href="#">Ctrean</a></li>
    </ul></li>
    </ul>
    </body>
    </html>

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, another Swede!

    Try removing the whitespace in your list markup. IE will incorrectly render leading and trailing whitespace with an <li>, and since you <a> is set to display as a block-level element, IE will render a space and then put the <a> on a separate line.

    You may even have to remove the whitespace between <li> elements.
    Birnam wood is come to Dunsinane

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is the old "layout" probelm of IE. Just add this code to the end of the stylesheet.
    Code:
    /* commented backslash hack v2 \*/ 
    * html li, * html a {height:1%}
    /* end hack */
    This will force ie to behave.

    Paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Alternatively, if you don't like using hacks (although this could be classed as a hack) just add a space before the closing anchor on each list item.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//SV">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    li {
    font-family: Verdana;
    list-style-type: none;
    padding: 0px 0px 0px 0px;
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-bottom-width: 0px;
    color: #FFFFFF;
    }
    ul {
    padding: 0px;
    margin: 0px;
    }
    a {
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    background-color: #993399;
    }
    /* Level 1 */
    ul {
    background-color: #6D6D6D;
    }
    ul li a{
    font-size: 22px;
    padding: 3px 10px 3px 8px;
    }
    /* Level 2 */
    ul li ul {
    background-color: #999999;
    }
    ul li ul li a{
    font-size: 15px;
    padding: 4px 10px 4px 18px;
    }
    /* Level 3 */
    ul li ul li ul {
    background-color: #999999;
    }
    ul li ul li ul li {
    background-color: #339933;
    }
    ul li ul li ul li a{
    font-size: 10px;
    padding: 4px 10px 4px 30px;
    }
    </style>
    <title>Three level menu (no javascript yet)</title>
    </head>
    <body>
    <ul>
      <li> <a href="#">AAA</a> 
    	<ul>
    	  <li> <a href="#">Aettan </a></li>
       <li> <a href="#">Atvåan </a></li>
       <li> <a href="#">Atrean </a></li>
    	</ul>
      </li>
      <li> <a href="#">BBB </a></li>
      <li> <a href="#">CCC </a> 
    	<ul>
    	  <li> <a href="#">Cettan </a></li>
    	  <li> <a href="#">Ctvåan </a> 
    		<ul>
    		  <li> <a href="#">Cettan111 </a></li>
    		  <li> <a href="#">Ctvåan222 </a></li>
    		  <li> <a href="#">Ctrean333 </a></li>
    		</ul>
    	  </li>
    	  <li> <a href="#">Ctrean </a></li>
    	</ul>
      </li>
    </ul>
    </body>
    </html>
    Copy the code exactly and don't reformat.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Dec 2004
    Location
    stockholm
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks

    it worked out fine with removing whitespace.

    the line-height hack left me with some beauty stains however.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need the height:1% hack if yoy want moz and ie to be the same. Just removing the whitespace won't do it. IE needs to have layout forced on it and that can only be done by adding one of the properties that force layout and the height:1% is the best for this.

    This page is more or less exactly the sam in firefox and ie.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//SV">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    li {
    font-family: Verdana;
    list-style-type: none;
    padding: 0px 0px 0px 0px;
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-bottom-width: 0px;
    color: #FFFFFF;
    }
    ul {
    padding: 0px;
    margin: 0px;
    }
    a {
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    background-color: #993399;
    }
    /* Level 1 */
    ul {
    background-color: #6D6D6D;
    }
    ul li a{
    font-size: 22px;
    padding: 3px 10px 3px 8px;
    }
    /* Level 2 */
    ul li ul {
    background-color: #999999;
    }
    ul li ul li a{
    font-size: 15px;
    padding: 4px 10px 4px 18px;
    }
    /* Level 3 */
    ul li ul li ul {
    background-color: #999999;
    }
    ul li ul li ul li {
    background-color: #339933;
    }
    ul li ul li ul li a{
    font-size: 10px;
    padding: 4px 10px 4px 30px;
    }
    /* commented backslash hack v2 \*/ 
    * html li, * html a {height:1%}
    /* end hack */ 
    </style>
    <title>Three level menu (no javascript yet)</title>
    </head>
    <body>
    <ul>
      <li> <a href="#">AAA</a> 
     <ul>
       <li> <a href="#">Aettan</a></li>
       <li> <a href="#">Atvåan</a></li>
       <li> <a href="#">Atrean</a></li>
     </ul>
      </li>
      <li> <a href="#">BBB</a></li>
      <li> <a href="#">CCC</a> 
     <ul>
       <li> <a href="#">Cettan</a></li>
       <li> <a href="#">Ctvåan</a> 
      <ul>
    	<li> <a href="#">Cettan111</a></li>
    	<li> <a href="#">Ctvåan222</a></li>
    	<li> <a href="#">Ctrean333</a></li>
      </ul>
       </li>
       <li> <a href="#">Ctrean</a></li>
     </ul>
      </li>
    </ul>
    </body>
    </html>
    All I've added is the height:1% hack. Copy my code and check it out before you change it to confirm it works

    More info here:

    http://msdn.microsoft.com/library/de.../haslayout.asp

    Paul

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

    Your doctype should not be:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//SV">
    It should be:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    The HTML DOCTYPEs were written in English

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you know s/he hasn't translated it?

    Also, it should be
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just a brief note: sometimes I have found that setting padding-top: 1px; might fix it. Though, when you set to padding-top: 0px; it again adds those spaces.

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    How do you know s/he hasn't translated it?
    Without a URI reference I don't
    Quote Originally Posted by AutisticCuckoo
    Also, it should be
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    I know, I know. Maybe s/he wants quirksmode though


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •