CSS z-index with overflow:auto HELP please!

[TheAlex]

Example here:
http://www.btinternet.com/~himh/rms/

In IE 6 and 7 I get what I want, with the word 'UPDATES' (div.intersect) displaying above the border of the div.updates using z-index:

In all other browsers this happens:

Here is the CSS of the two divs in question (the full 2k file is here www.btinternet.com/~himh/rms/main.css):

div.updates
{
    width: 420px;
    border: solid 1px #ffffff;
    padding: 0.5em;
    font-size: 0.9em;
    overflow: auto;
}

div.intersect
{
    width: 120px;
    background-color: #1c1c1c;
    font-weight: bold;
    position: relative;
    top: -15px;
    left: 2px;
    z-index: 1;
    text-align: center;
}

If I remove overflow: auto; from div.updates, the UPDATES text displays above the div.updates border in all browsers, but of course the content then overflows the div. It seems there's a problem combing z-index with overflow auto.

I've played and searched for a solution to no avail, does anyone have any idea how to fix this or use an alternative method?

Thanks!

 

[fini]

You could position it absolutely ie position:absolute; left:30px; top:538px; more than a little hacky though.

 

[TheAlex]

Yeah, I try and avoid absolute positioning, but cheers.

 

[fini]

Would you prefer to set the intersect div outside and just before the updates div? That way it would work with a top value of about 15

 

[GravyMonster]

Why not try using Fieldset and Legend to accomplish this? It's far better supported and easier too.

<fieldset>
    <legend>UPDATES</legend>

    Your code here

</fieldset>

All you then need to do is add the CSS styling for the border of the fieldset.

 

[simisker]

Remove the overflow: auto and use a div set to clear: both after the 'home_left' floated divs.

Better still, replace that div with something that would benefit those viewing only unstyled markup, like a <hr />. You can always hide it from styled views.

EDIT: I'm not sure I'd agree with you, Spunkey - for one, it's not a form; additionally, legend behaves differently in different browsers and - if memory serves - cannot be styled consistently beyond basic typography control.

 

[TheAlex]

Thanks for the suggestions. I went for a clear:both hr. I probably wouldn't have thought of the hr to separate the content under no styles, but the clear is really something I should have thought of myself as I have used it for the same thing before.

Cheers.

 

[TheAlex]

Hmmm. The hr tag seems to be quite annoying in IE.

Setting all this to 0 still leaves a much bigger gap compared to the other browsers:

hr
{
    clear: both;
    visibility: hidden;
    padding: 0;
    margin: 0;
    border: 0;
    height: 0;
}

[edit - this does seem to be a known problem with IE that people seem to fix by encasing the hr in a div]

 

[simisker]

How much is 'much bigger'?

I confess I'd forgotten that <hr /> can be as awkward as the legend I chided Spunkey for.

Apparently it's because the W3C specs leave margins around the <hr /> up to the user agent - it's not a case of one browser being right and another wrong; they're both merely using different preferences.

Anyway, try any or all of the following:

display: block;
height: 1px;
line-height: 1px;
margin: -7px 0;

If not, and you absolutely must insist on cross-browser similarity, then you may have to resort to using a less-semantic div.

 

[TheAlex]

It's noticeably bigger, I would have said about 5 to 7px so your -7px sounds about right. It doesn't look too bad in the place you suggested so I've kept it there, I've just removed it from a couple of other places I'd added one.

I could do a different stylesheet for IE but I'd rather keep it all in one.

And I do blame one browser for being 'wrong', and that's the Microsoft one. It's always the one I seem to have problems with...what was that 2px error in IE 5/6 all about?

I'm having problems vertically aligning content now, it's never-ending! This problem seems to be down to the CSS specification rather than any browsers.