I have a parent div=body, and four child div's=sidebar (dark gray), spacer1, content (white), and spacer2. Those are not the backgrounds of the individual div's. I'm using a faux columns method of taking the parent's bg and y-repeating it. You can see the problem below.

This works in IE6, but not in Firefox. This would lead me to assume there's a problem in my coding, but the way FF is displaying it...it's like firefox is placing it in a different column just to peeve me off.

In IE6 (perfect):
[IMG]http://i220.photobucket.com/albums/dd196/dcsfootball/iewin.png[/IMG]


In FF (looks like script was placed in spacer1 column--padding:10 for content div) I noticed it repeated correctly for the first div, but it's like it started over with the spacer1 div and doesn't even repeat down:
[IMG]http://i220.photobucket.com/albums/dd196/dcsfootball/fail.png[/IMG]

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DCS College Football Ratings and College Football News</title>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
 <script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
</head>

<body background="images/bg.png">
<div id="container" style=" width:785px; background:inherit; height:auto; margin:0 auto;">
	<div id="header" style="background:url('images/layout_01.png'); width:785px; height:121px;"></div>
	<div id="navbar" style="background:url('images/layout_02.png'); width:758px; height:26px; padding-top:9px; padding-left:27px; clear:both;">
	<font color="#cecece" face="Verdana" size="2"><b>&raquo;Home &nbsp;&nbsp;&nbsp;&raquo;The D-Report&nbsp;&nbsp;&nbsp; &raquo;DCS Ratings &nbsp;&nbsp;&nbsp;&raquo;Custom Helmets &nbsp;&nbsp;&nbsp;&raquo;About the DCS</b></font></div>
	<div id="subheader" style="background:url('images/layout_03.png'); width:785px; height:49px; clear:both;"></div>
	<div id="body" style="background:url('images/contentbg.png'); width:785px; height:auto; float:left;">
		<div id="sidebar" style="background:inherit; width:260px; padding:10px; height:auto; float:left; ">
		<font face="verdana" color="#cecece" size="3"><b>The D-Report</b></font><br><font face="verdana" color="white" size="1"><b>Info about the most current DCS news article here.  More typing going on to fill up some more space, ya know what I mean?</b></font><br><br><br><br><font face="verdana" color="#cecece" size="3"><b>DCS Ratings</b></font><br><font face="verdana" color="white" size="1"><b>Info about the most current DCS ratings update here.  More typing going on to fill up some more space, ya know what I mean?</b></font><br><br><br><br><font face="verdana" color="#cecece" size="3"><b>Custom Helmets</b></font><br><font face="verdana" color="white" size="1"><b>Info about the most current custom helmet here.  More typing going on to fill up some more space, ya know what I mean?</b></font></div>
		<div id="spacer1" style="background:inherit; width:17px; height:auto; float:left; "></div>
		<div id="content" style="background:inherit; width:440px; padding:10px; height:auto; float:left;">
		<div id="myGallery" style="width: 438px !important;
height: 250px !important;" ><script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="mypage1.html" title="open image" class="open"></a>
<img src="images/brugges2006/1.jpg" class="full" />
<img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="mypage2.html" title="open image" class="open"></a>
<img src="images/brugges2006/2.jpg" class="full" />
<img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
</div></div>
		<div id="spacer2" style="background:inherit; width:28px; height:auto; float:left; "></div>
	</div>
	<div id="footer" style="background:black; width:785px; height:86px; clear:both">
		<div id="contentfooter" style="background:url('images/layout_10.png'); width:460px; height:52px; margin-left:297px;"></div>
	</div>
	
	
</div>
</body>
</html>

Could it have something to do with the image scripting?

I saw that one immediately.

If you want pages to render identically on different browsers, then do NOT define size styles (height, width) and surrounding styles (margin, border, or padding) in the same tag or css style.

- Firefox puts the surrounding styles OUTSIDE the defined sizes in the same tag when it renders the page.

- IE crams the surrounding sizes INSIDE the defined sizes. This does NOT follow the W3C definition. So it is IE that displays things irregularly.

For compatibility, nest two tags, one with sizes, the other with surrounding styles. This way, you control the order, and all browsers render it alike.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.