SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Consistent spacing for <li>'s

    When coding your site content, how do you code <li>'s to have the same (or close) spacing in both IE and Firefox? I have had no luck doing so without coding for both.

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am guessing its line-height or height that needs to be reset when it comes to <li>'s apart from margin and padding.

  3. #3
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, this is what I had before posting...the height didn't seem to help.
    Code:
    #sample-1 {
        float: left;
        margin: 0 0 0 10px;
        padding: 0 0 15px 0;
        list-style: none;
    }
    #sample-2 {
        float: left;
        margin: 0 0 0 80px;
        list-style: none;
    }
    ul#sample-1 li,ul#sample-2 li {
        padding: 8px 0;
        line-height: 0;
    }

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

    The easiest way is to float both the list and the anchor and then all whitespace bugs are killed stone dead. The result willl be more or less identical cross browser (within reason) and assuming you have set all the margins and padding of the ul to zero.

    It also assumes that the font size and line height have been made the same also.

    This example looks more or less identical in IE and firefox.
    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">
    <head>
    <title>nav example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0}
    ul{
        width:120px;
        list-style:none;
        margin:20px;
        border-top:1px solid #ccc;
        line-height:1.2em;
    }
    li{
        width:120px;
        background:orange;
        border-bottom:1px solid #ccc;
        text-indent:1em;
        float:left;
        clear:left;
    }
    a {
        text-decoration:none;
        width:120px;
        float:left;
        color:#000;
    }
    a:hover{background:#ffffcc;color:orange}
    
    body.section1 #nav li.one,
    body.section2 #nav li.two,
    body.section3 #nav li.three,
    body.section4 #nav li.four,
    body.section5 #nav li.five,
    body.section6 #nav li.six,
    body.section7 #nav li.seven {background:#ffffcc;}
    
    </style>
    </head>
    <body class="section3">
    <h1>Current link indicated via class in the body</h1>
    <ul id="nav">
      <li class="one"><a href="nav-body.htm">Item 1</a></li>
      <li class="two"><a href="nav-body2.htm">Item 2</a></li>
      <li class="three"><a href="nav-body3.htm">Item 3</a></li>
      <li class="four"><a href="nav-body4.htm">Item 4</a></li>
      <li class="five"><a href="nav-body5.htm">Item 5</a></li>
      <li class="six"><a href="nav-body6.htm">Item 6</a></li>
      <li class="seven"><a href="nav-body7.htm">Item 7</a></li>
    </ul>
    </body>
    </html>
    If you don't want to float the list and anchors then for IE you must ensure that they both have "haslayout" by applying a dimension to them both but of course the anchor will be required to be display:block.

  5. #5
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, thanks!


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
  •