Display problem. IE fine, FF problem?

**davidpenney** · 04-08-2008, 09:19 PM

Hi Im trying to create a new layout with a floating div aligned to the bottom right.

It displays correctly in IE, but in FF a gap appears between the main area and the footer area showing the bg of the wrapper...

http://www.keghire.com/test.html

Can anyone offer any advice, as im pretty stuck!

thanks.

the 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

</style>
</head>

<body>
this is a test

<div id="wrapper">
<div id="main">
<p>Main Text Area</p>
</div>
<div id="footer">
<p>FooterText Area</p>
<div id="overlay">Iamge Overlay</div>

</div>
</div>
</body>
</html>

**Medyman** · 04-09-2008, 12:25 AM

That gap is because of the default margin around the paragraph element in you footer. Add the below to fix it.

Code:

#footer p { margin:0; padding:0;}

Also, I think your image overlay belong with your wrapper div not the footerdiv.

You probably want something like this:

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

#wrapper {
width: 500px;
margin:0 auto;
background-color: #CCCCCC;
position:relative;
}

#main {
width: 500px;
min-height: 400px;
background-color: #999;
margin:0px;
padding:0px;
}

#footer {
width: 500px;
height: 100px;
background-color: #666666;
}

#footer p { margin:0; padding:0;}

#overlay {
position:absolute;
width:200px;
height:215px;
z-index:2;
right: 0;
bottom: 0;
background-color: #0066FF;
filter:alpha(Opacity=50);
}

</style>
</head>

<body>
this is a test

<div id="wrapper">
	<div id="main">
		<p>Main Text Area</p>
	</div>
	<div id="footer">
		<p>FooterText Area</p>
	</div>
	<div id="overlay">Iamge Overlay</div>
</div>

</body>
</html>

It doesn't change the look/layout but the structure makes a little more sense.

**davidpenney** · 04-09-2008, 10:58 PM

perfect. thank you!

Thread: Display problem. IE fine, FF problem?

Thread Tools

Search Thread

Display problem. IE fine, FF problem?

The Following User Says Thank You to Medyman For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions