CSS - Layout Breaks In Firefox

Hope I'm posting this in the right place - was contemplating the HTML forum for a while but thought this would be the right place to post in.

I'm trying to implement microdata into a site I'm developing to get Google's Rich Snippets search results. http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=176035

At the moment, implementing microdata seems to break my layout. For instance, wrapping prices on my site with Code:

<span itemprop="price">119.99</span>

seems to change the font size and other properties of the price's font style. The same thing happens when I wrap Code:

<div itemscope itemtype="http://data-vocabulary.org/Product">...</div>

around my template.

Any idea why this is happening? I don't think there are any CSS styles in my site that are referencing to the microdata at all.

Hi,

I'm having a problem with a layout in Firefox.

http://26990.vws.magma.ca/press-room.cfm

As you can see the content area is all shifted down and lines up with a block in the menu. It doesn't do this in IE and I need it to work the same way in Firefox.

Can anyone offer some suggestions as to what I can change to get it to work?

I'm trying to make a 2 column layout, using multiple divs, but no wrapper divs. I cannot use wrappers around either column. This works fine in IE7, but in FireFox the fisrt right column element isn't top aligned; it starts on the same line as the last left column element. Does anyone have any ideas?

Thanks!

.left {
float:left;
clear:left;
margin-left:25px;
width:605px;
text-align:left;
}
.right {
float:right;
clear:right;
margin-right:25px;
width:285px;
}

<div id="one" class="left">left</div>
<div id="two" class="left">left</div>
<div id="three" class="right">right</div>
<div id="four" class="right">right</div>
<div id="five" class="right">right</div>

my goal is this:

left___right
left___right
______right

I developed a site and finally thought about opening it in IE...

everything lays out perfectly in firefox and looks great. i opened it in IE and my sidebar that should be on the right, is showing up under the main content area vs on the right of it..

any suggestions?

you can see the site in development he

rurdesign dot com / OffRoadSolutions/

I'm a pretty new CSS coder, and primarily use Firefox so I designed my website based on that browser, and now when I try opening it in IE it looks completely wrong and different.

Does it have to do with my margins? I have no idea--if someone can just point me in the right direction to even figure out where the problem lies (and even better if you know how to fix it!) that would be fabulous.

The website is www.yarniapdx.com and it looks exactly how I want it to in Firefox, but in IE it's a mess!

Thank you so much in advance,
-lindsey

Here's my problem. I was stupid enough to do my layout for a page I'm making in Firefox, but didn't look at IE until I was done. IE is rendering the whole thing completely off. I was wondering if anyone might be able to help me reconcile the two layouts?

Here's the CSS:
Code:

body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #ccc;
	background-color: #3C3C3C;
	text-align: center;
	}
img {
	border: 0;
	}
abbr, acronym, .help {
	border-bottom: 1px dotted #333;
	cursor: help;
	}
#container {
	padding-top: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto; 	/* opera does not like 'margin:20px auto' */
	background: url(images/background.png) repeat-y;
	border: 0px;
	text-align: left;
	width: 685px;
	}
#menu {
	float: right;
	z-index: 9;
	margin-right: -44px;
	}
#content {
	border: 10px solid #5B5B5B;
	background: #FFF;
	width: 661px;
	font-size: 12px;
	margin-top: 20px;
	margin-bottom: 10px; 
	margin-left: 2px;
	font-family: tahoma, verdana, san-serif;
	}
.content-right {
	float: right;
	width: 70%;
	}
.content-left {
	width: 32%;
	}
h1#primary {
	position:relative;
	z-index: 10;
	background: url(images/header-1.png) top left no-repeat;
	width: 685px;
	height: 35px;
	margin-top: 26px;
	margin-bottom: 0px;
	margin-left: 20px;
	text-indent: -9999px;
	}
h2#homeprofile {
	background: url(images/homeprofile.png) top left no-repeat;
	width: 105px;
	height: 20px;
	margin-top: 15px;
	margin-bottom: 5px;
	margin-left: 14px;
	text-indent: -9999px;
	}
