Andrew Leach wrote:
> I've put up the full page to show the effect of the change and the
> effect that I'm trying to achieve as it wasn't especially clear on
> the simplified web page, same place: www.leachy.co.uk
Ah! Much easier to debug the real thing :-)
The simplest solution is to get rid of all the #header-clearing hacks,
and leave the following as the _only_ #header styles...
#header {
width:100%;
height:74px;
background:#c60000;
}
...that's right: no more #header styles/hacks here. The image comes next.
Then you _must_ correct how you position the image inside header - using
margins instead of 'top/left'...
#header img {
float:left;
position:relative;
margin: -78px 0 -80px -19px;
}
...and (almost) all browsers will handle the #header the same way -
without further help.
(IE/Mac won't play ball, but the entire layout is corrupted in that
browser anyway, so IE/Mac will need a lot of extra attention/help if you
want to support it.)
The reason you had problems with your original is that
relative-positioned elements still take up full space in their original
position, no matter how far off you position them. Thus, it overshot the
bottom of the #header, and the good browsers - quite correctly -
adjusted to it.
Hiding the overflow solved _that_ problem, but we have no property
that'll allow us to hide the overflow on just one side of an element, so
too much became hidden.
The little trick of 'repositioning a float with negative margins' does
not leave anything behind in the original position, and those margins
can also be "tailor-made" to "remove" parts of the space a float takes
up - without changing how it looks.
It's a real conflict-solver - or quite the opposite if one lose track of
what happens.
More on that 'removed float' technique here...
<http://www.gunlaug.no/contents/wd_demo_float_03.html>
The only reason there's still a 'position: relative' on that floating
image is that IE6 will otherwise "chop off" the part that's outside the
edge of #header. That's a genuine IE/win bug, and is also why IE6 can
present the entire image even if the overflow is hidden.
I've got a perfect line-up in Opera, Safari, Firefox & IE6 - locally, so
you should get the same.
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
