okay - it's getting late in my corner of the world and I've lost the plot. I'm trying to layer two elements in a horizontal navigation - one is a bar, one is the button above (button is done via unordered list). The button should overlay the bar to give a "you are here" effect. Images to show what I mean are here:
http://www.wroxham.net/teststuff/menu_problem.html

The CSS code is (only part - the full stylesheet is huge):
div.bar_welcome {
    width: 608px;
    height: 14px;
    border-width: 1px 1px 0px 1px; border-style: solid; border-color: rgb(125,113,112);
    margin: 0px; padding: 0px;
    position: absolute; left: 160px; top: 115px;
    background: url('images/bar_welcome.jpg') 0 0 repeat-x;
    z-index: 0;
}

#nav {
    position: absolute; left: 225px; top: 87px;
    margin: 0px; padding: 0px;
}

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

#nav ul li a.welcome {
    margin: 0px; padding: 5px 10px 7px 10px;
    font-size: 13px;
    float: left;
    background: rgb(232,189,77);
    position: relative; z-index: 20;
}

#nav ul li a:hover {
    background: none;
}

#nav ul li.wn {
    display: block;
    text-decoration: none;
    color: rgb(0,0,0);
    margin: 0px 10px 0px 0px;
    font-size: 13px;
    padding: 0px;
    float: left;
    background: rgb(232,189,77);
    border-width: 1px 1px 0px 1px; border-style: solid; border-color: rgb(125,113,112);
}

The HTML is:
<div id="nav">
 [list]
   <li class="wn"><a class="welcome" href="index.php">Welcome</a></li>
 </ul>
</div>
<div class="bar_welcome"></div>

The menu works with an unordered list which on hover shows the ul background (to speed image loading times up hover has no background itself). In normal state though the <a class="welcome"> should appear OVER the div.bar_welcome ... and it doesn't in IE (in Firefox of course it works fine)

My gut feeling is that IE doesn't like the fact that the bar is a div whilst the <a class=""> is only a humble list/link thingy.

oh well - will battle on in the morning. if anybody understands IE please let me know!!
PS: if I missed any vital bits of code you need to understand what on earth I'm on about, please let me know.

Terra :(!]

More copy-paste. How lovely!

Maybe it does on your screen with your settings. It doesn't on mine. At least not the snip you posted doesn't. Change your text size and see what happens.

http://yupapa.com

Changing font size doesn't alter problem - I'll try to re-write the way I've done things this weekend & if it works will post update.

Here's also a live version: http://www.wroxham.net/teststuff/menu_problem2.html
I think there might be issues with older Firefox versions - I'm on 1.0.6 and the layering works okay.

PS: not sure what you mean by "copy-paste" ... I thought copying relevant bits of stylesheet is quicker than giving whole stylesheet (all 900 lines of it - I'm redesigning an existing php-based ecom site, so it's a total css mess at the moment - you don't wanna go there, heck I don't wanna go there)

back to work and another day of fighting with IE! Terra ;)

Not font size, text size in the browser. Change it up and down.

--
http://yupapa.com

amazing what some sleep can do sorry for panicking - I think it's working now. The change I made:

before: z-index property applied to <a class="welcome"> which was nested within <div class="nav">[list]<li>
after: applied z-index property to <div class="nav"> wich contains the whole list

checked in IE6, Firefox 1.0.6 and Opera. gut feeling is that IE6 gave a higher importance to <div class="welcome_bar"> than to <a class="welcome"> despite the z-index command.

working example here: http://www.wroxham.net/teststuff/menu_problem3.html

The button now correctly overlays the border of the image below - yippie! Lesson learnt: don't code CSS when tired ;)

Terra

PS: if anbody wants it, here is the correct code (for HTML see above):
#nav {
    position: absolute; left: 225px; top: 87px;
    margin: 0px; padding: 0px;
    z-index: 20;
}
div.bar_welcome {
    width: 608px;
    height: 14px;
    border-width: 1px 1px 0px 1px; border-style: solid; border-color: rgb(125,113,112);
    margin: 0px; padding: 0px;
    position: absolute; left: 160px; top: 115px;
    background: url('images/bar_welcome.jpg') 0 0 repeat-x;
}

#nav ul li a.welcome {
    margin: 0px; padding: 5px 10px 5px 10px;
    font-size: 13px;
    float: left;
    background: rgb(232,189,77);
}

and thanks belong to "A List Apart" for it's great article on taming lists: http://www.alistapart.com/articles/taminglists/ plus of course Richard's book which is now getting distinctly dog-eared.

Meow - sorry, you're spot on. I had a fixed font-size which is okay for IE but Firefox of course allows you to change fontsize regardless. I've now added a fixed height to the buttons - they change okay for smaller font, but don't look great for bigger fonts.
URL for changed nav is: http://www.wroxham.net/teststuff/menu_problem3.html
Should work now - fingers crossed. Terra