PDA

View Full Version : layer order / visibility



haaid
Apr 14th, 2009, 02:01 PM
url: http://icweblinux01.interdio.be/~idkg/nieuw/index.html

if viewed with ie7 / chrome 1.0.154.53 it all works fine,
if viewed with Firefox (3.0.8) the layer order is screwed...

more specifically top right layer of the "cross" that you can see on the page. In Firefox it shows the background of the bottom-most div, whereas in IE and Chrome it puts the other divs above it.

The reason i've used these nested divs with absolute positioning is that the bigger (dark green) cross needs to fit nicely over the borders of the other divs. At the same time I wanted the lines to "fade out" so I used a bigger div with a fading background which i overlap almost completely (except for the 4px bottom).

I've tried a couple of things such as z-indexes but that didn't do it either; any help would be appreciated.

drhowarddrfine
Apr 14th, 2009, 02:25 PM
There is no such thing as "layers" in html or css so don't have a clue what you mean by that.

I don't see any difference between FF and IE either.

haaid
Apr 14th, 2009, 02:40 PM
s/layer/div

There are overlapping divs; my excuses for not using the correct lingo in this matter. The cross i refer to is what you can see on the file (light green lines).

The code for the header is:



<div id="header">
<div id="headerlogo">
<div id="logo">
<img src="img/idkglogo.jpg" width="180" height="100" alt="idkg" />
</div>
</div>
<div id="headeraddress">
<div id="addresstop">
<span style="color: #10661a;"><strong>I</strong>nterdiocesane <strong>D</strong>ienst voor het <br /><strong>K</strong>atholiek <strong>G</strong>odsdienstonderwijs vzw</span><br />Guimardstraat 1<br />1040 Brussel<br />
</div>
</div>
</div>



with css for these:



div#header {
height: 124px;
background-color:#0ab21d;
background-image: url(../img/faderight.jpg);
background-position: right bottom;
background-repeat: no-repeat;
}

div#headerlogo {
background-color: #FFF;
width: 200px;
height: 120px;
float: left;
}

div#logo {
color: #000;
}

div#headeraddress {
width: 596px;
border-left: 4px solid #0ab21d;
height: 120px;
background-color: #FFF;
float:left;
}

div#addresstop {
position:absolute;
left: 630px;
top: 80px;
font-size: 80%;
background-color:#FFC;
width: 250px;
padding-left: 20px;
}


I need the div addresstop to be on top of the div headeraddress which needs to be on top of the div header.

haaid
Apr 15th, 2009, 08:08 AM
Problem solved. Turns out it was the firefox plugin "adblockplus" that saw one of my divs as a potential ad. Renaming the div did the trick.