[Simon Mundy]

Just a quick heads-up for anyone who likes the idea of consistent CSS output for XHTML pages on IE5+, Mozilla, etc...

Nearly everyone would have heard of Tantek's box model hack (and if you haven't, read about it at http://www.tantek.com/CSS/Examples/boxmodelhack.html )

The only problem with this technique is that it adds what I believe to be unnecessary complications to your CSS file, as you need to add ugly curly-brace comments, then add ANOTHER declaration to reset the hack. It can get really messy if you have multiple rules that you want to work with.

I found another interesting comment hack at http://www.info.com.ph/~etan/w3panth...mmentbugs.html where Edwardson Tan made a study of the different kinds of comment bugs and how they affected different browsers.

To cut a long story short (hey, I've got some REAL work to do - here's a simplified way of applying the hack:-

#box
{
padding: 10px;
border: 2px;
width: 300px;
width/**/: /**/276px;
}

The first 'comment' before the colon escapes that attribute from IE5 for Windows. The second one escapes it from IE5.5 for Windows. IE6 and all compliant (read normal!) browsers correctly interpret the box model if valid XHTML is being used, so they will read the correct value of 276px.

And all is well with the world... Please let me know if you find anything wrong with this.

CAVEAT: Do not open your CSS file with GoLive if you use this kind of hack. GoLive will completely strip out your 'escaped' values and trash all your hard work, like the good little Adobe product it is... Haven't tested this with Dreamweaver or any other WYSIWYG editor.

P.S. We should really start some more 'TIPS' series stickies to answer some common questions. What do you reckon Millenium?

[Chris O'Brien]

Didn't Tantek already post something similar? If you use

Code:
"\"}\""

to prematurely close a style rule in IE and have the IE value before this and the actual value after it.
For example

Code:
 body {
   width: 150px;
   voice-family: "\"}\"";
   voice-family: inherit;
   width: 128px;
 }

where voice-family is used arbitrarily to put in this CSS hack, and the real width value you want is after it...

I don't know which is a better way - I've seen and used both....

[philzilla]

Originally posted by Black Book:
Didn't Tantek already post something similar?

that'll be the Tantek link in his original post then?

[Simon Mundy]

Originally posted by Black Book:
Didn't Tantek already post something similar? If you use....

Indeed, but his hack makes use of the 'voice' attribute (which may or may not stay free of conflict). and also requires 3 seperate instances of a property to be declared:- 1 for the IE5.x series browsers, 1 for 'compliant' browsers, and 1 for good measure to 'be nice to Opera'.

The method I've used above reduces that to two, does not require use of an arbritary element and is much easier to maintain (IMHO).

[Chris O'Brien]

Note to self: read the fscking post you are replying to

[philzilla]

Originally posted by Black Book:
Note to self: read the fscking post you are replying to

i've never let it stop me!

[philzilla]

Originally posted by Simon Mundy:
P.S. We should really start some more 'TIPS' series stickies to answer some common questions. What do you reckon Millenium?

i'm down with that. i've suggested it a few times myself. here is one of the first things that should go in there.

[philzilla]

Eric Meyer, about the Box Model Hack