Web Hosting, Free Web Site Builder & Domain Name, Web Hosting Made Easy By Brinkster

CSS and the Box Model

Added By: hiflyer

Rated:

(4 of 5) by 16.

Rate Snippet: 12345

Description:

The bane of many people's lives when trying to use CSS to create divs (layers) is that the different browsers function differently for the same code (JavaScript and the DOM as a comparison, anyone? ^_^ ) The purpose of this snippet is to show you how you can make your divs look the same in amlost any browser, certainly the big 3 (IE5.5+, NN6+/Mozilla and Opera).

Language: CSS

Save to web space
E-mail Link

Code Snippet:

Let's define a div element in CSS ...

#divname {
	color: #800000;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 12px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	text-decoration: none;
	text-align: left;
	position: relative;
	width: 200px;
	height: 200px;
	border: 1px 1px 1px 1px; //top-right-bottom-left
	padding: 3px 5px 3px 5px; //top-right-bottom-left
	margin: 10px 10px 10px 10px; //top-right-bottom-left
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 168px;
	width: 172px;
}
	html>body #divname {
	width: 168px;
	width: 172px;
}

... Now let's break this down and see what is happening ...

Everything before the "voice-family" lines will be understood by IE5.5 - it will create 
a layer of 200 pixels wide by 200 pixels high. The margin, border and padding of the layer
will all be calculated as being INSIDE the layer dimensions.

The lines immediately after the "voice-family" lines will be understood by IE6 (if a valid 
doctype is declared, otherwise IE6 will work as though it was IE5.5) - this means that the 
layer will be calculated as the content width PLUS padding PLUS border PLUS margin to give 
the total widths and heights of 200 pixels. This is how the CSS standards define that layers 
should be calculated - start with your content and work outwards from there.

The lines after the "html>body #divname" line ensure that the same definitions are 
understood by Opera.

Any class definitions which are NOT changed after the "voice-family" and 
"html>body #divname" lines are applied as stated - in other words, in this example the font 
and color definitions will apply to all browsers.

I hope this helps to explain the Box Model a little. For more info see ... 
http://www.brainjar.com/css/positioning/