demonhale — Mon, 25 Jul 2005 14:10:59 +0000

LOL, its not that im particular with nationailty, I just noticed that its a dot ph,
also that the address is from a prepaid dial-up internet provider...
Its just that I seldom see links from ol' phil...

JeevesBond — Mon, 25 Jul 2005 11:14:31 +0000

*shrug*
That's what came up in Google, if the person who wrote it knows what they're talking about (and they do) I'm not going to question where they're from

demonhale — Mon, 25 Jul 2005 01:50:34 +0000

hey that was extensive jeeves, i was wondering though, the first two links are from the philippines?

JeevesBond — Sun, 24 Jul 2005 19:35:59 +0000

Well first points are:
1. Have you got a full, valid DTD as the FIRST line of code on your pages?
2. As Megan said this is a hack, but only needs to be used where - in addition to the width - you need to specify a padding/border.

What the W3C Standards Say
(This isn't exactly what they say, but a more reader-friendly version of the specs )
The total width of a block-level element in normal flow (i.e. a div tag with display:block; ) is:

Left Margin + Left border + Left padding + <strong>Width</strong> + Right padding + Right border + Right margin

Note: This is the rendered width of the block, i.e. What you will actually see on screen. The 'Width' you supply does not include padding, border or margin.

What Microsoft Say (for IE5.x and IE6 quirks mode)
(Actually I ignore most things they say, this is just what I heard on the grapevine )

The total width of a block-level element in normal flow (i.e. a div tag with display:block; ) is:

              |--------------------------<strong>Equals Width</strong>---------------------------|
              |                                                                 |
Left Margin + Left border + Left padding + Content + Right padding + Right border + Right margin

In the Microsoft model padding and border are included in the width, so if you supplied a width of 200px, a border of 50px and a padding of 50px the width allocated to your content would only be 100px.

So to get everything working together you need one value for browsers using the W3C box model and another value for those using the Microsoft model, enter...

The Hack
What you've got there *sucks air through teeth like a plumber about to annouce something's going to be very expensive* is a modified SBMH (simplified box model hack). Without confusing you further, this exploits more bugs in IE to get it to behave with CSS, let's break it down:

1. The Star HTML Bug
HTML is the root of any (X)HTML document, so whilst:

* html { ---Declarations--- }

'
Is valid, it shouldn't match to any element, there isn't anything in the document tree higher than HTML. This is the case for Opera, Firefox and even NS4, they will ignore this selector, IE - and note this is any version up to IE6/Win - does match this successfully to the html element. So in the first part of the hack we've created a selector that specifically targets IE, any other browser will ignore any declarations within this selector.

2. A Note on DOCTYPES
Most current browsers have a quirks and a standards mode. In this instance we are interested in Internet Explorer: IE5.x will always use the Microsoft box model, whereas IE6 will use the W3C model if it's in standards mode.

The way to get a browser to work in standards mode is to include a full DOCTYPE on the first line of you code. If a browser finds this it knows you're adhering to standards and will use the W3C's box model.

This causes some problems if you're using XHTML 1.1 (or higher), but that's another story

Looking at the first line of code at CSS Zen Garden you'll see:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

'
This will make IE6 use the W3C box model when it's interpreting the CSS; the relevance of this will become clear shortly.

3. The Two Declarations
Two property declarations are now needed, one for IE5.x and one for IE6. This is because both IE5.x and IE6 will use the star html selector, but IE6 is using the W3C box model and IE5.x isn't; this is where the w\idth property becomes important.

width: 744px;

'
This is for IE5.x, all IE's (up to and including IE6) will read this but the next line overrides this property for IE6 only:

w\idth: 724px;

'
IE6 reads this and ignores the escape (backslash) character, as this property is exactly the same as the previous one, but comes later in the stylesheet, it implements the second one. This is the correct value according to the W3C box model (hopefully the relevance of the DOCTYPE is now clear, if the DOCTYPE wasn't present or not on the first line of code only one property declaration would be required).
IE5.x starts reading the property, gets to the escape character, says: "Eeek! What's that doing there?!" Then ignores the entire property, therefore favouring the first width of 744px, if the escape character wasn't present it would do exactly the same as IE6, but we don't want that as IE5.x is using the Microsoft box model.

4. Select Your Element(s)
The next part is to select the precise element you're going to apply the hack to, in the case it's an element with the name "container." So your completed selector looks like:

* html #container { ---declarations--- }

'
As said: Only IE will read this selector as other browsers will not match it to an element.

Further Reading/Acknowledgements
I gleaned most of what's said here from the following sites:
Modified SBMH: -
http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html
Star HTML Hack: -
http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html
W3C Box Model Specs: -
http://www.w3.org/TR/REC-CSS2/box.html

Hope this helps!!!

demonhale — Sun, 24 Jul 2005 01:41:37 +0000

well ive read that you dont even need to have a box model hack to display your page correctly in all browsers, same code for all, you just need to stick it in that every code is for layout and positioning in css, the mentality is different from table layout, as mentioned in the w3c school. Anyway, if you did it correctly for one, hack your way to the other... Sequence is definitely gonna be MOZ - - Opera - - Ie

Megan — Sat, 23 Jul 2005 13:43:28 +0000

w\idth is a box model hack. Do a google search for "box model hack" and you'll find out what I'm talking about. Baiscally, IE has an improper interpretation of how div widths with padding & borders should be displayed. There are a couple of ways to get around that and w\idth is one of them.