Strange z-Index / Div order problem in IE

[Daniel Breitner]

Hello,

if u visit the page
http://val.muriel-rist.webseiten.cc/referenzen

in any up to date browser except IE (FF, Chrome, safari, opera), u see
the effect that the heade text "Auftraggeber/ Referenzen" appears
*before* the grey text block, which is the desired behaviour. ( I used
margins and z-indexes to achieve this effect.)

But, on good old IE - it doesnt work, the header appears *behind*,
i.e. appears "cut".

How can I fix this properly??
Thanx a lot!!!

Daniel

--
Marty - it's perfect! You're just not thinking fourth dimensionally!
[Emmett "Doc" Brown]

[tlvp]

On Thu, 26 Jan 2012 22:18:24 +0100, Daniel Breitner wrote:

> Hello,
>
> if u visit the page
> http://val.muriel-rist.webseiten.cc/referenzen
>
> in any up to date browser except IE (FF, Chrome, safari, opera), u see
> the effect that the heade text "Auftraggeber/ Referenzen" appears
> *before* the grey text block, which is the desired behaviour. ( I used
> margins and z-indexes to achieve this effect.)
>
> But, on good old IE - it doesnt work, the header appears *behind*,
> i.e. appears "cut".
>
> How can I fix this properly??
> Thanx a lot!!!
>
> Daniel

In Safari, in a "restored" window maybe 600 px wide, all the good stuff on
the LH side of your page gets scrolled off the screen, and not even the
scroll bar lets one get it back. I'm referring, of course, to the "Home O"
and "Legal Notice O" link-text parts.

And the header text "Auftraggeber / Referenzen" in Safari appears "before"
the grey background for that text block not so much in the sense of
appearing higher up on the page, but in the sense of seeming to be
superimposed *over* that gray rectangle's upper edge. But perhaps it's
really the gray rectangle that's superimposed over the header text, with
the gray itself a "transparent" gray -- the effect would be the same.

If that's what's trying to happen, it would suffice for IE *not* to be
honoring the gray's request to be treated as transparent, and the problem
you're describing would arise. (And no, sorry, I couldn't parse any of your
CSS -- not my cup of tea, that :-) .)

Hilft des? Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

[dorayme]

In article <sgg3i7tfqq6lk081m...@4ax.com>,

Daniel Breitner <gruenw...@web.de> wrote:

> Hello,
>
> if u visit the page
> http://val.muriel-rist.webseiten.cc/referenzen
>
> in any up to date browser except IE (FF, Chrome, safari, opera), u see
> the effect that the heade text "Auftraggeber/ Referenzen" appears
> *before* the grey text block, which is the desired behaviour. ( I used
> margins and z-indexes to achieve this effect.)
>

It is half in and half out of the grey (sort of more purpley on my
screen) rectangle due more to your:

.contentBlock { margin-top: -8px;}

rather than anything about z-index

> But, on good old IE - it doesnt work, the header appears *behind*,
> i.e. appears "cut".
>
> How can I fix this properly??

The first thing to do is look at your HTML and get it right. It looks
like some programme generating this over-classed, over-styled,
over-divd mark-up, over-z-indexed, over-negative-margined,
over-pixel-unit'd markup?)

To get your basic look, you don't need anything like all this
complexity.

About IE, before IE8 there are bugs and other horrible things in
respect to z-indexing, perhaps do not over worry about it for this
small stylistic point, just override the neg margin in a conditional
for IE < 8 (which should get IE 8 in compatibility mode)

In other words make a conditional for IE6 and 7's eyes only that has
the top-margin as zero instead of -8px.

--
dorayme

[Jonathan N. Little]

Daniel Breitner wrote:
> Hello,
>
> if u visit the page
> http://val.muriel-rist.webseiten.cc/referenzen
>
> in any up to date browser except IE (FF, Chrome, safari, opera), u see
> the effect that the heade text "Auftraggeber/ Referenzen" appears
> *before* the grey text block, which is the desired behaviour. ( I used
> margins and z-indexes to achieve this effect.)
>
> But, on good old IE - it doesnt work, the header appears *behind*,
> i.e. appears "cut".
>
> How can I fix this properly??
> Thanx a lot!!!

First of all your page is in *quirks mode* so as such the hope of
consistency among all browsers is pretty slim.
<http://www.google.com/search?q=why+avoid+quirks+mode>

