Forum Moderators: not2easy
#container div#weather {
width: 100;
width: 200;
voice-family: "\"}\"";
voice-family:inherit;
}
html>body #container div#weather {
width: 200;
}
Although I don't have a complete knowledge of how they work, I thought I at least had their behaviours down to the point that I could use them properly.
My problem is that in trying to use this same method today, (FF vs. IE6-PC) changing any of the previously mentioned values changes nothing other than width #3, which changes both IE and FF.
Has anyone run into anything similar? or am I taking a completely wrong approach in employing this hack?
Thanks for any insight.
Patrick
incidentally my pet peeve. I cannot stand to see the voice family hack anywhere anymore (ingenious as it was at the time)
yet :) hehe
I can tell you how to fix this one if you like or I can suggest an simpler hack.. btw what Doctype are you using?
Suzy
doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I'm sure it very well could be something else in my code causing the specific problem I am having.. however I am definitely finding that the hack(s) I used to use frequently about 8 months ago, are not quite as predictable anymore.
and yes, I would LOVE a simpler fix :)
In reading post #20 of 'to hack or not to hack', I think the [display:inline;] is just what I need.
however... any other advice, or comments on why i was wrong with my first post, is more than welcome!
so only IE5.x/Win needs the smaller widths, and with that Doctype it should do want you want.
First off, and not just applicable to the hack is that all units must have a unit of measurement attached (except 0 which is always 0) so add some px to those widths.
Then move the second width to after the parse error/hack
div#weather {
background: #dad;
width: 100px; /* line 1 */
voice-family: "\"}\""; /* line 2 */
voice-family:inherit; /* line 3 */
width: 200px; /* line 4 */
}
html>body div#weather {
width: 200px; /* line 5 */
}
/* line 1 */ = this is the width you want IE5.x to get
/* line 2 */ = this rule contains the parse error "\"}\"" and is where IE5.x chokes and stops reading the rest of the rules
/* line 3 */ = this rule is a no-rule as some browsers used to ignore the rule that immediately followed the parse error therefore it was something that meant nothing! just something that it was safe for affected browsers to ignore
/* line 4 */ = this is read by all browsers except IE5.x/Win, and also except for Opera5/6 I think
/* line 5 */ = this rule then was a just way to back up the correct width for compliant browsers, it should be the same width as is in line 4. IE6 still doesn't read this because of the child selector but it safely gets it from /* line 4 */. This was often called the be nice to opera rule (which was Opera 5) because Opera had problems with the Parse error too and needed a second way of getting the correct width
----------------------------------------
Another choice deemed simpler?
div#weather {
background: #dad
width: 200px;
}
* html div#weather {
width: 100px; /* line 1 */
w\idth: 200px; /* line 2 */
}
the star html hack targets IE all versions only so the second rule is only being read by IE, now we just have to seperate out IE6 and IE/Mac
/* Line 1 */ is read by all IE versions.
/* Line 2 */ is hidden from IE5.x/Win because of the character escape. IE5/Mac and IE6/Win which implement the CSS box model correctly, and can read the second rule get their proper width back again!
-------
and finally I'm gonna come back to those conditional comments again!
<style type="text/css">
div#weather {width: 200px;}
</style>
<!--[if lt IE 6]>
<style type="text/css">
div#weather {width: 100px;}
</style>
<![endif]-->
a conditional comment is only read by IE/Win and the line "if lt IE 6" literally translates as : if it's an IE/win browser less than version 6 :: apply the following code
hope that helps..
Suzy
[speeling!]
[edited by: SuzyUK at 6:47 pm (utc) on Aug. 29, 2005]
I think the [display:inline;] is just what I need.
You mean to tell me that this hack is not for Quirky IE Box Model issues? LOL
just goes to show I shouldn't presume either!
If you've got problems with margins on a float then yes, simply adding display: inline; is a much simpler way to get around it!
The hack wouldn't work for this anyway as IE6 suffers from the double margin too!
Suzy
This is still a post I will be printing off!
many thanks
