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

Code:

<!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

Code:

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:

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 -

Code:

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

Quote:

Originally Posted by Rayzur

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 -

Code:

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.

10th September 09, 01:43 AM	#2
Rayzur WLC Lover Join Date: Feb 2008 Location: Texas Posts: 1,331	Re: Problem with ul in divs 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 - Code: ul#navlist { font-family: Arial; font-size: 14px; font-weight: bold; margin:13px 0; padding:0; white-space: nowrap; } __________________ Ray H. To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts. To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts. To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.

10th September 09, 03:48 AM	#4
Rayzur WLC Lover Join Date: Feb 2008 Location: Texas Posts: 1,331	Re: Problem with ul in divs Your welcome, glad I could help. __________________ Ray H. To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts. To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts. To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode