Log in

View Full Version : Background image in DIV showing in IE, not in FF


Rohan72
11-03-2007, 05:10 AM
I finally decided to get rid of tables and switch to a css layout.
It works perfect in IE, but not in FF.

The background image in "box2" goes all the way down to the bottom of the page, but does not show up at all in FF.
As you can see, I added " " in the DIV to see if the image showed up.
And it did... but only the hight of one character.
Is it not possible to have nested DIV's in FF, or (most likely) did i mess something up in the code?

PS. i'm going to split the code and css into seperate files. I think it's easier to work on one page untill it's finished and then split it up to use on other files.


<?php
require_once('test.inc');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sideline - Blue Army Neerpelt Member Area</title>
<style>
body {
margin: 0 0 0 0;
background-image:url(images/back.gif);
background-repeat:repeat-x;
background-color:#6786BE;
}

.box {
width: 975px;
height: 125px;
margin:0 auto;
}
.box2 {
width: 975px;
height: auto;
margin:0 auto;
background: #ffffff url(images/bgl.gif) bottom right repeat;
}

.textBox1 {
float:left;
width: 570px;
height: auto;
background-color:#FFFFFF;
border-color: rgb(103,134,190);
border-style: solid;
border-width: 3px;
padding: 15px;
position: relative;
left: 20px;
top: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.BoxClFull {
float:left;
width: 975px;
height: 40px;
position: relative;
top: 20px;
}
.BoxCl2 {
float:right;
width: 275px;
height: 20px;
position: relative;
right: 20px;
top: 20px;
}
.textBox2 {
float: right;
width: 275px;
height: auto;
background-color:#FFFFFF;
border-color: rgb(103,134,190);
border-style: solid;
border-width: 3px;
padding: 15px;
position: relative;
right: 20px;
top: 20px;
bottom: 100px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#ba2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #6786BE;
}
</style>
</head>

<body>
<div class="box">
<img src="images/toplogomem.jpg" width="975" height="75"><br>
<img src="images/bggrey.jpg" width="975" height="25"><br>
<img src="images/bgblue.jpg" width="975" height="25"><br>
</div>

<div class="box2">&nbsp;
<div class="textBox1">
<span id="ba2">Hoezo Sporting presteert niet constant?</span><br><br>
We schrijven zaterdagavond 13 oktober 2007. blablabla... </div>
<div class="textBox2">
<span id="ba2">Extra Wallpaper</span><br><br><br><br>
</div>
<div class="BoxCl2">&nbsp;
</div>
<div class="textBox2">
<span id="ba2">Hoezo Sporting presteert niet constant?</span><br><br>
We schrijven zaterdagavond 13 oktober 2007. blablabla...
</div>
<div class="BoxClFull">&nbsp;
</div>
</div>
</body>
</html>
jscheuer1
11-03-2007, 01:55 PM
Someone might be able to help out without seeing the actual page. I can even tell you that with the PHP prologue that you have, you may be throwing IE into quirks mode (ignoring the DOCTYPE) and giving layout height to the division that it normally wouldn't have, and/or that with floats, sometimes a float needs to be strategically cleared in order to (in other browsers) have the layout height it appears to have in IE.

But to really tell, I need to see the page with all of its resources, in this case namely its images:

Please post a link to the page on your site that contains the problematic code so we can check it out.
Rohan72
11-03-2007, 03:07 PM
Hi John,

The page is password protected. I've send you a private message with the loginpage and the login/password
jscheuer1
11-03-2007, 03:35 PM
For height:auto; to work, position must be absolute. So, you can either set an explicit height in pixels or ems (percent won't work), or do this:


.box2 {
width: 975px;
height: auto;
position:absolute;
left:50%;
margin:0 0 0 -487px;
background: #ffffff url(images/bgl.gif) bottom right repeat;
}
Rohan72
11-03-2007, 03:44 PM
Thank you VERY much... you saved me from another sleepless night, again...

It works like a charm.
jscheuer1
11-03-2007, 04:08 PM
I'm looking at this a bit more, you might be better off going back to what you had and adding a clearing division:


<div class="BoxClFull">&nbsp;
</div>
<div style="clear:both;"></div>
</div>

That's harder for me to test on this end, but it - or something like it if it works (and it should), would be better for narrow screens. With absolute positioning, once you get below the width of the element, you lose a part of it off screen to the left.

Unrelated, this:


onmouseover="p1.style.display='block'" onmouseout="p1.style.display='none'"

should be:


onmouseover="document.getElementById('p1').style.display='block'" onmouseout="document.getElementById('p1').style.display='none'"

and you might want to use a little more elaborate code, so that the larger image doesn't flicker when it is moused over.