CSS problems with Firefox 2

I have a CSS problem with 2 sites

www.postboxart.co.uk
www.pinkanddizzy.co.uk

Both sites work fine in IE6 and 7, but do not display properly in Firefox.

The page is formed from CSS areas, all contained within a PAGESURROUND tag, which draws the border all around it, and holds it in the centre of the page

#pageSurround {
      width: 1000px;
      margin: 0px auto;
      border: 1px solid #FFFFFF;
      background-color: #000000;
}

all the other tags are contained within this, and are relative to its positiion. ANy idea why on Firefox this surround is not enclosing all the other tags like it does on IE.

IO have enclosed the CSS sheet, and also the page itself
STYLE SHEET
body {
	margin: 5px;
	background-color: #000000;
	background-attachment: scroll;
	background-repeat: repeat-x;
	background-position: top;
}
#pageSurround {
	width: 1000px;
	margin: 0px auto;
	border: 1px solid #FFFFFF;
	background-color: #000000;
}
#HeaderFooter {
	text-align: left;
	width:1000px;
	height: 100px;
	background-color:#000000;
	background-image:url(../styleImages/backgrounds/topHeaderLogo.jpg);
	position:relative;
}
#topHeader {
	height: 107px;
	width:1000px;
	background-color:#000000;
	color:#FFFFFF;
}
#topMenu {
	height: 30px;
	width:1000px;
	background-color:#000000;
	color:#FFFFFF;
}
.boxTitleLeft, .boxTitleRight {
	font-family: Arial;
	font-size: 150%;
	text-decoration:underline;
	color: #FFFFFF;
	width: 140px;
	height: 15px;
	padding-left: 5px;
	padding-top: 1px;
}
.boxContentLeft, .boxContentRight {
	background-color: #000000;
	padding-left: 5px;
	margin-bottom: 10px;
	padding-top: 3px;
	padding-bottom: 5px;
}
.colLeft {
	position: relative;
	left: 0px;
	width: 140px; 
	padding-left: 5px;
	padding-right: 5px;
	float: left;
}
.colMid {
	position: relative;
	width: 830px;
	float: left;
	height:auto;
}
.colRight {
	position: relative;
	width: 160px; 
	padding-left: 5px;
	right: 9px;
	float: right;
}
.boxContent {
	padding: 3px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	color: #FFFFFF;
	background-color: #000000;
	margin-bottom: 5px;
}
 
 
PAGE (there is a seperate style sheet for fonts)
 
<body>
<div id="pageSurround">	
		<div id="HeaderFooter">
			<div>&nbsp;</div>
		</div>
		<div id="topHeader">
			<div>
				<table width="1000" align="center">
					<tr>
						<td width="33%" align="left"><img src="images/logos/Showcasing.jpg" /></td>
						<td width="33%" align="center"><img src="images/logos/PostboxArt.jpg" /></td>
						<td width="33%" align="right"><img src="images/logos/Rediscover.jpg" /></td>
					</tr>
				</table>
			</div>
		</div>
		
		<div id="topMenu">
				<table width="1000" align="center" bordercolor="#FFFFFF" border="1" cellpadding="0" cellspacing="0">
					<tr>
						<td width="40%" align="left" class="txtMenu">{SESSION}</td>
						<td width="10%" align="center"><a class="txtMenu" href="http://www.postboxart.co.uk" target="_parent">Home</a></td>
						<td width="10%" align="center"><a class="txtMenu" href="http://www.postboxart.co.uk/index.php?act=viewDoc&amp;docId=6" target="_parent">Products</a></td>
						<td width="10%" align="center"><a class="txtMenu" href="http://www.postboxart.co.uk/index.php?act=viewDoc&amp;docId=7" target="_parent">About Us</a></td>
						<td width="10%" align="center"><a class="txtMenu" href="http://www.postboxart.co.uk/index.php?act=viewDoc&amp;docId=5" target="_parent">Coming Soon</a></td>
						<td width="10%" align="center"><a class="txtMenu" href="http://www.postboxart.co.uk/index.php?act=viewDoc&amp;docId=2" target="_parent">Contact Us</a></td>
						<td width="10%" align="center"><a class="txtMenu" href="http://www.postboxart.co.uk/cart.php?act=cart" target="_parent">Basket</a></td>
					</tr>
				</table>
		</div>
	
		<div class="colLeft">
		{CATEGORIES}
		{CURRENCY}
		</div>
			
		<div class="colMid">
		{PAGE_CONTENT}
		</div>
		
		<div id="HeaderFooter">
			<div>&nbsp;</div>
		</div>	
</div>
<br clear="all" />
 
{SITE_DOCS}
</body>

Open in new window

LVL 3
mvwmailAsked:
Who is Participating?
 
Eternal_StudentConnect With a Mentor Commented:
Without going through all of your code bit by bit it  is clearly a case of not clearing your divs properly.


                <div id="HeaderFooter">
                        <div>&nbsp;</div>
                </div>  
<br style="clear:both">
</div>
<br style="clear:both">


Try this ^
0
 
simonkinCommented:
Try this in your html page....

On the bottom <div id="HeaderFooter">...
<br /><br />
                <div id="HeaderFooter">
                        <div>&nbsp;</div>
                </div>

Open in new window

0
 
mvwmailAuthor Commented:
Work perfectly
SUperb, thanks
0
 
Eternal_StudentCommented:
Your welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.