Absolute positioning in IE (rant + question)

Discussion in 'HTML' started by Chris, Nov 18, 2005.

  1. Chris

    Chris Guest

    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>
     
    Chris, Nov 18, 2005
    #1
    1. Advertisements

  2. Chris

    Mark Parnell Guest

    In our last episode, Chris <> pronounced to alt.html:

    [IE7]
    Most of the CSS work won't be in IE7 until Beta 2, so it's pretty much
    irrelevant at this point. :-(
     
    Mark Parnell, Nov 18, 2005
    #2
    1. Advertisements

  3. Chris

    Toby Inkster Guest

    More likely: I think Microsoft made IE's quirks mode evolve the way it did
    because it was built by a lot of new programmers, without any knowledge of
    how HTML or CSS was *supposed* to work, so they just did what they
    intutively thought it should (most of the time), which made it less
    difficult to get a simple browser to do common things that should be easy.
     
    Toby Inkster, Nov 18, 2005
    #3
  4. Chris

    Toby Inkster Guest

    Bah -- if IE7 *does* finally have decent standards support[1] then IE 5/6
    will see the wrath of my Netscape 4.x style sheet. :)

    ____
    1. I'm not expecting miracles, but fixed positioning, alpha-blended PNGs,
    proper support for :hover, display:table, etc would be nice.
     
    Toby Inkster, Nov 18, 2005
    #4
  5. Chris

    Chris Guest

    My point was that bottom and right seem to be often overlooked when
    designing stylesheets because long term writers of HTML are used to
    thinking in terms of top, left, width and height because of the flow
    model. I assume that when writing the CSS spec the writers considered
    the VERY common need to have a fixed padding or border as well as a
    percentage width. Without right and bottom this is only possible if you
    use the Microsoft quirk of having the border and padding included in
    the width as you can't say width: 100% - 10px. Am I right it thinking
    that the CSS spec was designed to use bottom and right for this problem
    because they rarely seem to be mentioned in the many, many posts asking
    how to achieve simple sizing of rectangles? If so then Internet
    Explorer's bad support for these properties is at the very heart of
    many web designers problems. My question was how does Microsoft say
    that this basic layout should be implemented?
     
    Chris, Nov 20, 2005
    #5
  6. Who the hell are you talking to, and what are you talking about?
     
    Travis Newbury, Nov 20, 2005
    #6
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.