SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
-
Dec 9, 2004, 06:42 #1
- 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>
-
Dec 9, 2004, 06:56 #2
- 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
-
Dec 9, 2004, 08:28 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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 */
Paul
-
Dec 9, 2004, 08:30 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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>
Paul
-
Dec 14, 2004, 02:31 #5
- 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.
-
Dec 14, 2004, 03:25 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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>
More info here:
http://msdn.microsoft.com/library/de.../haslayout.asp
Paul
-
Dec 14, 2004, 07:47 #7Off Topic:
Your doctype should not be:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//SV">
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
-
Dec 14, 2004, 07:57 #8
- 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
-
Dec 14, 2004, 08:21 #9
- 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.
-
Dec 14, 2004, 08:25 #10
Originally Posted by AutisticCuckoo
Originally Posted by AutisticCuckoo
Bookmarks