PDA

View Full Version : Problem with ul in divs

jaykayc
9th September 09, 10:55 PM
Greets everyone.

I'm having a bit of trouble getting an unordered list to sit properly inside my menu div. It works OK in FF but IE is giving me grief.

Here is the code:

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="logo">
<p>Logo Goes Here</p>
</div>
<div id="menu">
<ul id="navlist">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
<div id="content">
<h1>Content Header</h1>
<p>Content goes here</p>
</div>
<div id="footer">
<p>Footer stuff here</p>
</div>
</body>
</html>

main.css
body {
margin: 0;
padding: 0;
border: 0;
background: yellow;
}

p {
padding: 0;
margin: 0;
}

#logo {
width: 100%;
text-align: center;
background: green;
margin: 0;
padding: 0;
height: 120px;
}

#menu {
width: 100%;
background: black;
text-align: center;
margin: 0;
padding: 0;
overflow: auto;
height: 42px;
}

ul#navlist {
font-family: Arial;
font-size: small;
font-weight: bold;
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li {
display: inline;
list-style-type: none;
}

#navlist a {
padding: 10px 29px;
}

#navlist a:link, #navlist a:visited {
color: #fff;
background-color: blue;
text-decoration: none;
}

#navlist a:hover {
color: red;
text-decoration: none;
}

#content {
width: 750px;
margin: auto;
text-align: left;
padding: 0;
background: white;
}

#content p {
padding: 20px;
}

#footer {
width: 100%;
text-align: center;
}

#footer p {
color: black;
font-size: x-small;
padding: 15px;
}

Here is an image to demonstrate what is happening, the top being FF and the bottom IE:
http://img169.imageshack.us/img169/4931/problemy.png

If anyone knows how to fix this I'd greatly appreciate it! :-)

Thanks for looking.
Rayzur
10th September 09, 01:43 AM
Hi,
You have your li items set as inline elements and that's when things get tricky. The advantage to this though is that you can center them with text-align center. Since inline elements cannot have dimensions like block levels you have font-sizes, line-heights and margins and paddings as your means of sizing them.

At the same time you have different default margins and paddings from browsers to deal with unless you explicitly set them yourself. That is what you are seeing in IE, no top margin on the ul.

Try this -

ul#navlist {
font-family: Arial;
font-size: 14px;
font-weight: bold;
margin:13px 0;
padding:0;
white-space: nowrap;
}
jaykayc
10th September 09, 03:25 AM
Hi,
You have your li items set as inline elements and that's when things get tricky. The advantage to this though is that you can center them with text-align center. Since inline elements cannot have dimensions like block levels you have font-sizes, line-heights and margins and paddings as your means of sizing them.

At the same time you have different default margins and paddings from browsers to deal with unless you explicitly set them yourself. That is what you are seeing in IE, no top margin on the ul.

Try this -

ul#navlist {
font-family: Arial;
font-size: 14px;
font-weight: bold;
margin:13px 0;
padding:0;
white-space: nowrap;
}

Works a treat. Thanks so much for the help Ray! :-)
Rayzur
10th September 09, 03:48 AM
Your welcome, glad I could help. :)