Layout Inconsistencies (IE vs Firefox)

**gt123** · 06-09-2007 08:44 AM

Hi there,

I've made a rough layout for my site, but it is appearing differently in IE and Firefox, it shows how I want it to look in IE, but Firefox moves down the heading and the content text below it.

IE - http://img260.imageshack.us/img260/4733/egie1ew0.jpg

Firefox - http://img260.imageshack.us/img260/8352/egie2uw7.jpg

I have padding above the heading text, then a few breaks between the heading text and the content text. I've played about with these but to no avail. I want it to look in Firefox how it already does in IE, so how do I fix it?

Thanks,

GT

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<link rel="stylesheet" href="css/main.css" />
		<title>Site Title</title>
	</head>

	<body>
		<div id="container">
			<div id="logonav">
				<br />
				<br />
				<br />
				<br />
				<a class="home" href="index.htm">HOME</a><br/>
				<a class="breakfast" href="breakfast.htm">BREAKFAST</a><br/>
				<a class="lunch" href="lunch.htm">LUNCH</a><br/>
				<a class="dinner" href="dinner.htm">DINNER</a><br/>
				<a class="desserts" href="desserts.htm">DESSERTS</a><br/>
			</div>
			<div id="content">
				<h2>Site Title</h2>
				<br />
				<br />
				<br />
				<p>
					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
					eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
					voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
					clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
					amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam 
					nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
					sed diam voluptua. 
				</p>
				<p>
					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
					eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
					voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
					clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
					amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam 
					nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
					sed diam voluptua. 
				</p>
				
			</div>
		</div>
	</body>
</html>

Code:

body 
	{
		background-color: #110000;
		text-align: center;
	}
a  
	{
		text-decoration: none;
		font-family: arial, verdana;
		font-size: 11pt;
		font-weight: bold;
	}
a:link
	{	
		color: #C5D28D;
	}
a:visited
	{
		color: #C5D28D;
	}
a:hover
	{
		color: black;
	}
a.home:hover
	{
		color: #F7E410;
	}
a.breakfast:hover
	{
		color: #F48A10;
	}
a.lunch:hover
	{
		color: #F87210;
	}
a.dinner:hover
	{
		color: #F64610;
	}
a.desserts:hover
	{
		color: #FA1010;
	}
a:active
	{
		
	}
#container 
	{
		width: 750px;
		margin: 0 auto;
		text-align: left;
	}
#logonav
	{
		background-image: url('../images/logo1.jpg');
		background-repeat: no-repeat;
		float: left;
		left: 0px;
		top: 0px;
		width: 170px;
		padding: 100px 0px 0px 25px;
	}
#content
	{
		top: 0px;
		width: 500px;
		height: 500px;
		border: solid #C9DDA9;
		border-width: 0px 1px 0px 1px;
		float: right;
		padding: 45px 25px 0px 25px;
	}
p	
	{
		font-family: arial, verdana;
		font-size: 11pt;
		color: #C5D28D;
	}
h2
	{
		color: #C9DDA9;
		text-align: left;
		font-family: arial, verdana;
		font-size: 32pt;
	}

**timdenty** · 06-09-2007 12:22 PM

Different browsers use differing default margins & padding for elements such as a H2. As you haven't specified any, that is why the gaps differ. I would remove all the <br />s and add margin & padding values to all the elements you are having issues with.

Also, any reason you used H2 instead of H1 - They need to be semantic (ie. in correct order) for the page to validate, if i remember rightly.

**drhowarddrfine** · 06-09-2007 03:24 PM

They need to be semantic (ie. in correct order) for the page to validate, if i remember rightly.

Nope.

**timdenty** · 06-09-2007 07:32 PM

Fair enough - still bad practice though...

"in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not "skip" levels (e.g., H1 directly to H3)" - http://www.w3.org/TR/WCAG10-HTML-TEC...cument-headers

**gt123** · 06-10-2007 09:28 AM

Sorted that problem out now, but I was wondering..

I have my main content div with a left and right border, that runs from the top of the div down to where the text finishes. How do I make it so that the div (and therefore the borders) always extend to the bottom of the browser window?

**ray326** · 06-10-2007 11:56 AM

http://alistapart.com/articles/fauxcolumns

I.e. cheat.

Thread: Layout Inconsistencies (IE vs Firefox)

Thread Tools

Display

Layout Inconsistencies (IE vs Firefox)

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions