IE Display Differences [Archive]

Click to See Complete Forum and Search --> : IE Display Differences

KDLA

11-15-2005, 02:36 PM

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: http://kdla.ky.gov/_test/librarytemplates/untitled-21.htm

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="#" class="link1">Link 1</a></li>
<li><a href="#" class="link2">Link 2</a></li>
<li><a href="#" class="link3">Link 3</a></li>
<li><a href="#" class="link4">Link 4</a></li>
<li><a href="#" class="link5">Link 5</a></li>
<li><a href="#" class="link6">Link 6</a></li>
<li><a href="#" class="link7">Link 7</a></li>
</ul>
</div>
</body>
</html>

BonRouge

11-15-2005, 04:44 PM

#navigation a {
_height:1px;
}

drhowarddrfine

11-15-2005, 11:19 PM

Your CSS does NOT validate.

KDLA

11-16-2005, 07:11 AM

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

drhowarddrfine

11-16-2005, 06:05 PM

**fickle**

KDLA

11-17-2005, 01:43 PM

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.
KDLA

toicontien

11-17-2005, 02:19 PM

I ran into this fix in an A List Apart article:

<ul>
<li><a href="#">Foo</a></li
><li><a href="#">Foo</a></li
><li><a href="#">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.

KDLA

11-17-2005, 03:09 PM

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!

KDLA

BonRouge

11-18-2005, 01:35 AM

You 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 :