View Full Version : Firefox Issue

05-04-2008, 10:04 PM
I was wondering if anyone could help, the attached code displays fine in IE6 but the left hand column goes haywire in FF. Thanks in advance.

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #666666;
background-image: url(Images/background_trim.jpg);
.twoColHybLtHdr #container {
width: 900px; /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
background: #FFFFFF; /* the auto margins (in conjunction with a width) center the page */
border: 1.4px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 15px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
.twoColHybLtHdr #header {
height: 110px;
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
background-color: #DDDDDD;
background-image: url(Images/Banner.jpg);
.twoColHybLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */

padding-top: 0px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
background-color: #FFFFFF;
.twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;

.twoColHybLtHdr #mainContent {
width: 40em;
margin-top: 26px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 15em;
padding-right: 15px;
border: 2px solid #F9BDF9;
padding-left: 15px;
#qae {
width: 120px;
float: right;
margin-top: 26px;
margin-right: 20px;
margin-bottom: 7em;
margin-left: 0px;
border: 2px solid #F9BDF9;
padding: 0px;
.twoColHybLtHdr #footer {
padding: 0 10px;
background-color: #DDDDDD;
background-image: url(Images/footer_background.jpg);
.twoColHybLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
font-size: 1px;
line-height: 0px;
.style1 {
font-size: 12px
.style2 {
font-size: 16px;
.style6 {
color: #FFFFFF;
.style7 {
color: #E2C8E3;
font-size: 16px;
font-weight: bolder;

#nav ul {
padding: 0px;
list-style-image: none;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
#nav li {
font-size: 85%;
list-style-type: none;
margin-right: 0;
margin-left: 10px;
#nav a {
text-align: center;
display: block;
width: 100%;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;

#nav a:link,#nav a:visited {
color: #FFFFFF;
text-decoration: none;
background-color: #F9BDF9;

#nav a:hover, #nav a:active {
color: #FFFFFF;
background-color: #E2C8E3;
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColHybLtHdr #sidebar1 { padding-top: 30px; }
.twoColHybLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

<body class="twoColHybLtHdr" onload="MM_preloadImages('Images/chocorangefireworks2.jpg')">

<div class="style1" id="container">
<div id="header">
<h1 class="twoColHybLtHdr">&nbsp;</h1>
<!-- end #header --></div>
<div id="sidebar1">
<div id="nav">
<li><a href="#" class="style2">Home </a></li>
<li><a href="#" class="style2">About Us </a></li>
<li><a href="#" class="style2">Cakes </a></li>
<li><a href="#" class="style2">Pies </a> </li>
<li><a href="#" class="style2">Desserts</a></li>
<li><a href="#" class="style2">Contact Us</a></li>
<!-- end #sidebar1 --></div>
<div id="qae">
<p align="center">
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br />
<img src="Images/Quick_Links3.jpg" alt="quicklinks" width="112" height="26" /><br />
<br />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','Images/chocorangefireworks2.jpg',1)"><br />
<img src="Images/chocorangefireworks.jpg" name="Image4" width="95" height="92" border="0" id="Image4" /></a></p>
<p align="center" class="link_fonts style1">Chocolate Orange Biscuits.</p>
<p align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lemon Meringue','','Images/Lemon Meringue2.jpg',1)"><img src="Images/Lemon Meringue.jpg" alt="Lemon Meringue Pie" name="Lemon Meringue" width="100" height="100" border="0" id="Lemon Meringue" /></a></p>
<p align="center" class="link_fonts style1">Lemon Meringue Pie</p>
<div id="mainContent">
<p><br />
<span class="style7 style7 style7 style7 style7 style7">Welcome to Bakers Delight! </span></p>
<p>If you love to bake then this is the website for you. Packed with all sorts of yummy recipes to keep your taste buds rocking!</p>
Whether you are entertaining, baking a treat for a friend or just feeling plain peckish then come along and browse through our recipes.
<p>Feel free to browse around and make sure to come back soon and check out our newest recipes. </p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<br class="clearfloat" />
<div id="footer">
<p align="center" class="style6">Home l About Us l Cakes l Biscuits l Pies l Desserts l Contact Us</p>
<!-- end #footer --></div>
<!-- end #container --></div>