Neverside

An alternative to the Box Model Hack...

The box model hack can get quite annoying when you have to apply it to EVERY div. Also it makes your code less organized. If you don't like using the BMH, use the mid pass filter instead. It hides an external style sheet from all browsers except IE5.x/Win, which is the browser that requires the hack. Look at http://tantek.com/CSS/Examples/midpass.html for more details.

Here's an example

BMH

Code:

#cooldiv {
padding: 10px;
width: 300px;
voice-family: "\"}\"";
voice-family: inherit;
width: 280px;
} html>body #cooldiv {width: 280px;} /* be nice to Opera */

#awesomediv {
padding: 20px;
width: 400px;
voice-family: "\"}\"";
voice-family: inherit;
width: 360px;
} html>body #awesomediv {width: 360px;} /* be nice to Opera */

#sweetdiv {
padding: 30px;
width: 500px;
voice-family: "\"}\"";
voice-family: inherit;
width: 440px;
} html>body #sweetdiv {width: 440px;} /* be nice to Opera */

MPF

Code:

/* main CSS file */
@media tty {
i{content:"\";/*" "*/}} @import 'midpassbefore.css'; /*";} /* leaving this file null */
}/* */

#cooldiv {
padding: 10px;
width: 280px;
}

#awesomediv {
padding: 20px;
width: 360px;
}

#sweetdiv {
padding: 30px;
width: 440px;
}

@media tty {
i{content:"\";/*" "*/}} @import 'midpassafter.css'; /*";}
}/* */

/* midpassafter.css */
#cooldiv {width: 300px;}
#awesomediv {width: 400px;}
#sweetdiv {width: 500px;}

It's personal preference. I like the MPF because it seperates hacks from regular code. It also takes less typing.

Last edited by Rad, December 30th, 2003 08:25 AM (Edited 1 times)

Tantek is a very smart guy, and I like the Mid Pass Filter quite a bit. However, I personally use a simplified version of the Box Model Hack, which I think also has quite a bit of merit (thanks go to Anne Van Kesteren for originally pointing this out to me).

For people who are unaware, the Box Model Hack operates as such:

Code:

div#foo {
border: 20px solid #000;
padding: 30px;
width: 400px; /* width for IE5.x */
voice-family: "\"}\"";
voice-family: inherit;
width: 300px; /* width for standard-compliant browsers, including IE6, but NOT Opera */
}

body>div.content { /* make sure there are NO spaces in this selector */
width: 300px; /* width for standard-compliant browsers, including Opera, but NOT IE6 */
}

If you notice, there's some overlap---two methods are used to send standards-compliant browsers the proper width, because each one ignores Opera and IE6 respectively.

However, by inserting an XML prologue in your document before the DOCTYPE, as such:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>

IE6 is sent into Quirks mode and uses the same faulty box model as IE 5.x. Therefore, the Box Model Hack can be shortened to:

Code:

div#foo {
border: 20px solid #000;
padding: 30px;
width: 400px; /* width for IE5.x and IE6*/
}

body>div.content { /* make sure there are NO spaces in this selector */
width: 300px; /* width for standards-compliant browsers */
}

Cool. I still prefer the mid pass filter because it seperates the hacks from the normal code.

Let's be specific here - that extra part of the hack is for Opera5 not just for Opera in general.. Opera users tend to be good with upgrading there junk so I personally don't even add that part of the BMH.

___________________

irc.efnet.net #neverside
Neverside merchandise!

True, but does having the exact version number really matter?

Quote:

Cool. I still prefer the mid pass filter because it seperates the hacks from the normal code.

I definitely like the Mid Pass Filter, but I find it personally easier to use the modified Box Model Hack. Maybe it's just because I'm used to using it---it seems like second nature to me now.

It is probably better to use the Mid Pass Filter, though, as doing so seperates hacks from valid CSS.

Quote:

Let's be specific here - that extra part of the hack is for Opera5 not just for Opera in general.. Opera users tend to be good with upgrading there junk so I personally don't even add that part of the BMH.

You're right: in general, people computer savy enough to download alternate browsers are good about upgrading. Still, it's just a few extra lines---well worth the minimal amount of effort, I think, if you're using the traditional Box Model Hack.