Forum Moderators: not2easy
/* for Internet Explorer */
/*\*/
* html .container {
height: xem;
}
/**/Understandably this does not work in IE 7, but then surely an item height would display similarly to Firefox, in IE7 that is.
IE 6 does not get the min-height so I've specified min-height: 100px; height:auto; for all browsers and then for IE I specified a specific height. (It's all about specificity, Suzy.)
Looks great in IE6, but the layout is still totally broken in IE7, which looks nothing like Firefox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
CSS
.item {width: 108px; min-height: 100px; height:auto; float: left; margin: 15px 5px 15px 0;}
.item .img { float: left; margin-right: 5px;}
.item .itemtitle {font-weight: bold; margin-bottom: 0px; padding-bottom: 0px; height: 32px;}
[code]HTML
[code]
<div class="item">
<div class="img"></div>
<div class="itemtitle"></div>
</div>
<div class="item">
<div class="img"></div>
<div class="itemtitle"></div>
</div>
<div class="item">
<div class="img"></div>
<div class="itemtitle"></div>
</div>
What is the correct way of setting height/min-height to divs so that it will work across the board? I used the word "Understandably" above, but a better word would probably be Realistically.
IE7 correctly renders height and min-height. You're telling IE7 to set an absolute height, no matter what. While IE6 will fluidly accept this 'absolute' height, IE7 will not.
/*\*/* html .container { * htmlheight: xem;
}
/**/So, you're successfully hiding this property value from IE5 for Mac. You're also hiding it from standards-compliant browsers, as it doesn't apply
* htmlBut IE7 in quirks mode still applies this rule.
What should you do instead?
Avoid using hacks like these - they have terrible repercussions, just like now. Instead, use conditional comments - they are a graceful way to 'hack'.
<!--[if lte IE 7]><link rel="stylesheet" ... /><![endif]--><!--[if IE 6]><link rel="stylesheet" ... /><![endif]-->Of course, keep these stylesheet links sequentially below your normal, standards-compliant stylesheet, and you're on your way.
[edited by: Setek at 1:57 am (utc) on Nov. 21, 2006]
But IE7 in quirks mode still applies this rule.
My bold, because I just want to emphasise that IE7 does not support parse hacks unless it is Quirks (backwards compatible) rendering mode and according to the DocType you gave, IE7 will also be in Quirks Modes (as opposed to Standards Compliant) in which case your IE7 is acting very much like IE6 and also takes on the IE5 box model and other little quirks from the past :(
IE6 wasn't perfect but it was a little better [msdn.microsoft.com] than 5.x. While it suited some to remain in quirks mode during IE6 because most of their problems were likely Box Model related and the benefits of 6 in complaint mode were negligible, I think the time has come to get those DocTypes sorted out. The problems between strict and quirks rendering modes will only compound if you keep trying to work with quirks, it's the same as fighting the machine now IMHO.
However, in difference to Seteks's view (choices ;)), I see no reason why you can't still use the parse hacks inside the conditional sheets - as long as they're then only for backwards compatibility.
You could for example use a conditional comment for versions less than 6 to sort out your Box Model differences and then see what's left, it will usually be layout errors and/or min-height/width issues both of which require the same workaround, you could then use only one extra stylesheet to target all versions using * html filters to filter out IE7 where required
You can also lose the Mac hiding part -
/*\*/ rules {..} /**/e.g. based on your CSS for the above sample, and a Strict Doctype - with a box model, bug trigger addition - in the main stylesheet you would cover what it should be.
.item {
width: 100px; /* 108px including padding */
padding: 0 4px; /* this will affect Box Model */
min-height: 100px; /* for compliant browsers */
/* height:auto; not required */
float: left;
margin: 15px 5px; /* left margin/float triggers Double Margin bug */
background: #cfc;
}.item .img {
float: left;
margin: 0 5px; /* left margin/float Double Margin Bug trigger */
}.item .itemtitle {
font-weight: bold;
height: 32px;
background: #eee;
}then in your IE sheets:
<!--[if lt IE 6]>
/* only affects IE/Win below version 6 */
.item {
width: 108px;
}
<![endif]--><!--[if IE]>
/* affects IE/Win all versions */* html .item {
height: 100px; /* min height <IE7 */
}* html .item, * html .item img {
display: inline; /* avoid double margin bug on floated elements in <IE7 (fixed in IE7) */
}/* IF you had a layout error to workaround for all IE's (e.g. an existing Holly Hack) you could do this */
* html .whatever {height: 1%;} /* layout for <IE7 */
.whatever {min-height: 1%;} /* layout for IE7 - note no * html filter */
<![endif]-->
So many ways, I'm not sure what's actually best - which way do others so it?
Suzy
[edited by: SuzyUK at 8:52 am (utc) on Nov. 21, 2006]
Next step for me is to get IE6 and IE7 [webmasterworld.com] running side by side, one of them standalone, so that I can see how they render the code differently.
I was hoping to stay away from conditional statement, but looks like it will always be necessary for IE.
Any more suggestions?
However, in difference to Seteks's view (choices ;)), I see no reason why you can't still use the parse hacks inside the conditional sheets - as long as they're then only for backwards compatibility.
That's true! I never really considered such a point: keeping the parse hacks inside a conditional stylesheet would work well :)
So many ways, I'm not sure what's actually best - which way do others so it?
If I had to account for IE mac and other versions of IE less than 6, I probably would do the same thing.
I was hoping to stay away from conditional statement, but looks like it will always be necessary for IE.
I try to stay away from conditional comment stylesheets in general, because I believe just because we can hack, doesn't mean we should - I try to find a solution that allows the same code to render as near the same on all the browsers my workplace supports.
However, if it gets to the stage where I do need some different code for IE7, and IE6, the best method is a conditional comment. It doesn't affect standards-compliant browsers, keeps your validation results clean and easy to spot issues, and you can single out versions of IE (within reason - I think conditional comments don't work with less-than IE5?)
