Re: [WSG] Voice family box model hack
Yeah but what does each of the following lines actually do? height: 100%; voice-family: \}\; voice-family: inherit; height: auto; Also, I am not clear on which browsers will end up using 100% height and which will not break but not use 100%. That MSDN article is quite interesting. Basically you can use those Conditional Comments to add specific code anywhere in your page for IE5, IE6, IE7 when it comes, and other browsers such as Firefox, Opera etc will just ignore it all because the code appears commented out to them. This in turn makes it easier to develop code specifically to fix IE problems. Why has that been such a well kept secret? Thanks, Stephen - Original Message - From: Thierry Koblentz [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Wednesday, April 27, 2005 4:00 PM Subject: Re: [WSG] Voice family box model hack Stevio wrote: Can someone explain how the following works? Hi Stephen, You may want to read this: http://tantek.com/CSS/Examples/boxmodelhack.html Then this: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp Unless I'm missing something, the latter is a simpler and - IMHO - cleaner solution to fix MSIE. -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.308 / Virus Database: 266.10.4 - Release Date: 27/04/2005 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Voice family box model hack
On Thu, 28 Apr 2005 09:43:59 +0100, Stevio [EMAIL PROTECTED] wrote: This in turn makes it easier to develop code specifically to fix IE problems. Why has that been such a well kept secret? I thought that was quite popular technique. IE has conditional comments for JScript as well and that's better kept secret: http://msdn.microsoft.com/library/en-us/script56/html/js56jsstmccon.asp /[EMAIL PROTECTED] @*/ /[EMAIL PROTECTED] (@_jscript_version 5.6) document.styleSheets[0].href=ie5.css; @end @*/ -- regards, Kornel Lesiski ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Voice family box model hack
Stevio wrote:
Yeah but what does each of the following lines actually do?
height: 100%;
voice-family: \}\;
voice-family: inherit;
height: auto;
Hi,
height: 100%;:
This line sets the height for all browsers with CSS support.
voice-family: \}\;
voice-family:inherit;
Due to a CSS parsing bug in IE 5.x Windows and IE 6.0 Windows in quirks
mode (QM) doesn't understand these lines and stops processing this rule
here. Anything that following these lines will not be applied by the
affected browsers. These lines do not serve any other purpose other than
causing IE/Win to choke and to stop processing the rule.
height: auto;
Because IE win stops processing at the 'voice-family' lines, it does not
apply this line, but UAs which support CSS 2 (and the box model) will
read this line normally.
Most often, this hack is used to work around IE 5.x's broken box model
where the first width property provides a value for IE and the second
width value is for browsers that correctly implement the box model.
If I have to use a box model hack (BMH), rather than a conditional
comment, I prefer the following [01]:
foo { /* Selector recognized by all browsers with CSS support. */
height: auto
}
* html foo { /* Selector recognized by IE only */
height: 100%; /* Value for IE5.x/Win and IE6.x/Win QM */
hei\ght: auto; /* Value for IE6/Win */
}
If I don't care about support for Netscape 4, which chokes on escapes
(\) and ignores any style sheet that contains them, or Opera 5, which
completely ignores the rule, I use the following [02]:
foo {
height: auto;
\height: 100%;
hei\ght: auto;
}
Also, I am not clear on which browsers will end up using 100% height and
which will not break but not use 100%.
Visit Dithered [03] for a list of hacks and an overview of which
browsers are affected.
That MSDN article is quite interesting. Basically you can use those
Conditional Comments to add specific code anywhere in your page for IE5,
IE6, IE7 when it comes, and other browsers such as Firefox, Opera etc will
just ignore it all because the code appears commented out to them.
Correct, but one point that some folks miss is that types of conditional
comments can only be used inside of your markup; you cannot use a CC
inside linked style sheets. These are very useful for calling external
style sheets and although I use IE hacks in my CSS while in development,
I tend to move those hacks to individual style sheets and link to them
via CCs when I go into production--it's easier to maintain and it's cleaner.
This in turn makes it easier to develop code specifically to fix IE
problems. Why has that been such a well kept secret?
Conditional comments are a pretty well know and documented technique, so
I wouldn't exactly say it's a well kept secret. The CSS-Discuss Wiki
[04] is also a good place to find additional information on this and
other techniques you may not be familiar with.
[01] http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html
[02] http://www.doxdesk.com/personal/posts/css/20020212-bmh.html
[03] http://www.dithered.com/css_filters/index.html
[04] http://css-discuss.incutio.com/?page=FrontPage
--
Best regards,
Michael Wilson
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Voice family box model hack
Michael Wilson wrote:
If I have to use a box model hack (BMH), rather than a conditional
comment, I prefer the following [01]:
* html foo { /* Selector recognized by IE only */
height: 100%; /* Value for IE5.x/Win and IE6.x/Win QM */
hei\ght: auto; /* Value for IE6/Win */
}
I believe it is worth mentionning that IE5 Mac would also apply that second
declaration.
Conditional comments are a pretty well know and documented technique,
You may find this useful:
http://www.positioniseverything.net/articles/multiIE.html
Thierry | http://www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Voice family box model hack
Thierry Koblentz wrote:
Michael Wilson wrote:
If I have to use a box model hack (BMH), rather than a conditional
comment, I prefer the following [01]:
* html foo { /* Selector recognized by IE only */
height: 100%; /* Value for IE5.x/Win and IE6.x/Win QM */
hei\ght: auto; /* Value for IE6/Win */
}
I believe it is worth mentionning that IE5 Mac would also apply that second
declaration.
Hi,
Sorry about that Thierry; I was trying to keep things simple. In fact,
most modern browsers, or at least the ones that properly handle escapes,
will apply it.
http://www.dithered.com/css_filters/css_only/simplified_box_model.html
If for some reason you need to hide this rule from IE5 Mac, you could use
foo {
height: auto
}
/* Hide from IE-mac \*/
* html foo {
height: 100%;
hei\ght: auto;
}
/* End hide from IE-mac */
or if you just need to hide the escaped declaration...
foo {
height: auto
}
* html foo {
height: 100%;
}
/* Hide from IE-mac \*/
* html foo {
hei\ght: auto;
}
/* End hide from IE-mac */
I think... :)
--
Best regards,
Michael Wilson
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Voice family box model hack
Can someone explain how the following works?
#container {
position: relative;
min-height: 100%;
height: 100%;
voice-family: \}\;
voice-family: inherit;
height: auto;
}
htmlbody #container {
height: auto;
}
Which browsers do and do not use the height 100% and height auto values?
This is from:
http://www.alistapart.com/articles/footers
Thanks,
Stephen
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.10.3 - Release Date: 25/04/2005
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Voice family box model hack
On Wed, 27 Apr 2005 15:30:59 +0100, Stevio [EMAIL PROTECTED] wrote: Can someone explain how the following works? Put subject of your email in Google search box and hit I'm feeling lucky. -- regards, Kornel Lesiski ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Voice family box model hack
Stevio wrote: Can someone explain how the following works? Hi Stephen, You may want to read this: http://tantek.com/CSS/Examples/boxmodelhack.html Then this: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp Unless I'm missing something, the latter is a simpler and - IMHO - cleaner solution to fix MSIE. HTH, Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
