Re: [css-d] Perfect 3 column liquid layout (Matthew James Taylor) and Quirks Mode
Thanks for the help Georg. This seems to be working. As you mentioned, the
only drawback appears to be that it breaks down in IE6 and below when you
resize the window real small. So it's either that or go with Quirks Mode. I
think I'll opt for no Quirks Mode and put up with the window resizing issue.
I'll be a happy man when IE6 does finally disappear from the landscape. My
April Urchin stats show IE6 users at 24% - compared to 46% for IE7, 22% for
Firefox, 4.5% for Safari, 0.64% for Opera, and a whopping 0.11% for IE5. It
looks like it will still be awhile, but the Firefox numbers are encouraging.
-Melbeach
- Original Message -
From: Gunlaug Sørtun [EMAIL PROTECTED]
To: Melbeach [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Sent: Wednesday, May 28, 2008 12:51 PM
Subject: Re: [css-d] Perfect 3 column liquid layout (Matthew James Taylor)
and Quirks Mode
Melbeach wrote:
I've been experimenting with the different 3-column layout methods and I
think
I like this version the best:
http://matthewjamestaylor.com/blog/perfect-3-column.htm. However, it seems
that the layout only works in IE6 if I send the browser into Quirks Mode
by
beginning the html/xhtml page with the following declaration:
?xml version=1.0 encoding=utf-8?
If I delete this, the layout breaks apart in IE6.
If you by breaks mean the border gets added to the viewport in IE6'
slightly more standard compliant mode, then adding...
html {border: none;}
...will fix that. It's as expected since body equals viewport in quirks
mode while html equals viewport in standard mode.
I can't provoke any other differences between the two modes in IE6 at my
end, so if there are any problematic ones then you'll have to tell me/us
where they are.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Perfect 3 column liquid layout (Matthew James Taylor) and Quirks Mode
Melbeach wrote: Thanks for the help Georg. This seems to be working. As you mentioned, the only drawback appears to be that it breaks down in IE6 and below when you resize the window real small. So it's either that or go with Quirks Mode. I think I'll opt for no Quirks Mode and put up with the window resizing issue. Your choice, of course. I have yet to see any advantages in having IE6 in its not very standard compliant mode... http://www.gunlaug.no/contents/wd_additions_16.html ...so I'll keep it in quirks mode until there's not a single one left on earth to confront my designs :-) I'll even overload IE6 with min/max expressions until it chokes on them... http://www.gunlaug.no/contents/wd_additions_14.html ...just for the fun of it. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Perfect 3 column liquid layout (Matthew James Taylor) and Quirks Mode
Nice article. I think you have swayed me in the other direction. Now there is just one more thing I must consider which may change my mind again. I plan to upgrade to the new version (v5.5) of the Miva Merchant shopping cart. Older versions didn't fare well with xhtml. I heard that the issue has been corrected in v5.5. But if I am forced to code in HTML 4.01 - according to your article, if I throw IE6 into quirks mode, IE7 will also go into quirks mode. I probably don't want that to happen. So I will find out. Off to the Miva forum. Thanks again! -Melbeach Your choice, of course. I have yet to see any advantages in having IE6 in its not very standard compliant mode... http://www.gunlaug.no/contents/wd_additions_16.html ...so I'll keep it in quirks mode until there's not a single one left on earth to confront my designs :-) I'll even overload IE6 with min/max expressions until it chokes on them... http://www.gunlaug.no/contents/wd_additions_14.html ...just for the fun of it. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Perfect 3 column liquid layout (Matthew James Taylor) and Quirks Mode
First post here. Thanks for the great resource! I've been experimenting with the different 3-column layout methods and I think I like this version the best: http://matthewjamestaylor.com/blog/perfect-3-column.htm. However, it seems that the layout only works in IE6 if I send the browser into Quirks Mode by beginning the html/xhtml page with the following declaration: ?xml version=1.0 encoding=utf-8? If I delete this, the layout breaks apart in IE6. I'm wondering if anyone has had any luck with making this layout work after deleting the above declaration, thereby not using Quirks Mode? Any help would be greatly appreciated. Thanks! -Melbeach __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Perfect 3 column liquid layout (Matthew James Taylor) and Quirks Mode
Melbeach wrote:
I've been experimenting with the different 3-column layout methods and I think
I like this version the best:
http://matthewjamestaylor.com/blog/perfect-3-column.htm. However, it seems
that the layout only works in IE6 if I send the browser into Quirks Mode by
beginning the html/xhtml page with the following declaration:
?xml version=1.0 encoding=utf-8?
If I delete this, the layout breaks apart in IE6.
If you by breaks mean the border gets added to the viewport in IE6'
slightly more standard compliant mode, then adding...
html {border: none;}
...will fix that. It's as expected since body equals viewport in quirks
mode while html equals viewport in standard mode.
I can't provoke any other differences between the two modes in IE6 at my
end, so if there are any problematic ones then you'll have to tell me/us
where they are.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Perfect 3 column liquid layout (Matthew James Taylor) and Quirks Mode
Melbeach wrote: First post here. Thanks for the great resource! I've been experimenting with the different 3-column layout methods and I think I like this version the best: http://matthewjamestaylor.com/blog/perfect-3-column.htm. However, it seems that the layout only works in IE6 if I send the browser into Quirks Mode by beginning the html/xhtml page with the following declaration: ?xml version=1.0 encoding=utf-8? If I delete this, the layout breaks apart in IE6. I'm wondering if anyone has had any luck with making this layout work after deleting the above declaration, thereby not using Quirks Mode? Any help would be greatly appreciated. Thanks! -Melbeach His page works in IE/6 in standards mode or quirksmode. In either standards mode or quirksmode, at less than 800, you'll get horizontal crossover, as IE/6 does not support min-width. If you are using his layout /with your stuff in it,/ it may be your stuff that breaks his layout. -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Perfect 3 column liquid layout (Matthew James Taylor) and Quirks Mode
Thanks for the help. Please accept my humble apologies, I referenced the wrong
layout. It's actually this 2-column layout that seems to require Quirks mode:
http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-ems.htm. You
can save this page's source and open it in Notepad. Delete the top line: ?xml
version=1.0 encoding=utf-8?
When I do this, the right-column completely covers up the left-column.
Actually, the same thing will happen in Firefox if I convert this layout to an
html version and delete the declaration in question.
-Melbeach
- Original Message -
From: Gunlaug Sørtun [EMAIL PROTECTED]
To: Melbeach [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Sent: Wednesday, May 28, 2008 12:51 PM
Subject: Re: [css-d] Perfect 3 column liquid layout (Matthew James Taylor)
and Quirks Mode
Melbeach wrote:
I've been experimenting with the different 3-column layout methods and I
think
I like this version the best:
http://matthewjamestaylor.com/blog/perfect-3-column.htm. However, it seems
that the layout only works in IE6 if I send the browser into Quirks Mode
by
beginning the html/xhtml page with the following declaration:
?xml version=1.0 encoding=utf-8?
If I delete this, the layout breaks apart in IE6.
If you by breaks mean the border gets added to the viewport in IE6'
slightly more standard compliant mode, then adding...
html {border: none;}
...will fix that. It's as expected since body equals viewport in quirks
mode while html equals viewport in standard mode.
I can't provoke any other differences between the two modes in IE6 at my
end, so if there are any problematic ones then you'll have to tell me/us
where they are.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Perfect 3 column liquid layout (Matthew James Taylor) and Quirks Mode
Melbeach wrote:
http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-ems.htm.
You can save this page's source and open it in Notepad.
I prefer to save it complete in Opera and open it for modifications in
a full-blown web editor, but that's another matter.
Delete the top line: ?xml version=1.0 encoding=utf-8?
When I do this, the right-column completely covers up the
left-column. Actually, the same thing will happen in Firefox if I
convert this layout to an html version and delete the declaration in
question.
Change the conditional comment so it reads...
!--[if lt IE 6]
style media=screen type=text/css
.col1 {
width:100%;
}
/style
![endif]--
...or leave it out completely, and IE6 will do fine until the window is
made too narrow. That style is needed for quirks mode only, so keep it
(with modified version-targeting as seen above) if you want to support
older IE/win-versions.
You should also change the meta...
meta http-equiv=Content-Type content=application/xhtml+xml;
charset=utf-8 /
...so it reads...
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
...as what's there now makes no sense.
IE/win (any version) doesn't support application/xhtml+xml anyway, and
all browsers ignore that meta and look at what the page is served as -
text/html.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
