I am getting ready to launch a drupal 6.x site using acquia_marina which I modified mostly with css changes.


My client says that on one ie7 computer running vista the following occurs on the home page:

the green horizontal bar covers part of the image of the doctor.

The doctor image is supposed to be over the green bar. This seems like a problem with the order of rendering with the green bar rendering over the doctor image despite the z-index. It used to happen in ie6 but I played around with the css (relative vs. absolute position) and fixed that in ie6. The weird thing is that on another vista / ie7 computer of my client, it renders fine.

If you're running ie7, can you tell me if you are seeing the same thing?

Obviously, let me know if you have ideas on how to fix it.

The custom css of relevance is:
/* this code is for the actual image of the doctor */
.swansonmugright {
z-index: 1000;
position: absolute;
top: -24px;
left: 29px;

.greenswoosh {
position: relative;
top: 0px;
left: -22px;

swansonmugright is in the "header last" block, and green swoosh is in the "preface first" block.

I appreciate any suggestions!


egizzi’s picture

Solved it. Don't forget that the parent div overrides the z-index of children divs:

#header-last {

The above code forces the doctor photo (in the header-last div) to be on par with the preface-first div, and the header-first z-index of 2000 makes it higher than the preface-first z-index of 0.

Remember that z-index only applies if you have position absolute or relative.

jwolf’s picture

Status: Active » Closed (fixed)