Solved

CSS problems with Firefox 2

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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.
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now