SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with list display in IE

    I'm building a web site with a stacked ul for the main navigation. Everything looks great except in IE. For some reason, IE 6 and 7 is increasing the space between the li items. It works fine in Firefox and Safari. I've messed around with the margins and padding to no avail. I haven't been able to find any bugs or hacks that address this problem, and I don't ever remember having it before. I don't know if I'm overlooking something in my code that's wrong or missing, or if there is a bug I'm not aware of.

    Here's the url of the site: http://royalcoffeeandtea.com/index.htm

    Heres the CSS code for the navigation:

    #navigation {
    float:right;
    width:255px;
    text-align: left;
    margin:-0.8em 0 0 0;
    }

    #navigation li {
    list-style:none;
    font:9pt "Trebuchet MS", MetaBook-Roman, "ITC Officina Sans Book", sans-serif;
    margin:0;
    padding: 0 0 1px 0;
    }

    The url for the stylesheets is here (2 different files):

    http://royalcoffeeandtea.com/include...css/layout.css

    http://royalcoffeeandtea.com/include...textstyles.css

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE always has problems with lists and you need to force "layout" (see faq on "haslayout"). The easiest way to force layout is simply to add a dimension where possible.

    This will fix the big gaps.

    To fix the discrepancy thats left its best to float the list and the anchors and then all gaps are cleared and firefox and ie will be virtually the same.

    You have also forgotton to take care of teh default margin and padding that is appluied by default to the ul. Mozilla applies a top an bottom 1em margin and a 16px left padding (for the bullet). ie applies a bottom margin only and 16px left margin (not padding). So you can see that you always need to control all margins and padding on every element you use. (see faq tips).

    Heres the code to fix your layout:
    Code:
    #navigation {
     float:right;
     width:255px;
     text-align: left;
     margin:0;
    }
    #navigation ul{margin:10px 0 0 50px ;padding:0;}
    #navigation li {
     list-style:none;
     font:9pt "Trebuchet MS", MetaBook-Roman, "ITC Officina Sans Book", sans-serif;
    margin:0;
     padding: 0 0 1px 0;
     width:200px;
    float:left
    }
    #navigation a {
     color:#fff;
     text-decoration:none;
     width:200px;
     float:left;
    }
    Hope that helps


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
  •