In the coding below I want the red part to be behind both the image (see attached) and the title text (the latter white writing on a green background).
It works fine in Firefox, Safari and Chrome but in IE8 (I haven’t been able to try IE6 and IE7), the red part is in front of the image (but it is behind the title text).
I have searched the web for suggestions re IE bugs and applied what I could find to no avail (or else being new to z-index I have misunderstood the ideas).
Any help would be appreciated - both for IE8 and for IE7
While experimenting I have found another facet of my problem .
What I am after is the red to be at the back, then the image on top of that and then last of all the title text on top of the other two.
However the way I have coded it even in Firefox the image is on top of the title text. This can be seen by changing the margin in #page-title from
margin: -30px 0px 0px 30px;
margin: -40px 0px 0px 30px;
You are using z-index, but it’s not even taking effect anyway: your elements aren’y positioned (or I missed it somewhere?). Only positioned element can even have a stated z-index. Positioned here means either position: relative or absolute (of course, relative would be better since you still want elements in the flow).
Margins can imitate the same thing because code who comes later in source, if pulled back UP the page (towards the top), will sit atop the stuff generated by the earlier code.
Later code has a higher stacking context.
*edit Hm, that last sentence might not be true, but that’s the effect you see visually anyway.
Don’t use breaks to make space when you could simply use the margin on the existing div instead.
It looks like you could have combined some of those divs to make more succint code rather than adding empty elements. Where possible apply image to the existing elements rather than adding extra empty elements - although I can’t tell what effect you really want so you may occasionally need extra elements.
It would have been good practice, if XHTML had gone anywhere in all browsers. Unfortunately, the w3c still lists the xml prologue-thingie on their Doctypes page (and so far as I remember there is no mention of this being a bad thing if the page is actually sent as HTML).
When it was first unveiled, people were encouraged to have it. It was supposed to be The Future. Flying cars were just around the corner. They never came.