Solved

CSS problems with Firefox 2

Posted on 2007-11-29
4
574 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Want Experts Exchange at your fingertips?

With Experts Exchange’s latest app release, you can now experience our most recent features, updates, and the same community interface while on-the-go. Download our latest app release at the Android or Apple stores today!

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 learn how to dynamically set the form action using jQuery.

630 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