www.webdeveloper.com
Results 1 to 9 of 9

Thread: IE Display Differences

Hybrid View

  1. #1
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167

    IE Display Differences

    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/librarytemp...ntitled-21.htm

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

  2. #2
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    Code:
    #navigation a {
    _height:1px;
    }

  3. #3
    Join Date
    May 2005
    Posts
    2,040
    Your CSS does NOT validate.

  4. #4
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    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

  5. #5
    Join Date
    May 2005
    Posts
    2,040
    **fickle**

  6. #6
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    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

  7. #7
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    I ran into this fix in an A List Apart article:
    HTML Code:
    <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.

  8. #8
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    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

  9. #9
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    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 :
    Code:
    <!--[if IE]>
    ...style tags and rules or a link to an IE-only stylesheet go(es) here...
    <![endif]-->

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles