Forum Moderators: not2easy
[webmasterworld.com...]
The div.banner container is displaying on top of (obscuring) the 3 floated elements that follow. This occurs only in Opera; it displays properly in Safari, Firefox and iCab. Adding a reduced z-index to the div.banner fixes the problem in Opera, but then hides the div behind the body background in all other browsers. Any ideas?
CSS:
/* this html style helps force a permanant vertical scrollbar */
html {
height: 100%;
}
body {
position:relative;
width:100%;
min-height: 101%; /* this property helps force a permanant vertical scrollbar */
border: solid white 1px; /* fixes a problem in various browsers */
margin: 0px;
padding: 0px;
background-image: URL("images/musicbg296.jpg");
background-attachment: fixed;
}
#headerContainer {
position: relative; /* using relative here so as not to establish a positioning container */
width:100%; /* This width property fixes a right-margin problem in Opera */
border: solid black 0px;
}
div.banner {
position: absolute;
margin-top: 20px;
margin-left: 5px;
background-image: URL("images/musicbg07.gif");
background-repeat: repeat-x;
height: 131px;
width: 100%;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
div.bannerText {
display:block;
position: relative;
top: 130px;
padding: 0px;
float: right;
border: black solid 0px;
font-family: "times new roman";
font-style: italic;
font-size: xx-large;
font-weight: bold;
letter-spacing: 5px;
color: blue;
}
#logo {
position: relative;
top: 21px;
float: right;
border: black solid 0px;
}
img.logosize {
width: 200px;
height: 200px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Title goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<!--This anchor named 'top' is the target for the links on the 'stories' page-->
<a name="top"></a>
<!--Firefox is unhappy with self-closing anchor tags-->
<div id="headerContainer">
<div class="banner"></div>
<div id="logo"><img class="logosize" src="images/logo.gif" /></div>
<div class="bannerText">Banner Text Here</div>
</div>
etc...
(BTW, ignore the 0px borbers; they are just for troubleshooting purposes)
I'm sorry i had a look a this yesterday then got called away and forgot to come back to it..
can't quite figure out why this is but I tend to think Opera is actually right?
was trying to read this [w3.org] and this [w3.org]. The second page is "An Elaborate description of Stacking Contexts" :o So elaborate I haven't time to read and digest.. but knock yourself out ;)
Anyhow I think it's the combination of floats and relative positioning and the fact that:
Stacking contexts are not necessarily related to containing blocks.
.. this seems to work for me..
#headerContainer {z-index: 1;}
div.banner {z-index: -1;}
note to self.. Must take some time read more ;)
Suzy
