IE6 bug when using property "max-width"

By uac_mickset on 11 Oct 2006 at 15:42 UTC

In IE6 don't work property max-width when I use xhtml1-strict doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.

If I remove this doctype - in IE6 property max-width work.

How to fix this bug without changes doctype?

Source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language ?>" xml:lang="<?php print $language ?>">

<style>
p {
border:1px solid red;
max-width:800px;
width:expression(document.body.clientWidth > 800? "800px": "auto" );
}
</style>
<body>
<p>afdddshhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhsdfffffffffffffffff ffffffffffhhhhhhhhhhhhhhhhhhhhhhhhsdfhsd fsssssssssssssssssssssssssssssssssssssssss sssssssssshhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhsddddddfffffffffffffffffffffffffffhhh</p>
</body>
</html>

Comments

ie6 does not support max-width

isaac77 commented 11 October 2006 at 16:57

I'm not sure, but I do not think that Explorer 6 supports max-width. I do know for certain that it does NOT support min-width. In fact, it treats "width" as if it were "min-width".
For workaround example, see:
http://www.mezzoblue.com/archives/2004/02/25/sidestepping/

By removing the doctype declaration, you might be putting IE into "quirks mode" instead of "standards mode." This affects how Explorer interprets your CSS.

Sorry I can't provide more specific help.

IE6 support this property.

uac_mickset commented 11 October 2006 at 17:18

IE6 support this property. Read this article - http://www.svendtofte.com/code/max_width_in_ie/

In this article example was work, but in XHTML Strict Doctype it doesn't work :(

So time for yet another IE workaround?

isaac77 commented 11 October 2006 at 20:03

I think saying that IE6 "supports" the max-width property is a bit too charitable. But that's an interesting hack; thanks for providing the link!

Sorry can't help; good luck finding a workaround. Could you send some code only to IE6 (using conditional comments) that would set a different doctype, or tell it to render in "quirks mode," or import some extra css?

may be this is solution

uac_mickset commented 12 October 2006 at 11:20

I think saying that IE6 "supports" the max-width property is a bit too charitable.

sure, you're right ;)

I think, I've found solution for this problem, just read this article (and see an examples - it's work) - http://www.gunlaug.no/contents/wd_additions_14.html

another hack required by IE

isaac77 commented 12 October 2006 at 14:56

Cool... thanks for posting that and GOOD LUCK! IE has caused me more headaches than I care to remember. Glad that it seems this issue will be solvable.

may as well chime in...

Jeff Burnz commented 12 October 2006 at 23:57

heres my some of my hacks css for IE from a recent site... not drupal but still relevant.

* html body {font-size: x-small;f\ont-size: small}
#rapper {width:expression(document.body.clientWidth > 960? "960px": "auto" );}
#menu-rapper {display:inline;width:expression(document.body.clientWidth > 200? "200px": "auto" );}
/*hide from ie-mac\*/ 
*html #page_item li {height:1px} 
/* end hack */ 
/* \*/ 
*html #page_item li a { height:1px} 
/*  */ 
/*hide from ie-mac\*/ 
*html #mainmenu li {height:1px} 
/* end hack */
/* \*/ 
*html #mainmenu li a {height:1px} 
/*  */
.topbox .i3 {height:expression(this.scrollHeight < 60? "60px" : "auto" );}
.i3 {height:expression(this.scrollHeight < 82? "82px" : "auto" );}

bla bla bla...

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.