Georg sent me this private reply. For the benefit of the list, I
asked his permission to repost it to the list.
(BEGIN:)
Opera _can_ float elements at the same level as non-floating elements -
even when a non-floating element comes first in the source-code. Other
browsers will drop the float below the non-floating element in such
cases. Nothing wrong the behavior for any of the browsers, but Opera's
way is actually a bit "unusual".
>>> Right now, it looks great in Firefox and Opera. IE is still
>>> doing two funny things:
>>>
>>> 1) Adding a giant chunk of whiteness, where the background image
>>> is not showing.
>>
>> Add: #top {width: 100%;}
It is explained in details here...
<http://www.satzansatz.de/cssd/onhavinglayout.html>
...but the short answer is that giving the element defined dimensions
will trigger an exclusive IE/win bug - give the element 'Layout'. That's
why we often call it a 'hasLayout' trigger. The well known 'Holly Hack'
does exactly the same, but isn't needed in this case since no browsers
are misinterpreting a width-value when there's nothing else at the sides
and _no_ margins, paddings or borders.
>>> 2) Shifting the man's head over a few pixels, so that it doesn't
>>> line up right.
>>
>> Correct it for IE/win only: @media screen { * html img#dude
>> {margin: 0 0 0 -3px;} }
>>
>> Minor detail, but will also advice you to put <img
>> src="top_logo.jpg"... /> before <img id="dude" src="top_left.jpg"
>> ... /> (reverse the order), so the poor guy don't get his head
>> chopped off on narrow windows :-)
This has to do with how content get linearized on narrow
windows/screens. We can use 'min-width' to stay in some control on
normal screens, but it's a bit harder to master the really small screens.
Look at how Opera will linearize your page in 'small screen rendering'
(shift + F11), and you'll get a good idea of more that just one problem
the sequence and layout-method a web page should - ideally - be able to
handle. Quite a few millions mobile phones out there already, and many
use them for surfing.
More on the subject...
<http://www.gunlaug.no/contents/wd_1_05.html>
...and that is on my own site in case you're wondering :-)
>>> http://mortgagephonequotes.com/mortgage.html
>>
>> A more important detail: IE6 is in quirks mode, so you should
>> delete 'padding-right: 15%;' from #results. That padding doesn't
>> make sense in any browser anyway - regardless of mode, and it
>> messes up available width in IE/win. Box-model differences... The
>> 'width: 55%;' does the job on its own, without any padding.
Complete explanation here...
<http://www.w3.org/International/articles/serving-xhtml/>
...and I'm one of those who almost always run IE6 in quirks mode.
>> Also on #result: change 'line-height: 1.4em;' to 'line-height:
>> 1.4;' (no unit), to get the correct calculation on child-elements.
>> Difference is pretty visible on narrow windows - especially in
>> IE/win.
The big picture...
<http://www.w3.org/TR/REC-CSS2/syndata.html#length-units>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
