CSS z-index with overflow:auto HELP please!

TheAlex · 15 Jul 2009 at 21:11

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):

Code:

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!

TheAlex · 15 Jul 2009 at 21:23

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

TheAlex · 16 Jul 2009 at 18:39

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 · 16 Jul 2009 at 21:15

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:

Code:

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]

TheAlex · 16 Jul 2009 at 23:29

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? :eek:

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.