Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS problems with Firefox 2

Posted on 2007-11-29
4
Medium Priority
?
576 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 2000 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

963 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