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]
> 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.
> 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.
> 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".
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.websei...>
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+
>> 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.
> >> 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 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.
In article <jfu8n7$kh...@dont-email.me>,
"Jonathan N. Little" <lws4...@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?
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
-- Marty - it's perfect! You're just not thinking fourth dimensionally!
[Emmett "Doc" Brown]
