Log in

View Full Version : 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">
<!--


#wrapper {
width: 500px;
margin-left:auto;
margin-right:auto;
background-color: #CCCCCC;
}


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

#footer {
position:relative;
width: 500px;
height: 100px;
background-color: #666666;
}
#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 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.
#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:


<!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!