Hi-
I've got a page that looks fine in FF & validates for both HTML and CSS. In IE, the problem is that each navigation <li> has about a 1em space underneath of it. I've applied line-height, display, margin, padding in every configuration I can think of, but still don't get what I want. Please review and give me your ideas on how to fix this.
Thanks,
KDLA
Page: <!-- m --><a class="postlink" href="http://kdla.ky.gov/_test/librarytemplates/untitled-21.htm">http://kdla.ky.gov/_test/librarytemplat ... led-21.htm</a><!-- m -->
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body {}
#banner {background-color: #3d7ab8; height: 75px; width: 100%; padding: 1%; text-align: middle; border-bottom: 1px solid #ffffff;}
#banner h1 {color: white; font-family: "trebuchet ms", verdana, arial, sans-serif;}
#navigation {float: left; margin: auto; padding: auto; width: 190px; border-right: 5px solid #660066;}
#navigation ul {list-style-type: none; padding: 0; margin:0; width: 190px;}
#navigation li {display: block; margin: 0; padding: 0;}
#navigation li a{display: block; margin: 0; padding: 5px 10px; text-indent: 0;
color: white; font-family: "trebuchet ms", verdana, arial, sans-serif; font-weight: bold;
text-decoration: none; background-color: transparent;
border: 1px solid #ffffff; border-top: 0;}
#navigation li a:active {text-decoration: underline;}
#navigation li a.link1 {background-color: #99cc66;}
#navigation li a.link2 {background-color: #b87a3d;}
#navigation li a.link3 {background-color: #cc9966;}
#navigation li a.link4 {background-color: #003366;}
#navigation li a.link5 {background-color: #cc6666;}
#navigation li a.link6 {background-color: #8a5c2e;}
#navigation li a.link7 {background-color: #3d7ab8;}
#navigation li a.link1:hover, #navigation li a.link2:hover, #navigation li a.link3:hover, #navigation li a.link4:hover, #navigation li a.link5:hover, #navigation li a.link6:hover, #navigation li a.link7:hover {background-color: #A300A3;}
#content {}
</style>
</head>
<body>
<div id="banner"><h1>Kentucky County Public Library</h1></div>
<div id="navigation">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link1">Link 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link2">Link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link3">Link 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link4">Link 4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link5">Link 5</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link6">Link 6</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link7">Link 7</a></li>
</ul>
</div>
</body>
</html>#navigation a {
_height:1px;
}Your CSS does NOT validate.Thanks, Bon Rouge.
drhowarddrfine, Oops -- My CSS DID validate when I sent that message. I just happened to apply some last minute screw-ups before leaving the office yesterday. Call me fickle....
KDLA**fickle**Bon Rouge -
Is there a way of doing this and still have valid coding? Although what you supplied works beautifully, it causes my page to have a validation error.
KDLAI ran into this fix in an A List Apart article:
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Foo</a></li
><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Foo</a></li
><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Foo</a></li
></ul>
Browsers are told to ignore white spaces inside HTML tags, so the extra line breaks and spacebar spaces are irrelevant. The author of the ALA article thinks that IE creates the white space because it still recognizes white space outside of the LI element and is a throwback to the days when list item tags were not required to be closed with </li>. So butting the ">" of the previous closing list item tag up to the "<" of the next opening list item tag should get rid of the problem.
Another solution is to float the LI tags left or right and give them a width.I remember seeing that -- It just never clicked. {but then, so many other things don't seem to either...
}
I'll give it a try. Thanks for your input!
KDLAYou could also use '* html' before the rule instead of using the underscore. That's valid.
Or you could put the code in IE conditional comments. Like this : <!--[if IE]>
...style tags and rules or a link to an IE-only stylesheet go(es) here...
<![endif]-->
I've got a page that looks fine in FF & validates for both HTML and CSS. In IE, the problem is that each navigation <li> has about a 1em space underneath of it. I've applied line-height, display, margin, padding in every configuration I can think of, but still don't get what I want. Please review and give me your ideas on how to fix this.
Thanks,
KDLA
Page: <!-- m --><a class="postlink" href="http://kdla.ky.gov/_test/librarytemplates/untitled-21.htm">http://kdla.ky.gov/_test/librarytemplat ... led-21.htm</a><!-- m -->
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body {}
#banner {background-color: #3d7ab8; height: 75px; width: 100%; padding: 1%; text-align: middle; border-bottom: 1px solid #ffffff;}
#banner h1 {color: white; font-family: "trebuchet ms", verdana, arial, sans-serif;}
#navigation {float: left; margin: auto; padding: auto; width: 190px; border-right: 5px solid #660066;}
#navigation ul {list-style-type: none; padding: 0; margin:0; width: 190px;}
#navigation li {display: block; margin: 0; padding: 0;}
#navigation li a{display: block; margin: 0; padding: 5px 10px; text-indent: 0;
color: white; font-family: "trebuchet ms", verdana, arial, sans-serif; font-weight: bold;
text-decoration: none; background-color: transparent;
border: 1px solid #ffffff; border-top: 0;}
#navigation li a:active {text-decoration: underline;}
#navigation li a.link1 {background-color: #99cc66;}
#navigation li a.link2 {background-color: #b87a3d;}
#navigation li a.link3 {background-color: #cc9966;}
#navigation li a.link4 {background-color: #003366;}
#navigation li a.link5 {background-color: #cc6666;}
#navigation li a.link6 {background-color: #8a5c2e;}
#navigation li a.link7 {background-color: #3d7ab8;}
#navigation li a.link1:hover, #navigation li a.link2:hover, #navigation li a.link3:hover, #navigation li a.link4:hover, #navigation li a.link5:hover, #navigation li a.link6:hover, #navigation li a.link7:hover {background-color: #A300A3;}
#content {}
</style>
</head>
<body>
<div id="banner"><h1>Kentucky County Public Library</h1></div>
<div id="navigation">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link1">Link 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link2">Link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link3">Link 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link4">Link 4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link5">Link 5</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link6">Link 6</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="link7">Link 7</a></li>
</ul>
</div>
</body>
</html>#navigation a {
_height:1px;
}Your CSS does NOT validate.Thanks, Bon Rouge.
drhowarddrfine, Oops -- My CSS DID validate when I sent that message. I just happened to apply some last minute screw-ups before leaving the office yesterday. Call me fickle....
KDLA**fickle**Bon Rouge -
Is there a way of doing this and still have valid coding? Although what you supplied works beautifully, it causes my page to have a validation error.
KDLAI ran into this fix in an A List Apart article:
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Foo</a></li
><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Foo</a></li
><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Foo</a></li
></ul>
Browsers are told to ignore white spaces inside HTML tags, so the extra line breaks and spacebar spaces are irrelevant. The author of the ALA article thinks that IE creates the white space because it still recognizes white space outside of the LI element and is a throwback to the days when list item tags were not required to be closed with </li>. So butting the ">" of the previous closing list item tag up to the "<" of the next opening list item tag should get rid of the problem.
Another solution is to float the LI tags left or right and give them a width.I remember seeing that -- It just never clicked. {but then, so many other things don't seem to either...
} I'll give it a try. Thanks for your input!
KDLAYou could also use '* html' before the rule instead of using the underscore. That's valid.
Or you could put the code in IE conditional comments. Like this : <!--[if IE]>
...style tags and rules or a link to an IE-only stylesheet go(es) here...
<![endif]-->