DHTML Lab 5:
CSS Box Properties
Border and Margin Properties and fixing the Netscape problem


So far in these DHTML learning Labs, everything we have done has been Cross Browser meaning that the code works on both Netscape and Internet Explorer. But when we start using the Border and Margin Properties we will discover that Netscape's implementation of these properties has a bug. Their is an easy FIX for this Netscape bug which we will implement.

If you don't have a copy of Netscape go download a copy of NetScape or if you don't have a copy of Internet Explorer for Windows (all other copies like for Macintosh are too shabby to worry about!) then download a copy of MSIE. This is necessary since I am going to ask you to try some things in Netscape and some things in Internet Explorer.

Borders and Margins

For this part you will need to try the following in BOTH Netscape and Internet Explorer to notice the differences and to see the need for the Netscape fix we will implement.

We can put a border around any block of text. This is especially handy when we want to make buttons with CSS (later we'll even see how to make CSS rollover buttons). Lets see how to add a border so that it looks like a button.
In HTML mode, Type the following code into the edit textarea below:
<head>
<style type="text/css">
<!--

#thebutton {position:absolute; color:white; top:30; left:40; border-color:black; border-style:solid; border-width:medium; background-color:blue;}
//-->
</style>
</head>
<body>

<div id=thebutton>

Blue background with black border
<br>
</div>

</body>



Make sure you try this in both Netscape and Internet Explorer today! Just in case, I'll show you what happens in each case below:

Here is what it looks like
in Internet Explorer:		Here is what it looks like
in Netscape:


You see the problem here? The netscape version has a white border between the blue background and the black border. This is an annoying bug in Netscape. To fix this bug, anytime you use stylesheets in Netscape include the following code after the closing body tag at the very bottom of your webpage:

<script langauge=javascript>
<!--
if (navigator.userAgent.indexOf("MSIE") == -1) {
for (x = 0; x < document.layers.length;x++){
if (document.ids[document.layers[x].id] && document.ids[document.layers[x].id].backgroundColor){
document.layers[x].bgColor = document.ids[document.layers[x].id].backgroundColor;
}
}
}
//-->
</script>


Here's what it does...it accesses the layer object belonging to the stylesheet (I know there's some code in there you don't understand, but you'll learn it in a future lesson) and changes it's background color. The reason we need this code is that in Netscape, the style only effects the contents of the div tag, not the div itself. So, the style isn't changing the background color of the div, but instead only the background color of the document object inside the div...which is only s big as its contents require. MSIE forces the document object to fill the size of the div.

Make sure and try this with Netscape today!

WARNING: It is important for you to notice that we used div instead of span here. If you use span in Internet Explorer, the example will look the same. BUT! if you use span in Netscape, the fix no longer works. BEWARE!!

Whew! I'm glad we got that out of the way. Now we can talk border and margin properties.

In the example above, we used border-color, border-style, and border-width. The properties border-style, and border-width can have several types of values. Here are they values they can have. Try them out!

border-style none (default)
solid
double
groove
ridge
inset
outset
border-widthmedium (default)
thin
thick
3em (*any number* 'em' is parent font size)
3px (*any number* 'px' is pixels)
3in (*any number* 'in' is inches)


Now suppose you want to make the box bigger by adding padding, or margins. Well there is a padding property and and margin property. First let's understand what an element's box is. Every element has a box it lives in, see the graphic below to see what the different parts of the box are:

box properties:


Let's add a padding property to our previous example:
In HTML mode, Type the following code into the edit textarea below:
<head>
<style type="text/css">
<!--

#thebutton {position:absolute; background-color:blue; color:white; top:30; left:40; border-color:black; border-style:solid; border-width:medium; padding:10 20 30 40;}
//-->
</style>
</head>
<body>

<div id=thebutton>

Blue background with black border
<br>
</div>

</body> <script langauge=javascript>
<!--
//fixing the Netscape problem if (navigator.userAgent.indexOf("MSIE") == -1) {
for (x = 0; x < document.layers.length;x++){
if (document.ids[document.layers[x].id] && document.ids[document.layers[x].id].backgroundColor){
document.layers[x].bgColor = document.ids[document.layers[x].id].backgroundColor;
}
}
}
//-->
</script>


Preview this example.

Notice that we put four numbers seperated by spaces. The four numbers are to give padding to the four different sides of the box. The first number is for the top, the second is for the right, the third number is for the bottom and the last number is for the left. In other words, it starts at the top and works around clockwise. When using the margin property, the syntax is exactly the same.

You can also control the WIDTH and HEIGHT of the stylesheet box.

Well, that's what you need to know about how to use the box properties. For a complete listing of the box properties with examples, take a look at our CSS reference. You can get there easiest by clicking on the reference menu on CodeRunner below and click on DHTML

See you at the next lesson!