Why does my logo disappear in IE6?

[rickl]

This is probably an easy question for you CSS experts...

I have a logo positioned absolutely in the top left, and it works perfectly fine in Firefox, but in IE it disappears.

I've isolated the issue and the culprit is the float:left; on the #nav <ul>, but I need to float that in order to contain the floated <li> elements.

Here's my markup:

<div id="masthead">

<div id="logo">
<img src="/x.gif" alt="logo" />
</div>

<div id="beta">
<img src="/x2.gif" alt="beta icon" />
</div>

<ul id="nav">
<li id="t-lorem1" class="last"><a href="/lorem1">Lorem1</a></li>
<li id="t-lorem2"><a href="/lorem2">Lorem2</a></li>
</ul><!-- #nav -->

</div><!-- #masthead -->


And my CSS:

#logo {
position: absolute;
left: 20px;
top: 15px;
}
#beta{
position: absolute;
left: 400px;
top: 10px;
}
#nav {
float: left; /* makes logo disappear */
width: 100%;
margin: 0;
padding: 80px 0px 0 0px;
list-style: none;
background: #fbf0e6 url(public/images/x.gif) repeat-x bottom left;
}
#nav li {
float: right;
margin: 0;
padding: 0;
}
#nav .last {
margin-right: 30px;
}
div#masthead:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
div#masthead {
position: relative;
}


So I know what's causing it, but I don't know why, and I don't know exactly what I should do to fix this. I would really appreciate any tips!

Thank you.
Rick

[Centauri]

You could try a high z-index on the logo.

Do you have a link to this site? I ask as there may be other ways to have the #nav ul enclose its floats other than floating, especially if the heights of the <a> links are known. From the look of it, the absolutely positioned divs are over top of the upper section of the nav ul, which has a bottom aligned background - the nav ul may be better off with a top margin and the images used as background on masthead div, but I could not tell that until I could see the site graphics.

In any case, there is no need for the divs surrounding the logo and icon graphics anyway - the styles can be applied direct to them : <div id="masthead">

<img src="/x.gif" alt="logo" id="logo" />

<img src="/x2.gif" alt="beta icon" id="beta" />

[rickl]

Centauri,
Sorry about the delay. I've put the site online--it was on localhost before. Can you still help me with this issue?

http://tinyurl.com/2qew27

The logo doesn't appear in IE6 at all, and in IE7 it sometimes appears after a delay of about 3-4 seconds, and sometimes does not appear at all. [EDIT: actually in IE7, it appears when the mouse hovers over any one of the navigation tabs]

Many thanks.

[Centauri]

It would seem the <ul> is covering the logos. If you simplify things by removing the background and padding from the <ul>, not floating it, and spacing it by using top padding on #masthead instead (and allowing it to provide the top background), it seems to work. A 1% height needs to be given to IE6 to invoke HasLayout on #masthead :#nav {
margin: 0;
padding: 0;
list-style: none;
}

div#masthead {
position: relative;
background: #fbf0e6 url(public/images/brown_top.gif) repeat-x bottom left;
padding-top: 80px;
}

* html div#masthead {
height: 1%;
}

[rickl]

Thank you, Centauri. Your solution works perfectly!