SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    San Diego
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Height trouble for UL & LI

    Hello, I was wondering if anyone has run into this before? I did a lot of searching but couldn't really find anything.

    I am doing a nav menu based on a list, however, the list is supposed to overlay a background image so it needs to be precise. But I noticed that a basic list works quite different between IE and Firefox (haven't even looked at Safari or Opera yet).

    Below is some sample code. If you open in firefox, the li is not the same height as the ul, there seems to be top padding even though the padding is set to 0. In ie, both the li and ul borders line up perfectly.

    If anyone has any info to share about making these lists line up the same accross the major browsers, that'd be great!

    -----------------------------------------------------------

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>

    <style>
    body
    {
    background-color: black;
    }

    ul
    {
    border: 1px solid white;
    padding: 0px;
    margin: 0px;
    list-style: none;
    }

    li
    {
    display: inline;
    border: 1px solid pink;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    padding: 0px 25px;
    margin: 0px;
    color: white;
    }
    </style>

    </head>

    <body>

    <ul>
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
    </ul>

    </body>
    </html>

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This should do the trick:

    HTML 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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    body {
        background-color: black;
    }
    div.nav {
        border: 1px solid white;
    }
    .clear {
        clear: both;
        float: none;
        font-size: 0px;
        line-height: 0px;
        height: 0px;
    }
    ul {
        padding: 0px;
        margin: 0px;
        list-style: none;
    }
    li {
        display: inline;
        float: left;
        position: static;
        border: 1px solid pink;
        text-align: center;
        font-size: 11px;
        font-weight: bold;
        padding: 0px 25px;
        margin: 0px;
        color: white;
    }
    </style>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li>test 1</li>
                <li>test 2</li>
                <li>test 3</li>
            </ul>
            <div class="clear"><!-- --></div>
        </div>
    </body>
    </html>
    FOR SALE: 1 set of morals, never used, will sell cheap

  3. #3
    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, The code above should give better results because it uses floats instead of inline elements. Browsers are allowed to differ on how they handle margins, padding and borders on inline elements because it isn't specifically defined in the specs. The main problem in your original code was that you hasn't addressed the issue of line-height which is different by default in various browsers. Setting an explicit line height for the ul will probably bring all browsers within 1 pixel of each other. You would probably have to remove the whitespace between the lists also as that gets treated as a space by some browsers. However you will get more reliable results if you float the elements instead.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    San Diego
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it! Thank you both for your help!


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
  •