Box model Question

[gokeeffe]

Hi,

Is this the best hack to use for the box model, I want to use this code to have small boxes on the left and right side of my page to hold individual pieces of info. If this isn't the best way to do this can someone advice me on the best way to achieve a result that will be cross browser compatible

Tks

Graham
-------------------------- Code -----------------------

#content {
float: left;
padding: 10px;
margin: 20px;
background: #666;
border: 5px solid #ccc;
width: 400px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 370px;
}
html>body #content {
width: 370px; /* ie5win fudge ends */
}

 

[Foamcow]

Yes that is Tantek's Box Model hack.

Do you understand what the box model hack is?
Apologies if you do but jsut in case....

It isn't to allow you to place boxes side by side.
It makes allowances for the different ways in which browsers decide how wide an element it.

Internet Explorer (incorrectly) defines the width as including the padding, margins and borders whereas browsers such as Firefox define the width to be the inside of the box and any values for margins and borders are added on to it.

The hack uses the CSS "voice" to force IE to skip onto the next style rule as it doesn't understand it. Consequently anything placed after it will only be seen by browsers that recognise the directive and
continue to read that rule.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[Vragabond]

Of course, there's a question if this should still be employed. IE6 with a proper doctype uses correct box model. Also, I don't believe the second rule is necessary here, since it just defines the width again for the non-ie browsers.

 

[gokeeffe]

The effect I am trying to achieve is similar to the one on this page, the small boxes on the left and right side, is there a better way to achieve this type of result.

Is there a better way to achieve this with Firefox & IE having similar results.

TKs

Graham

 

[Foamcow]

My point was that the box model hack in itself is not a method for putting boxes side by side.

To do that you need to float the elements.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[Vragabond]

Box model hack as FoamCow explained, has nothing to do with laying out things on the page but rather with catering to browsers' (that is IE) inability to render boxes according to standards. If you want to make boxes on the left hand side, use css. If that is what you're asking. If you want us to comment on your code for boxes based on one box, I hope you realize that is quite impossible.

 

[gokeeffe]

Ok I see what you mean.

My question is this really ,is the code I submitted above

suitable for creating css boxes ie. is this a generic code

that is used to create small boxes. I mean in this site and

similiar sites are small css boxes created in this way.

Tks

Graham

 

[Vragabond]

This is how I create a small box in CSS:

<div style="width: 80px; height: 80px; background: red;></div>

Move the style information to a separate stylesheet and make a class for it. And you have a small 80x80 red box. I suggest you read up on css.

 

[gokeeffe]

Tks Vragabond this is exactly what I am looking for.

Didn't know you could do div style