h2#featured {
	background: url(images/featured.png) top left no-repeat;
	width: 167px;
	height: 21px;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 14px;
	text-indent: -9999px;
	}
h2#realtor {
	background: url(images/realtor.png) top left no-repeat;
	width: 161px;
	height: 20px;
	margin-top: 35px;
	margin-bottom: 10px;
	margin-left: 14px;
	text-indent: -9999px;
	}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}
#content ul li {
	padding-left: 20px;
	margin-left: 25px;
	margin-bottom: 3px;
	margin-top: 5px;
	background-image: url(images/bullet.gif);
	background-repeat: no-repeat;
	background-position: center left;
	font-size: 12px;
	color: #7D8381;
	}
.content-intro {
	font-size: 12px;
	color: red;
	font-weight: bold;
	}
#featured-pic {
	margin-left: 15px;
	margin-right: 10px;
	}
p.homeprofile-txt, p.realtor-txt, p.featured-txt {
	font-size: 12px;
	color: #7D8381;
	margin-top: 5px;
	margin-left: 15px;
	margin-right: 10px;
	}
a:link, a:visited {
	color: black;
	text-decoration: none;
	border-bottom: 1px solid black;
	}
a:hover, a:active {
	color: #343F51;
	text-decoration: none;
	border-bottom: 1px dotted black;
	}
img.featured-pic, img.realtor-pic {
	margin-left: 14px;	
	}

Here's the HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Our Home</title>

<style type="text/css" media="all">@import url("style.css");</style>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv= "pragma" content="no-cache" />
<meta name="robots" content="all" />
</head>

<body>
<div id="container">
	&nbsp;
	<div id="menu"><img src="images/imagemap.gif"></div>
	<h1 id="primary">Country Living</h1>

<div id="content">
	<div class="content-right">
		<h2 id="featured">Feature Presentation</h2>
			<img id="featured-pic" src="images/featured-thumb.png" align="left" width="124px" height="92px" />
			<p class="featured-txt"><span class="content-intro">Please browse our image gallery</span>, where you will find a complete tour of the house, including the kitchen, bedrooms, dining room, and more! Upon loading the gallery, you can choose a new picture simply by clicking on it. Move to the next page by clicking the arrows. <a href="/gallery/public_html/">see the gallery</a></p>
	
		<h2 id="realtor">Realtor Information</h2>
			<img id="featured-pic" src="images/realtor-thumb.png" align="left" width="124px" height="92px" />
			<p class="realtor-txt"><span class="content-intro">Call our realtor</span> to set up a showing of our home! Full information is provided to contact *******************. <a href="#">see the info</a></p>
	</div>

	<div class="content-left">
		<h2 id="homeprofile">Home Profile</h2>
			<p class="homeprofile-txt"><span class="content-intro">The home at ******************* Road</span> sits on three acres of well-manicured lawn. Just made for those beautiful ****** evenings, you'll find both the front porch and back patio providing beautiful vistas for the eye, best enjoyed with a cool glass of iced tea.</p>
			<p class="homeprofile-txt">Completely remodeled within the last year, this house is ready for any family, large or small, to call it home. Here are some of the vital statistics you'll be interested in:</p>
			<ul>
				<li>Bedrooms: 4</li>
				<li>Bathroom: 3.5</li>
				<li>Apprx. SqFt: 4824</li>
				<li><abbr title="List Price per Square Foot">Lp. SqFt</abbr>: 90.17</li>
				<li>Acreage: 3 acres</li>
				<li>City: *********</li>
				<li>County: *********</li>
				<li>Stories: One story</li>
				<li>Style: Traditional</li>
				<li>
			</ul>
			<p class="homeprofile-txt">Please look around our site for more information on this prime home. You'll find that we have a gallery complete with pictures from every area of the house, as well as information on our realtor, and directions on how to get the house if you want to get a better idea of the location.</p>
	</div>

</div>

</div>

</body>
</html>

Here's a picture of what the problem looks like in IE.

