Navbar text disappears in IE

[rsrwebs]

Hello,

 

I have a navigation bar that is almost exactly the same as one I've used (and had no problem with), just a different hover image, and an added text underline. Of course, it displays fine in FF, but when I open it in IE, it seemed like it was cut off, but as it turns out, it's just not displaying the text. I found that there is approx. 2px worth of space that will still react when hovered over.

 

I tried changing it from display:inline; to display:block; and the text comes back! But it does this weird thing where the buttons are distanced properly, but are below each other by a line, kind of making a staircase shape.

 

I'm at a loss, I have no idea what I did wrong, and I always am having some sort of problem with IE, it never ends...

 

Here is the CSS for the navbar:

 

ul#list-nav li{
display:inline;
}

ul#list-nav li a{
float: left;
color: #993300;
padding: 9px 7px;
text-decoration: underline;
border-right: none;
}

ul#list-nav li a:visited{
color: #993300;
}

ul#list-nav li a:hover, ul#list-nav li .current{
color: #003399;
background: transparent url(../images/blockactive.gif) center center repeat-x;
}

ul#list-nav{
display:block;
margin: 0;
padding: 0;
float:left;
font: bold 15px Verdana;
width: 100%;
border: none;
background: transparent;
list-style: none;
}

 

This whole thing is apart of a header file, that displays in an iframe. The header and navbar are in containers:

 

div#container {
width:840 px;
}

div#navcontainer {
margin-left:35px;
margin-top:-50;
}

 

I really appreciate the help, and sorry that I haven't gotten around to giving back and answering some questions myself. I'll try doing that tonight.

 

-Raven

[Wickham]

But it does this weird thing where the buttons are distanced properly, but are below each other by a line, kind of making a staircase shape.

 

That's a common problem with IE; you need to add float: left; to the li tag (not the "a" tag):-

 

ul#list-nav li{ float: left;
display:inline;
}

 

float: left is the important style and should make a style into display: block so it will probably work without display: block.

 

There are situations where IE6 needs display: inline so I've left that in there although you should check without it in IE6.

[rsrwebs]

But it does this weird thing where the buttons are distanced properly, but are below each other by a line, kind of making a staircase shape.

 

That's a common problem with IE; you need to add float: left; to the li tag (not the "a" tag):-

 

ul#list-nav li{ float: left;
display:inline;
}

 

float: left is the important style and should make a style into display: block so it will probably work without display: block.

 

There are situations where IE6 needs display: inline so I've left that in there although you should check without it in IE6.

 

 

Okay, it's not doing the staircase thing, but it's doing the other problem that I couldn't fix; the text is nowhere to be seen, yet there still is a 2 pixels tall area where the buttons light up as they usually would. Would you mind looking at it in IE too? I don't feel like I'm describing this very well. http://www.laurendragon.com/aware/index.htm

[Wickham]

I loaded all your files, css files and the iframe and the navbar items showed perfectly in my IE7 where they don't with your page. Then I remembered that the first thing I did was to correct your doctype in index.htm and header.htm from

 

 

to

 

/p>

"http://www.w3.org/TR/html4/loose.dtd">

 

Edit: doctypes are here:- http://www.w3.org/QA/2002/04/valid-dtd-list.html

Edited November 27, 2009 by Wickham