...

View Full Version : CSS specified table width gone crazy in IE6



Spookster
01-07-2004, 06:13 PM
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?

me'
01-07-2004, 06:57 PM
That's quite wierd... I can't see any potential box model problems. I'd still reccomend a strict doctype, though.

Skyzyx
01-07-2004, 07:11 PM
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;

Spookster
01-07-2004, 08:20 PM
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
01-07-2004, 08:27 PM
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.

me'
01-08-2004, 05:13 PM
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.

Spookster
01-08-2004, 06:13 PM
Originally posted by me'
IE6 changes from Microsoft's box model to the w3c's box model if you supply a strict doctype.



<!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? :confused:

me'
01-08-2004, 06:24 PM
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).

Spookster
01-08-2004, 06:47 PM
How would I change that one to a strict doctype?

me'
01-08-2004, 06:51 PM
The code for the strict doctype is:
<!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:

Spookster
01-08-2004, 07:47 PM
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
01-10-2004, 03:16 PM
Buehler? Buehler?

Spookster
01-14-2004, 04:54 PM
Anybody? :(

justame
01-14-2004, 05:01 PM
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???

liorean
01-14-2004, 05:21 PM
You have some problems there. Ie5w, ie5.5w and ie6w display it differently, and additionally, a wide browser windoe displays it different from a thin browser window.

<http://liorean.web-graphics.com/spook%20wide%20ie6w.png>
<http://liorean.web-graphics.com/spook%20wide%20ie5.5w.png>
<http://liorean.web-graphics.com/spook%20wide%20ie5.01w.png>
<http://liorean.web-graphics.com/spook%20thin%20ie6w.png>
<http://liorean.web-graphics.com/spook%20thin%20ie5.5w.png>
<http://liorean.web-graphics.com/spook%20thin%20ie5.01w.png>

Spookster
01-14-2004, 06:54 PM
Originally posted by justame
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???

Hi justayou. To see the way it is suppose to look you need to look at it in NS7 or Opera. Microbug IE just doesn't render it correctly.

Spookster
01-14-2004, 06:57 PM
Originally posted by liorean
You have some problems there. Ie5w, ie5.5w and ie6w display it differently, and additionally, a wide browser windoe displays it different from a thin browser window.

<http://liorean.web-graphics.com/spook%20wide%20ie6w.png>
<http://liorean.web-graphics.com/spook%20wide%20ie5.5w.png>
<http://liorean.web-graphics.com/spook%20wide%20ie5.01w.png>
<http://liorean.web-graphics.com/spook%20thin%20ie6w.png>
<http://liorean.web-graphics.com/spook%20thin%20ie5.5w.png>
<http://liorean.web-graphics.com/spook%20thin%20ie5.01w.png>

I'm really only concerned with the latest IE as this will be an administrative section not seen by the public. It works as long as I don't set the table width for the table containing the search results to 100%. If I give it a pixel width it works but it looks so much nicer when it spans the width of the center column.

liorean
01-14-2004, 07:52 PM
And wrapping the table in a div with the percentage width you want doesn't work either?

Spookster
01-14-2004, 08:23 PM
Originally posted by liorean
And wrapping the table in a div with the percentage width you want doesn't work either?

Holy crap!!!!!! That worked!!!! You're a genius thank you.

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

Now it renders the same in IE6, NS7 and Opera.

liorean
01-14-2004, 08:29 PM
If I had known that you hadn't tried that ages ago I could have saved you a lot of trouble, that was my impulse response to this thread when I first read it, but I decided not to join the discussion since you seemed to have helpers here already...


Originally posted by Spookster
You're a geniusI know, everybody tells me that ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum