CODEWITHSUNDEEP
cssinternet-explorer-6
ReidHawkins
ReidHawkins

Reputation: 21

#Nav not displaying in IE6

For some reason this site displays fine in all browsers but IE6. In IE6 the top navigation does not display at all... Any help would be much appreciated:

I have placed the code below (I had to take out image urls to post): 

<div id="nav">
  <ul>
    <li class="floatLeft" id="contact">Contact</li>
    <li id="about">About</li>
    <li id="resume">Resume</li>
    <li class="floatLeft" id="work">Work</li>
  </ul>
</div>

I am using a linked css sheet with the following definitions as well:

#nav {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  height: 50px;
  width: 214px;
  position: absolute;
  text-decoration: none;
  list-style-type: none;
  left: 780px;
  right: auto;
  margin: 0px;
  padding: 0px;
  top: 52px;
  z-index: 800;
  zoom: 1;
}

#nav ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  display: block;
}

#nav ul li {
  float: left;
  overflow: hidden;
  text-decoration: none;
  padding: 0px;
  text-indent: -9000px;
  margin-top: 0px;
  margin-right: 10px;
  margin-bottom: 0px;
  margin-left: 0px;
}

#nav ul a {
  display: block;
}

#nav #contact a {
  background-position: left top;
  width: 43px;
  background-repeat: no-repeat;
  background-image: url();
  height: 50px;
  text-decoration: none;
}

#nav #about a {
  width: 44px;
  background-image: url();
  background-repeat: no-repeat;
  height: 50px;
  background-position: left top;
  text-decoration: none;
}

#nav #resume a {
  background-repeat: no-repeat;
  height: 50px;
  width: 43px;
  text-decoration: none;
  background-image: url();
}

#nav #work a {
  background-repeat: no-repeat;
  width: 44px;
  background-image: url();
  height: 50px;
  background-position: left top;
  text-decoration: none;
}

Upvotes: 0

Views: 138

Answers (3)

fisherwebdev
fisherwebdev

Reputation: 12690

The problem might be the floated <li> elements and how they interact with the containing <ul>. I might try giving the <ul> a defined height or perhaps overflow:auto.

Upvotes: 0

Gert Grenander
Gert Grenander

Reputation: 17084

It can't have been displayed in the other browsers either, since you got text-indent: -9000px; in #nav ul li. This pushes the whole thing out of view.

Additional:

Is the width: 214px; in #nav really necessary? It pushes down the #work LI.

Upvotes: 1

Logic Artist
Logic Artist

Reputation: 996

Do you have a complete valid doctype in your HTML? Sometimes IE goes into quirks mode and does weird things without one... just a thought.

Upvotes: 0

Related Questions