Height trouble for UL & LI

**dollarwebs** · May 29, 2007 17:08

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>

**hexburner** · May 29, 2007 17:28

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>

**Paul O'B** · May 30, 2007 07:51

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.

**dollarwebs** · May 30, 2007 10:11

Got it! Thank you both for your help!

User Tag List

Thread: Height trouble for UL & LI

Thread Tools

Display

Height trouble for UL & LI

Bookmarks

Bookmarks

Posting Permissions