Forum Moderators: not2easy
[snip]
Here is the actual code:
<head>
<style type="text/css">
#logo {
float:left;
}
#welcome {
background-image:url('bluebox.gif');
width:629px;
height:126px;
}
</style>
</head>
<body>
<div id="logo">
<img src="dizzylogo.gif">
</div>
<div id="welcome">
<img src="welcome.gif"><img src="line.gif">
</div>
</body>
I would appreciate any help!
Thank you,
Jamie
[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]
[edited by: createErrorMsg at 10:48 am (utc) on Aug. 2, 2005]
In IE6 this renders correctly, but in all other browsers, the background-image in the second element is not pushed forward by the first element, but is simply displayed "underneath it".
Actually, the other browsers are doing it right. IE displays the way it does because of a bug in that browser that causes it to use it's own, incorrect, formatting model for floats. I'll explain....
When you float an element, it is removed from the flow and then moved in it's float directionuntil it hits the edge of it's container (or another float). Being removed from the flow, the float no longer influences the layout or positioning of other elements on the page. So any element which follows a floated element in the source code, is no longer effected by it, and will slide up "underneath it," so that, in the case of a left floated element, the upper left corner or the float, and the upper left corner of the float-adjacent element are at the same place.
Following this, a second float behavior kicks in: a float will not allow text line-boxes to go underneath it, so although the containing element for text that is adjacent to a float moves underneath it, the text itself will wrap around it.
All of this is the right and proper behavior for floats. It's exactly how they were designed to work.
The reason IE displays differently is because you applied a width and a height (just one of them triggers the bug) to the float-adjacent element. As soon as you apply a dimension to that element, IE kicks on it's proprietary float model, one effect of which is that the edge of the non-floating element starts next to the float, rather than undeneath it. This incorrect implementation (on IE's part) didn't cause a lot of trouble for you because you're using pixel units, but had you been using percentage widths, you'd have seen some crazy things.
So step number one to fixing this is getting yoru code a point where it displays uniformly across browsers. once we have the same effect on all browsers, we can then work on making that effect the one that you want.
Step 1: Get rid of the width and the height on the float adjacent #welcome div. If anything, you should give the floated element a width, as this fends off some other IE bugs.
Step 2: wrap these two divs in a container. I'll call it #header. If you need to control the total width of this part of your layout, you can do so by assigning a width to the #header div. This will allow you to leave measurements OFF of the #welcome div, which is what's triggering the problem.
So now you should have something like this. I'll guess at your image dimensions and say the logo is 200px wide by 100px tall, and that you want the total width of this layout to be 829px...
<head>
<style type="text/css">
#header{
width:829px;
}
#logo {
float:left;
width:200px;
height:100px;
}
#welcome {
background-image:url('bluebox.gif');
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<img src="dizzylogo.gif">
</div>
<div id="welcome">
<img src="welcome.gif"><img src="line.gif">
</div>
</div>
</body>
Browsers should be displaying this uniformly at this point, but it will be uniformly NOT how you want it to look. Now we need to push the background image on #welcome out from under your floated logo in a way that complies with standards. To do that, apply a left margin equal to the width of the logo (this is why we assigned a width matching the logo image to that div) to #welcome. Since backgrounds do not continue into the margins of an element, this will move the background image over the way you want...
#welcome{
margin-left: 200px;
}
cEM
Thank you so much for taking the time to write such an articulate and exhaustive reply, it has made things a lot clearer for me and my layout is now working correctly!
Jamie