Here's a picture of what the problem looks like in Firefox.

Hi

COuld someone take a look at http://www.sussexfind.co.uk/test/ if you view it in Firefox the layout breaks and I don't know why.

If someone could explain why i would be very grateful as I need to get this done soon!!

Thanks

Dear All,
I have a problem with viewing my page in firefox. The Tree Div moves to the right and pushes the other divs down. Please check this temporary URL page. It works fine with IE 7 but FF it creates problems.


http://82.147.208.5/MapsoluteTest/Default.aspx

The css file is given below

Code:

#hdr {
 height:80px;
 padding-top : 5px;
 padding-left : 5px;
 background:#FFFFFF;
 border-color: #EEEEEE;
 border-width : 1px;
 color: #333333;
 text-align:center;
 }
 
 #body_block 
 {
 position:relative;
 background: white;
 color: #333333;
 height:500px;
 padding : 200px;
 }
 
 .TopBar 
 {
 	height:84px;
 padding-top : 5px;
 padding-left : 5px;
 background:#C9E2FF;
 border-bottom-color:#EEEEEE;
	border-left-width: 1px;
	border-right-width: 1px;
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.TreePanel 
{	
float:left;
 width:220px;
 height:700px;
 border-color : Navy;
 background-color:#FFFFFF;
 padding : 10px;
 overflow:scroll;
}

.mapView
{	
	height:600px;
	float:left;
    text-align :center;
    padding-left:150px;
    padding-top: 40px;
}

.mapView1
{	
	height:600px;
	float:left;
    text-align :center;
    padding-left:60px;
    padding-top: 40px;
}

.mapView2
{	
	height:470px;
	float:left;
    text-align :center;
    padding-left:150px;
    padding-top: 40px;     
}


.gridView
{	
	width: 950px;
	height:200px;		
	float:left;
	left:25px;
	text-align:center;	
	overflow: auto;
	padding-top: 10px;
	border : solid 1px black;
}

.roundedPanel
{	
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;
	background-color:#e4e4e4;	
}

.brDefinition
{
	text-align:center;
	width:500px;
    min-height : 750px;
    border-right : solid 1px black;    
    float:left;
    padding-left:20px;
    padding-right:20px;
    
}

.brAssignment
{
	text-align:center;	
	width:757px;
	float:left;
    height : 500px;
    border-right : solid 1px black;    
    border-left : solid 1px black;        
}

.brPanel 
{	
	float:left;
	width:220px;
	height:500px;
	border-color : Navy;
	background-color:#FFFFFF;
	padding : 10px;
	overflow:scroll;
}

.BRTreePanel 
{	
float:left;
 width:220px;
 height:500px;
 border-color : Navy;
 background-color:#FFFFFF;
 padding : 10px;
 overflow:scroll;
}

.BRGrid 
{	
 height:300px;
 padding : 10px;
 text-align: center;
 border-top : solid 1px black;
}

#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

#UpdateProgress1, #UpdateProgress2, #UpdateProgress3, #UpdateProgress4 {
      width: 300px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }

I am not good in CSS. Please help.

Thanks in advance.

Regards,
Noorul

Hi There,

For the last year I've been using a standard CSS layout with 2 columns held within a container. The problem is (and I know this is certainly a common problem) that the left column MUST be longer than the right column or else it flows over and following DIV elements in Firefox. Internet Explorer has no problems with the right column being longer than the left.

An example of this is here (to be viewed in Firefox):

hosteltrail.com/colombia/example/


Thus far, I've had to manually increase the length of the left column in the instances when it is shorter than the right by simply adding an empty div box. Below is the setup for the page container.

#columncontainer {
position:relative; margin:auto;width:750px;
}
#rightcolumn {
float:right;width:355px;
}
#leftcolumn {
width:355px;
}


Does anyone know of a solution to the firefox problem other than adding a div box as a fix?

Well, I'm redesigning my site because the current php management system was thrown together in a hurry just to get it up there. Now I've got time to redo it and I want to do it right. It's a webcomic site.

