Click to See Complete Forum and Search --> : Problem with FF


drackemoor
04-05-2006, 09:25 AM
This code works in IE but not in FF
css

body {
margin: 0;
padding: 0;
text-align: center;
background: url(images/buy-property.gif) repeat-x;
height: 100%;
}
#contall {
text-align: left;
margin: 0px auto 0px auto;
padding: 0px;
border:0;
width: 772px;
}

#header {
margin: 0 0 0px 0;
background: url(images/realestate-comfort.jpg) no-repeat top;
height: 117px;
}
#containerhead{
background: url(images/buy-real-estate.jpg) no-repeat top;
height: 267px;
}
#container{
height: 100%;
background-image: url(images/conback.gif);
}
#side-a {
width: 150px;
margin-left: 0px;
float: left;
}

#side-b {
width: 150px;
float: right;
}

#content {
width: 56%;
float: left;
}

#footer {
clear: both;
background: url(images/conback.gif);
}

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="my.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contall">
<div id="header"> HEADER </div>
<div id="containerhead"> </div>
<div id="container">
<div id="side-a"><div>This is the text. I don't want here white background but in FF here it is.</div></div>
<div id="content"><div>This is the text. I don't want here white background but in FF here it is.</div></div>
<div id="side-b"><div>This is the text. I don't want here white background but in FF here it is.</div></div>
</div>
<div id="footer"> FOOTER </div>
</div>
</body>
</html>


In IE background-image is visible but in FF the text is on white background. Can somebody tell me how to change css for the same effect in FF.
Here is the same page live.http://proba.scraft.net/3col/
Thank you.

toicontien
04-05-2006, 10:45 AM
IE-Win doesn't support the float property correctly, so actually your code is fine in Firefox and problematic in Internet Explorer. Read the forum post in my signature entitled "Quick Floated Elements Explanation" for more information. This is a common issue that designers run into.

Basically, move your #footer so it's inside the #container DIV to stretch that DIV down past the floated columns.

drackemoor
04-05-2006, 10:57 AM
Thank You for all your help.