Skip to Content

Relative elements and dropdowns

Various Drupal themes now use the excellent Superfish dropdown menu navigation, including Pixturerr. But if you then customise the theme such as adding a frontpage with RELATIVE elements you can find (as in the picture) that the dropdows appear BEHIND other elements, in good old Microsoft Internet Explorer!. This is what I did to resolve the issue.
go to admin/build/themes/settings/pixturerr

we need to set the color set back to Girly Pink default

IMPORTANT - before you do this make a note of the current color set - if this is one of the standard just note that - if you have created a custom one write down its settings.

> Girly Pink default > [Save configuration]

now - in file (not internet) browser go to
sitesallthemespixturerr

open page-front.css in say notepad

alter

#header {
height:120px;
margin:0 0 0px;
padding:0;
}

to

#header {
height:120px;
margin:0 0 0px;
padding:0;
z-index:2;
}

and

#top {
background:transparent  none repeat scroll 0%;
position:relative;
width:765px;
height:160px;
}

to

#top {
background:transparent  none repeat scroll 0%;
position:relative;
width:765px;
height:160px;
z-index:1;
}

save and upload the new file (keeping a backup of the old page-front.css)

refresh the browser and ensure it is working how you want - if ok

back to admin/build/themes/settings/pixturerr and set to your blue theme

done!

further reading:
http://verens.com/archives/2005/07/15/ie-z-index-bug/