|
|
Posted by Chris on 11/18/05 02:03
Sorry if this is in the FAQ but I feel if it is it's worth repeating in
light of IE7 being in Beta as I think it gets to heart of a lot of the
most frustrating CSS problems. I think Microsoft made IE's quirks mode
evolve the way it did because it did what a lot of new web designers
would intuitively think it would (most of the time), which made it less
difficult to get a simple page to do common things that should be easy
such as having a child just fill 100% of it's parent's width (and
height but IE failed at this) even if it had padding and borders or
giving an inline element such a hyperlink a width to make it look like
a button.
I used to think that Microsoft was right having the width including
padding and borders and that the CSS spec was badly written and
counter-intuitive without enough input from poor web designers who have
to work with it. CCS2 fixed a lot of the problems, if only all browsers
would properly support it. I still get annoyed with the 'Quirks' in the
spec when they seem totally unnecessary and make things far more
difficult but I'm now on the side of Firefox and co in saying that
Microsoft is now making making things far MORE difficult by not
supporting the standards.
If there are 2 main CSS2 properties that make quirks mode obsolete its
bottom and right as these make positioning and sizing simple. IF ONLY
IE GOT IT RIGHT!
If there's one thing I want IE7 to get right its this page from the W3C
css2 recommendation except I've added the XHTML doctype, colours and
changed the position: fixed to position: absolute so it applies to any
bounding box not just the viewport.
Has anyone with MSDN tried this in the Beta? Even if IE7 does get it
right we'll have to deal with IE5/6 for a long time yet so has anyone
got IE6 to display the simple dynamic layout that should be produced
from this XHTML like Firefox does?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>A frame document with CSS2</TITLE>
<STYLE type="text/css">
BODY, HTML { height: 100% ; margin: 0}
#header {
width: 100%;
height: 15px;
top: 0;
right: 0;
bottom: auto;
left: 0;
background-color: blue;
}
#sidebar {
position: absolute ;
width: 10em;
height: auto;
top: 15px;
right: auto;
bottom: 100px;
left: 0;
background-color: green;
}
#main {
position: absolute ;
width: auto;
height: auto;
top: 15px;
right: 0;
bottom: 100px;
left: 10em;
background-color: yellow;
overflow: auto ;
}
#footer {
position: absolute ;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
background-color: red;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header"> ... </DIV>
<DIV id="sidebar"> ... </DIV>
<DIV id="main"> ... </DIV>
<DIV id="footer"> ... </DIV>
</BODY>
</HTML>
Navigation:
[Reply to this message]
|