SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. Dec 9, 2004, 06:42 #1
    svek
    svek is offline
    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. Dec 9, 2004, 06:56 #2
    AutisticCuckoo
    AutisticCuckoo is offline
    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. Dec 9, 2004, 08:28 #3
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 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. Dec 9, 2004, 08:30 #4
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 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. Dec 14, 2004, 02:31 #5
    svek
    svek is offline
    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. Dec 14, 2004, 03:25 #6
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 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. Dec 14, 2004, 07:47 #7
    vgarcia
    vgarcia is offline
    ☆★☆★ 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. Dec 14, 2004, 07:57 #8
    AutisticCuckoo
    AutisticCuckoo is offline
    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. Dec 14, 2004, 08:21 #9
    janislanka
    janislanka is offline
    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. Dec 14, 2004, 08:25 #10
    vgarcia
    vgarcia is offline
    ☆★☆★ 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

« Previous Thread | Next Thread »

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
  •  

Forum Rules