vwf wrote:
> http://www.umantec.nl/olland/
> I try to learn CSS2. I made my first pages, and they render as
> intended with Firefox 1.5 and Opera 9. Unfortunately, in IE6 it is a
> mess. Can someone tell me what I do wrong?
Nothing much wrong with your CSS, but you are experiencing a few IE-bugs
and some default-style differences.
1: IE6 take dimensions from body, so 'width: 100%;' on #separator will
only be as wide as you have declared the body to be - 720px. No cure
that I know of - apart from using a page-wrapper div instead of body for
controlling width.
2: The IE whitespace bug is making separator dependent on font-size,
since IE sees a space in an otherwise empty element. This becomes
visible since IE doesn't respect declared dimensions, and will
auto-expand to make the imaginary space fit.
Simplest "cure" is to declare 'overflow: hidden' on #separator.
3: IE has default margins on lists, so you must declare 'margin: 0;' on
lists that shouldn't have one. This default-margin affects the #submenu
in particular, and IE's auto-expanding bug creates the overlapping.
4: IE has the 'em font-resizing bug'[1]. Simplest cure is to declare...
html {font-size: 100%;}
The rest is due to the IE PNG-transparency problems it seems, so no
extra cures should be needed unless I have missed something.
BTW: XHTML 1.1 isn't supposed to be used for pages served as
'text/html', according to W3C. Better to use XHTML 1.0 Strict.
regards
Georg
[1]http://www.gunlaug.no/contents/wd_additions_13.html
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
