Forum Moderators: not2easy
This is a weird problem. For some reason in mozilla the background will not work at all for the div's when I have images inside the div.
This is what I have:
<style type="text/css" media="screen">
.globalTop{
width: 100%;
background: #869BBF url(images_sunrise/header_extender.gif) repeat-x top left;
margin: 0;
border: 0;
padding: 0;
}
.floatLeft{
float: left;
}
.floatRight{
float: right;
}
</style>
<body>
<!-- In this div the background does not work at all in mozilla -->
<div class="globalTop">
<img src="images_sunrise/header_top_left.gif" width="597" height="31" border="0" class="floatLeft" />
<img src="images_sunrise/header_top_right.gif" width="137" height="31" border="0" class="floatRight" />
</div>
<!-- In this div the background works perfectly fine -->
<div class="globalTop">
fdsf
</div>
</body>
I am completely clueless as to why its doing this. When i add display: table; inside the globalTop class the background works. The reason I dont want to use display: table; is because for some reason my image rollovers dont work when I do that. They work in IE but when I make a div display: table; the image rollovers dont work at all. Its like my images arent even inside the div, they are floating above. Does anyone know why I'm having these problems?
Thanks for the help :)
You may need to add another static(not floated) element after the two floated elements to give the containing div some "real" content. Floated elements are not accounted for when the browser determines a containers height so the browser thinks the div is empty because there are only floated elements inside of it.
To solve it, simply add another div after the two floated elements:
<div class="globalTop">
<img src="..." class="floatLeft" />
<img src="..." class="floatRight" />
<div style="clear: both;"></div>
</div>
Hope it works for you.
Birdman.
.globalTop{
width: 100%;
height: 100px;
...
I just got done reading a couple of books on CSS and Im just messing around with it and trying to figure it out.
Thanks again.