Secondly, your page is rife with errors that will sabotage and chance of
consistency among all browsers as each tries to "fix" your errors and
"understand you intent". You use HTML but have a number of places where
you are using XHTML syntax.
<http://validator.w3.org/check?uri=http%3A%2F%2Fval.muriel-rist.webseiten.cc%2Fgerman%2F&charset=iso-8859-1&doctype=Inline&group=0&verbose=1&user-agent=W3C_Validator%2F1.2>

Thirdly, your page seems to suffer from DIV-ious, too many unnecessary
extra DIVs

Now a strip down version that I think is what you are seeking. I
stripped out the extra DIVs and use a single "wrapper" DIV. I have it
set with a dotted red border to show you how it works. I set it to
"position: relative" to give a reference point to offset "Auftraggeber/
Referenzen". Now I only set the headerText_1 DIV to "position: absolute"
and offset to place over contentText_1. No messing with z-index
required. Works in IE 6+

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<title>No Quirks</title>

<style type="text/css">

body { background-color: #ffd; font-family: sans-serif; }
.wrapper { position: relative; margin: 0 auto; width: 50em;
border:1px dotted red; }
.headerText { font-size: 1.3em; }
.contentText { margin: 1em 0; padding: 2em 6em; font-size: 1em; }
.headerText_1 { position: absolute; top: .05em; left: 1em; }
.contentText_1 { background-color: #cbc2ca; }
.contentText_2 { background-color: #dde3e9; padding-top: 1em;
padding-bottom: 1em;}

</style>

</head>
<body>

<div class="wrapper">
<div class="headerText headerText_1">Auftraggeber / Referenzen</div>

<div class="contentText contentText_1">Botschaften, Ministerien,
politische Einrichtungen
<br>
Staatliche Organisationen, Stiftungen
<br>
Verbände, Industrie, Wirtschaft
<br>
Soziale Einrichtungen
<br>
Messen
<br>
Kultur
<br>
Justiz
<br>
Marktforschung, Marketing
</div>
<div class="contentText contentText_2">
Für direkte Nachfragen nenne ich Ihnen gerne die jeweiligen
Ansprechpartner.
</div>
</div>

</body>
</html>



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Jonathan N. Little]

dorayme wrote:
> In article<sgg3i7tfqq6lk081m...@4ax.com>,
> Daniel Breitner<gruenw...@web.de> wrote:
>
>> Hello,
>>
>> if u visit the page
>> http://val.muriel-rist.webseiten.cc/referenzen
>>
>> in any up to date browser except IE (FF, Chrome, safari, opera), u see
>> the effect that the heade text "Auftraggeber/ Referenzen" appears
>> *before* the grey text block, which is the desired behaviour. ( I used
>> margins and z-indexes to achieve this effect.)
>>
>
> It is half in and half out of the grey (sort of more purpley on my
> screen) rectangle due more to your:
>
> .contentBlock { margin-top: -8px;}
>
> rather than anything about z-index
>
>> But, on good old IE - it doesnt work, the header appears *behind*,
>> i.e. appears "cut".
>>
>> How can I fix this properly??
>
>
> The first thing to do is look at your HTML and get it right. It looks
> like some programme generating this over-classed, over-styled,
> over-divd mark-up, over-z-indexed, over-negative-margined,
> over-pixel-unit'd markup?)

Yep!

>
> To get your basic look, you don't need anything like all this
> complexity.

Yep!

>
> About IE, before IE8 there are bugs and other horrible things in
> respect to z-indexing, perhaps do not over worry about it for this
> small stylistic point, just override the neg margin in a conditional
> for IE< 8 (which should get IE 8 in compatibility mode)
>
> In other words make a conditional for IE6 and 7's eyes only that has
> the top-margin as zero instead of -8px.

Negative margins causes all kinds of problems with backgrounds for IE. I
would not bother using them at all and avoid conditional comments
whenever possible. My simple version works in IE6 through IE9 without them.

[dorayme]

In article <jft403$oso$1...@dont-email.me>,

"Jonathan N. Little" <lws...@gmail.com> wrote:

> dorayme wrote:
> > In article<sgg3i7tfqq6lk081m...@4ax.com>,
> > Daniel Breitner<gruenw...@web.de> wrote:
> >

...
> >> http://val.muriel-rist.webseiten.cc/referenzen
> >>
...

> >
> >> But, on good old IE - it doesnt work, the header appears *behind*,
> >> i.e. appears "cut".
> >>
> >> How can I fix this properly??
> >
> >
> > The first thing to do is look at your HTML and get it right. It looks
> > like some programme generating this over-classed, over-styled,

> > over-divd, over-z-indexed, over-negative-margined,
> > over-pixel-unit'd markup?

>
>
> Yep!
>
> >
> > To get your basic look, you don't need anything like all this
> > complexity.
>
> Yep!
>
> >
> > About IE, before IE8 there are bugs and other horrible things in
> > respect to z-indexing, perhaps do not over worry about it for this
> > small stylistic point, just override the neg margin in a conditional
> > for IE< 8 (which should get IE 8 in compatibility mode)
> >
> > In other words make a conditional for IE6 and 7's eyes only that has
> > the top-margin as zero instead of -8px.
>
> Negative margins causes all kinds of problems with backgrounds for IE. I
> would not bother using them at all and avoid conditional comments
> whenever possible. My simple version works in IE6 through IE9 without them.

I am sure you are right. Frankly, it was a bit too naf for my taste,
and simplest of all is to have no margin for all the browsers. Still,
that is just me.

I think you get the same sort of half text-hiding in OPs case in IE
less than 8 if you position the lower div (or the higher div) relative
and shift the lower up (or the higher down).

--
dorayme

[Jonathan N. Little]

dorayme wrote:

> I am sure you are right. Frankly, it was a bit too naf for my taste,

Naf? Translate please.

> and simplest of all is to have no margin for all the browsers. Still,
> that is just me.

Maybe it is the 'naf' but I am not sure of what you are saying. I was
saying and showing a method that does not use negative margins nor
conditional comments, but presents the same CSS to all browsers which
produces consistent results.

>
> I think you get the same sort of half text-hiding in OPs case in IE
> less than 8 if you position the lower div (or the higher div) relative
> and shift the lower up (or the higher down).

Not with mine I tested it with IE6 through IE9. I put a green dotted
border on the overlapping heading DIV to show it is not being obscured.

<http://www.littleworksstudio.com/temp/usenet/IE6-9&others.jpg>

[dorayme]

In article <jfu8n7$khh$1...@dont-email.me>,

"Jonathan N. Little" <lws...@gmail.com> wrote:

> dorayme wrote:
>
> > I am sure you are right. Frankly, it was a bit too naf for my taste,
>
> Naf? Translate please.
>
>

The urban dictionaries tend to give a ruder interpretation than I
meant. I just meant it looked a bit precious to have text half in and
half out of a box. But I may be wrong about this and it can make good
aesthetic sense. It was a casual observation. I will not be dying in
any trench for it. Talking about trenches, I wonder if that hole in
the ground they found Saddam in is preserved as a museum?

> > and simplest of all is to have no margin for all the browsers. Still,
> > that is just me.
>
> Maybe it is the 'naf' but I am not sure of what you are saying.

I was saying if the OP gave up wanting the text to be half way in and
half way out, he could have easily have by not giving the margin he
did. At least for IE. It was not a comment on anything you have done.

> I was
> saying and showing a method that does not use negative margins nor
> conditional comments, but presents the same CSS to all browsers which
> produces consistent results.
>
> >
> > I think you get the same sort of half text-hiding in OPs case in IE
> > less than 8 if you position the lower div (or the higher div) relative
> > and shift the lower up (or the higher down).
>
> Not with mine I tested it with IE6 through IE9.

It was not a comment on yours, the post I replied to did not contain
your solution. It was a comment on if the OP with his markup had -
instead of using a negative margin - shifted an element relatively up
or down to achieve the same naf effect, IE would hide half the height
of the text. Want a demo?

--
dorayme

[Daniel Breitner]

thx a lot folks for all replys!

esp. jonathan who gave me the main idea for solving.

(which is actually, simply putting only the header in an absolute div,
while keeping everything else relative...) (wonder why it didn't come
on my mind...) (seems I, for some strange reason, was focused on using
z-indexes. not realizing that seems z-indexes are not necessary here
and on this whole website at all, as long as I create the gray area by
using background-color...)

and thx also for all the other hints. (yes, it is still invalid code,
soon be fixed; no, it is not really over-div'd etc if u would know the
reasons and purpose but sry have no time to explain here...; and yes,
I will switch to linking instead of including the css/ js... including
helped me in the past, e.g. when certain browsers didn't properly
load/ reload all linked css, but should now be changed...)

have a nice weekend
Daniel, from ice-cold Berlin