Forum Moderators: not2easy
the css file is as following:
body {
padding: 0;
background: #FFFFFF;font: normal .7em Tahoma, Arial, Helvetica, sans-serif;
color: #666666;
}
#form1
{
}
#wrapper {
width: 820px;
background-color: Black;
}
#logo1
{
float:left;
width: 200px;
height: 150px;
background-image: url(Images/img1.jpg);
}
#logo2
{
float:right;
width:607px;
height:150px;
background-image: url(Images/sea.JPG);
}
thwn html code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="logo1">
test1
</div>
<div id="logo2">
test2
</div>
</div>
</form>
</body>
</html>
Here is the two screenshots form Firefox 2 and IE 6 respectively: <>
Why firefox has the above behavour? i mean, the div "wrapper" has two nested logos, so its make sense to have a black colored background
[edited by: SuzyUK at 7:44 am (utc) on April 18, 2008]
[edit reason] no personal URI's please, see charter [/edit]
I don't think you're allowed to drop URIs like that, check out the CSS Forum's Guide to Posting [webmasterworld.com]
Firefox's (and other standards-compliant browsers') behaviour is actually the correct one. Parents don't acknowledge floated children, because to float it is to take it out of the natural document flow. With nothing in your container that retains natural document flow, the parent element actually has no height, thus no black background.
There is a fix for this though: you can make standards-compliant browsers acknowledge something beyond the floats, with the use of
clearHTML:
<div id="parent">
<div id="floated-left"></div>
<div id="floated-right"></div>
<div class="clear"> </div>
</div>CSS:
div.clear { clear: both;
height: 1px;
overflow: hidden;
visibility: hidden; }clear
