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>»Home »The D-Report »DCS Ratings »Custom Helmets »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?