Currently, the site has an XML layout that serves XHTML after a serverside transformation. What I want to do is lay the site out now so I can define my xsl.

The basic "gist" of the situation is, i want it to be as accessible as possible(even though blind people may not be able to see the images, they deserve to surf my website.). With that, I want my content to show up before my link area, so they can easily get to the content without listening to a long list of links first. So what I've done in firefox was repositioned the div tags that held the content above the div section that held the link boxes. That's fine and dandy, where's my point?

I still want the linkboxes to appear on the lefthand side of the page and the content on the right. In firefox, I used float:right;margin-right:5%; for the content and float:left on the link boxes. It works fine in firefox. The boxes appear on the left and content on the right. However, in IE the content appears on the right, but the link boxes appear on the left of the next line. Here is relelvant code:
html Code:
Original - html Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>AdrienComix</title> <style type="text/css"> #body{ margin:0; } .header{ margin-bottom:10px; width:100%; height:15%; color:#000000; background-color:#00BBFF; background:url(http://www.adriencomix.com/res/head.jpg); border:1px dashed; text-align:center; font-size:20pt; } .box{ border:1px dashed; margin-bottom:30px; margin-left:2px; padding-left:5px; width:100%; background-color:#00BBFF; color:#000000; } .left{ width:15%; height:85%; float:left; } .content{ width:74.6%; height:100%; margin-left:5%; float:right; padding-right:5%; } .comic{ text-align:center; padding-top:15px; padding-bottom:15px; } .emp{ text-align:center; padding-top:20px; font-size:150%; font-weight:bold; } </style> </head> <body id="body"> <div class="header"><p>AdrienComix</p></div> <div class="content"> <div class="emp">Happy New Year!</div> <div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div> <div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div> <div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div> </div> <div class="left"> <div class="box"> <center><h3>Links</h3></center><br/> <a href="http://www.sluggy.com">Sluggy Freelance</a><br/> <a href="http://www.nuklearpower.com">8-bit Theater</a><br/> <a href="http://www.slackware.com">Slackware Linux</a><br/> <a href="http://www.gnu.org">GNU</a><br/> <a href="http://www.kernel.org">Linux Kernel</a><br/> <a href="http://www.google.com">Google</a> </div> <div class="box"> <center><h3>Archive</h3></center><br/> <a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/> <a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/> <a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/> <a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/> <a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/> <a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/> <a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/> <a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/> <a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/> <a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/> </div> </div> </body> </html>

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>AdrienComix</title>
        <style type="text/css">

            #body{
            margin:0;
            }

            .header{
            margin-bottom:10px;
width:100%;
height:15%;
color:#000000;
background-color:#00BBFF;
background:url(http://www.adriencomix.com/res/head.jpg);
border:1px dashed;
text-align:center;
font-size:20pt;
            }

            .box{
border:1px dashed;
margin-bottom:30px;
margin-left:2px;
padding-left:5px;
width:100%;
background-color:#00BBFF;
color:#000000;
}

            .left{
            width:15%;
            height:85%;
            float:left;
            }

            .content{
width:74.6%;
height:100%;
margin-left:5%;
float:right;
padding-right:5%;
}

            .comic{
text-align:center;
padding-top:15px;
padding-bottom:15px;
}

            .emp{
text-align:center;
padding-top:20px;
font-size:150%;
font-weight:bold;
}
        </style>
    </head>
    <body id="body">
        <div class="header"><p>AdrienComix</p></div>
        <div class="content">
            <div class="emp">Happy New Year!</div>
            <div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div>
            <div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div>
            <div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div>
        </div>
        <div class="left">
            <div class="box">
            <center><h3>Links</h3></center><br/>
            <a href="http://www.sluggy.com">Sluggy Freelance</a><br/>
            <a href="http://www.nuklearpower.com">8-bit Theater</a><br/>
            <a href="http://www.slackware.com">Slackware Linux</a><br/>
            <a href="http://www.gnu.org">GNU</a><br/>
            <a href="http://www.kernel.org">Linux Kernel</a><br/>
            <a href="http://www.google.com">Google</a>
            </div>
            <div class="box">
            <center><h3>Archive</h3></center><br/>
            <a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/>
            <a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/>
            </div>
        </div>
    </body>
</html>

Is there any way that I can make it appear on the same line in IE without breaking the layout in firefox and keeping the page accessible?

Ok I have been trying to read and search and fiddle - but im getting to my wits end here. Trying a 2 column layout from scratch and in IE it views fine but firefox is not so fine.

www.chroma-zone.net

css:

www.chroma-zone.net/new.css

Any idea's?

-Thanks

http://925-sterling-silver-jewelry....udes/header.php

well this is my first proper CSS based site but i am having troubles with it. the problem is that in IE the div (main) starts near to the sidebar div, wheras in firefox it starts a bit further away! also at the moment the links at the bottom dont appear in IE but do in FF albeit little messed up.

help please?

the web page contains the following contents
PHP Code:
<body>
<?php include("1banner.php");?>
<div id="frame">
    <div id="contentleft"><?php include("1links.php");?></div>
      <div id="contentcenter">
        <div class="heading-main" align="center" ><p>Code/Script Writing</p><br></div>
    </div>
<?php include ("1footer.php");?>
</div>
</body> 





the footer page should display at last but it display at top of the page i couldn't find error in CSS and page. This page is displaying properly in IE and problem is only in Firefox. Thanks in advance for help.

the CSS used here is

Code:

#contentleft {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	FONT-SIZE: 11px;
	FLOAT: left;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	WIDTH: 233px;
	PADDING-TOP: 0px;
	FONT-FAMILY: Arial,Helvetica,sans-serif;
}
#contentcenter {
	FLOAT: right;
	MARGIN: 0px;
	WIDTH: 542px;
}
#content250{
	MARGIN: 4px 2px 0px 3px;
	WIDTH: 252px;
	TEXT-ALIGN: left;
	float: left;
}
#content250a{
	MARGIN: 4px 3px 0px 2px;
	WIDTH: 252px;
	TEXT-ALIGN: left;
	float: right;
}
#conteninbuilt {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	BACKGROUND: #ffffff;
	FLOAT: left;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	WIDTH: 255px;
	PADDING-TOP: 0px;
	FONT-FAMILY: Arial,Helvetica,sans-serif;
	border: 1px solid #CC6600;
}
#frame {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px auto;
	WIDTH: 775px;
	PADDING-TOP: 0px;
	TEXT-ALIGN: left;
	border: 1px solid #333366;
	background-image: url(../box-bg/body_left_color.gif);
	background-repeat: repeat-y;
}
#sitemap {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px auto;
	WIDTH: 775px;
	PADDING-TOP: 0px;
	TEXT-ALIGN: left;
	border: 1px solid #333366;
}
.bg1 {
	background-image: url(../box-bg/body_left_color.gif);
}
.bg-webname {
	background-image:  url("../images-new/web-name-bg.jpg");
}
.bg-v-boarder {
	background-image: url(../box-bg/bg_dots.jpg);
	background-repeat: repeat-y;
	background-position: 5px;
}
.bg-h-boarder {
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
	border-bottom-width: 2px;
	border-bottom-style: dotted;
}
.bg5 {
	background-color: #006633;
}
.banner-offer-ad {
	background-image:  url("../images-new/free-offer.gif");
}
.bg-banner {
	background-image: url(../box-bg/bg_banner.jpg);
	background-repeat: repeat-y;
}
.boarder-1px-blue {
	border: 1px solid #3333FF;
	margin-top: 5px;
	margin-bottom: 5px;
}
.boarder1 {
	border: 1px solid #990000;
}
.boarder2 {
	border: 2px solid #333399;
}
.boarder3 {
	border: 1px solid #FF6633;
}
.bullet1-links {
	background-image: url(../box-bg/bullet.gif);
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333399;
	font-weight: bold;
	background-position: 3px 8px;
	padding-left: 22px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #999999;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-top: 5px;
	padding-bottom: 10px;
	width: 200px;
}
.bullet2-links-sub {
	background-image: url(../box-bg/circle1.gif);
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #3366CC;
	font-weight: bold;
	background-position: 15px 2px;
	padding-left: 40px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #999999;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-top: 5px;
	padding-bottom: 10px;
}
.bullet3-content {
	background-image: url(../box-bg/bullet3.gif);
	background-repeat: no-repeat;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	font-weight: normal;
	background-position: 10px 5px;
	padding-left: 20px;
	padding-top: 0px;
	padding-bottom: 1px;
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 15px;
}
.contact-photo {
	background-image:  url("../images-new/web_title_ad_welcome_page.jpg");
	background-repeat: no-repeat;
	background-position: right center;
}
.heading-main {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 160%;
	color: #333366;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 0px;
}
.heading-sub1 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding-bottom: 5px;
	margin-bottom: 1px;
	color: #666600;
	margin-top: 5px;
}
.heading-sub2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-right: 5px;
	margin-left: 5px;
}
.links-menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #006699;
	background-image: url(../box-bg/circle1.gif);
}
.margin-5px {
	margin-top: 5px;
	margin-bottom: 5px;
}
.margin1 {
	border: 1px solid #333399;
	padding: 20px;
	margin: 2px;
}
.margin2 {
	margin: 1px;
	padding: 2px;
	border: 1px solid #003333;
}
.margin3 {
	margin: 5px;
}
.text-normal {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 22px;
	margin: 1px 5px;
	color: #333333;
}
.text-normal-left-margin {

	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
	margin: 0px 0px 0px 10px;
	color: #666666;
}
.webname {
	background-image:  url("../images-new/web_name.jpg");
	background-repeat: no-repeat;
	background-position: left center;
}
.bg-security {
	background-color: #FFCC00;
}
#navigation a 
{
	color: #006633;
	background: #ffffff url(../box-bg/bg-1left-cornor.gif) no-repeat left top;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	line-height: 40px;
	margin: 10px;
	padding: 1px 10px 10px 0px;
}
#navigation a span 
{ 
background: url(../box-bg/bg-2right-cornor.gif) no-repeat right top; 
padding: 1px 0px 10px 20px; 
}
.box-light-blue {
	background-color: #E9F7FE;
	width: 300px;
	border: 1px solid #333399;
}
.footer {
	background-image: url(../box-bg/bottom_back.gif);
	height: 30px;
	width: 775px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #003399;
	border-bottom-color: #003366;
	background-repeat: repeat-x;
	background-position: bottom;
}
.heading-sub3 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 13pt;
	color: #333399;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
}
.heading-sub4 {

	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 5px;
	margin-bottom: 1px;
	color: #993300;
	margin-top: 5px;
}
.float-right {
	float: right;
	margin-bottom: 5px;
	margin-left: 5px;
}
.bullet4 {
	background-image: url(../box-bg/bullet4.gif);
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #AE337A;
	font-weight: bold;
	background-position: 0px 0px;
	padding-left: 35px;
	margin-left: 10px;
	padding-top: 0px;
	line-height: 30px;
}
.bullet5 {

	background-image: url(../box-bg/bullet5.gif);
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003399;
	font-weight: bold;
	background-position: 0px 11px;
	padding-left: 15px;
	margin-left: 10px;
	line-height: 10px;
}
.heading-sub5 {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #333399;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
}

Hi Guys,

I'm having a bit of an issue with the layout of my new site.

I have got it working in FF3, ie 6 and 7 using conditional comments, but now I have a problem where FF2 is giving me the same problems as what ie was giving me. As far as I know you can't use conditional comments to differentiate between FF 2 and 3.

I wish I could narrow down the problem further, but I am just completely lost. Please could you guys have a look at http://www.action-figure-world.com/index.html and tell me what I could do to fix the problem.

Thanks a ton!