#messageForm textarea {background: #33CCFF;}

[halloweb]

#messageForm textarea {background: #33CCFF;}

OR

.someClassName #messageForm textarea {background: #33CCFF;}

second question:

if i give the textarea a width do i need a tantek hack for ie5 mac e.g.

[halloweb]

when i want to use for the textarea a border of 1px and a width let's say 250 px

how would that tantek hack looklike

[DrDoc]

I think it best to point you to the source: [tantek.com...]

There Tantek himself explains how the box model works. Also, you should try a site search [WebmasterWorld.com] for "box model" ;) The box model has been discussed at great lengths, and there are numerous threads on the topic.

[halloweb]

i know this page allready
but not too many examples are displayed there
i just need a more thorough explanation

[createErrorMsg]

I'm not sure what the first question was, but here's a brief boxmodel explanation to answer the second...

First, the only time you have to worry about the IE box model is when you're dealing with box elements that must (a) be of a specific width in order to maintain a consistent layout and (b) have both a width AND another horizontal property measurement, those being margin, padding and/or border. A box with a width but no margins, padding and/or borders (or only top/bottom values for these properties) does not need to be hacked.

Here's why: compliant browsers measure out the width of a box by (a) giving the box its width, then (b) ADDING margins, paddings and borders to the outside of the box's width. This means that a 200px box with 10px left and right margins becomes 220px when all is said and done. IE incorrectly does things in a slightly different manner. It creates a box at the specified width, then packs all the margins, paddings and borders INSIDE of that original width. Meaning a 200px wide box with 10px left and right margins is 200px wide when all is said and done, with the content taking up just 180px of it.

The result is a dramatically different look between, say, Firefox and IE5.x. To get them looking the same, you must give IE a beginning width value equal to the FINAL width rendered by Firefox.

To do this, you give the width value on the box the compliant number (200px here). Then you must somehow tell IE5.x to use that final number instead (220px in this example).

One way to do that is with the Tantek hack, but it's a rather difficult one to remember and get those backslash-doublequote-backslash-parenthesis strings wrong and it won't work.

An easier solution is to use the Star Hack. Simply follow the original rule declaration with this...

* html #YOURSELECTOR {
width: 220px; /*IE HACKED WIDTH*/
w\idth: 200px; /*ORIGINAL COMPLIANT WIDTH*/
}

The * html part feeds the following properties only to IE browsers. So they get width: 220px. The second with with the escape backslash feeds the original value back to IE6 in Standards mode, which, glory-be, actually uses the right box model.

Lastly, you mentioned hacking for IE5Mac. Unless I am grossly mistaken, IE5Mac uses the correct box model and does not need to be hacked for for this particular problem. SOmeone please correct me if I'm wrong. :)