Solved

CSS problems with Firefox 2

Posted on 2007-11-29
4
572 Views
Last Modified: 2010-05-18
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

0
Comment
Question by:mvwmail
  • 2
4 Comments
 
LVL 18

Accepted Solution

by:
Eternal_Student earned 500 total points
ID: 20372473
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
 
LVL 4

Expert Comment

by:simonkin
ID: 20372533
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
 
LVL 3

Author Closing Comment

by:mvwmail
ID: 31411623
Work perfectly
SUperb, thanks
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 20372701
Your welcome.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question