Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Supreme Overlord Spookster's Avatar
    Join Date
    May 2002
    Location
    Marion, IA USA
    Posts
    6,278
    Thanks
    4
    Thanked 83 Times in 82 Posts

    CSS specified table width gone crazy in IE6

    I am designing a CSS based layout for a control panel and everything is working perfectly in NS7 and Opera.

    I wanted the table here to span 100% of the center column and it does so fine in Netscape 7 and Opera but in IE6 it goes nuts.

    http://www.designqueue.com/misc/dentist.htm

    In IE6 the 100% width table causes the size of the center column to go all the way to the right edge of the browser which pushes the right column out of whack.

    How can I make IE happy and still have it work correctly in NS7 and opera?
    Spookster
    CodingForums Supreme Overlord
    All Hail Spookster

  • #2
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's quite wierd... I can't see any potential box model problems. I'd still reccomend a strict doctype, though.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #3
    Regular Coder Skyzyx's Avatar
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    IE does that. It seems to think that width:100% means 100% of the entire page, from where it begins.

    I'd suggest giving leftcolumncontent and rightcolumncontent specific (fixed) widths, and set the centercolumncontent to width:auto;

    Creator of SimplePie and Tarzan AWS, co-founder of WarpShare, co-built the Y! Messenger website, usability-focused, and an INFJ personality.

  • #4
    Supreme Overlord Spookster's Avatar
    Join Date
    May 2002
    Location
    Marion, IA USA
    Posts
    6,278
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Originally posted by me'
    That's quite wierd... I can't see any potential box model problems. I'd still reccomend a strict doctype, though.
    What would that do?
    Spookster
    CodingForums Supreme Overlord
    All Hail Spookster

  • #5
    Supreme Overlord Spookster's Avatar
    Join Date
    May 2002
    Location
    Marion, IA USA
    Posts
    6,278
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Originally posted by Skyzyx
    IE does that. It seems to think that width:100% means 100% of the entire page, from where it begins.

    I'd suggest giving leftcolumncontent and rightcolumncontent specific (fixed) widths, and set the centercolumncontent to width:auto;
    This design relies upon non fixed width columns. To make the left and right columns fixed widths would require a complete redesign of the CSS.

    I wasn't able to find many fluid CSS layouts using source ordered columns. This one works well except for this one issue in IE.
    Spookster
    CodingForums Supreme Overlord
    All Hail Spookster

  • #6
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Spookster
    What would that do?
    IE6 changes from Microsoft's box model to the w3c's box model if you supply a strict doctype.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #7
    Supreme Overlord Spookster's Avatar
    Join Date
    May 2002
    Location
    Marion, IA USA
    Posts
    6,278
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Originally posted by me'
    IE6 changes from Microsoft's box model to the w3c's box model if you supply a strict doctype.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    That is Microsoft's box model?
    Spookster
    CodingForums Supreme Overlord
    All Hail Spookster

  • #8
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My mistake, IE uses the w3c box model even with a transitional doctype, but that doesn't mean you should use it. It was originally meant for older sites making the transition to XHTML, rather than new, but lazy, web developers. Why use a doctype that's looser than one you could equally use? Your code will ultimately be tighter, more standards compliant and less ambigious.

    Transitional should only be used if you absolutely have to have a feature that's not the strict doctype (like opening a new window).
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #9
    Supreme Overlord Spookster's Avatar
    Join Date
    May 2002
    Location
    Marion, IA USA
    Posts
    6,278
    Thanks
    4
    Thanked 83 Times in 82 Posts
    How would I change that one to a strict doctype?
    Spookster
    CodingForums Supreme Overlord
    All Hail Spookster

  • #10
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The code for the strict doctype is:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    I've also compiled a list of doctypes and other such snippets (ie: the meta tag for character encoding and content type, and the html tag with the xmlns declaration), I'll upload it:
    Attached Files Attached Files
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #11
    Supreme Overlord Spookster's Avatar
    Join Date
    May 2002
    Location
    Marion, IA USA
    Posts
    6,278
    Thanks
    4
    Thanked 83 Times in 82 Posts
    I changed it to a strict doctype and there was no change.

    http://www.designqueue.com/misc/dentist.htm

    Still looks perfect in NS7 and Opera and messed up in IE6.

    Any other suggestions?
    Spookster
    CodingForums Supreme Overlord
    All Hail Spookster

  • #12
    Supreme Overlord Spookster's Avatar
    Join Date
    May 2002
    Location
    Marion, IA USA
    Posts
    6,278
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Buehler? Buehler?
    Spookster
    CodingForums Supreme Overlord
    All Hail Spookster

  • #13
    Supreme Overlord Spookster's Avatar
    Join Date
    May 2002
    Location
    Marion, IA USA
    Posts
    6,278
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Anybody?
    Spookster
    CodingForums Supreme Overlord
    All Hail Spookster

  • #14
    Regular Coder
    Join Date
    Jun 2002
    Posts
    676
    Thanks
    1
    Thanked 0 Times in 0 Posts
    spook...
    /me is on just a ie6® n' it looks ok to /me...

    http://www.justame.com/justame/spookstooth.jpg


    mayyybe youre seeing the ol' just a cached® copy???

  • #15
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •