Solved

CSS problems with Firefox 2

Posted on 2007-11-29
4
573 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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
These days socially coordinated efforts have turned into a critical requirement for enterprises.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

734 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