HTML and CSS

Child div's (faux columns) showing irregularly in FF

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Feb 2008

Posts: 2

Reputation: austind is an unknown quantity at this point

Solved Threads: 0

austind

Offline

Newbie Poster

Child div's (faux columns) showing irregularly in FF

Mar 8th, 2008

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):
http://i220.photobucket.com/albums/d...ball/iewin.png

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:
http://i220.photobucket.com/albums/d...tball/fail.png

Here is the code:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!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>
<!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?

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: Child div's (faux columns) showing irregularly in FF

Mar 9th, 2008

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.

Last edited by MidiMagic; Mar 9th, 2008 at 1:13 am.

Daylight-saving time uses more gasoline