By: Adrian Senior
Page 1 of 4
Redefining The Body Tag
In this tutorial we will investigate how we can use dual style sheets to set our page margins to zero in the most common browsers we will come up against in today's online world. We will also look at some of the options that we can use within the body rule, we'll look at the background-color and the color properties. We will also take our CSS code and optimise it for performance and make it bandwidth friendly. Remember, lean code is efficient code!.
DON'T use the margin settings from the modify page properties menu.
This option is flawed in several areas. Let's take a quick look at why this is so. Create a blank page and set the margins to 0 using the page properties option from the modify menu. Then ftp the page to your server and visit the W3C validator.
Without adding anything to our page with the exception of the margin settings it has already failed validation! Another problem is the creation of ghost scrollbars in IE5+ PC that require the user to refresh to make the page render correctly.
Other issues also exist with this method, it does not take into account the various quirks of the different browsers. So to investigate the options we have we will have an in depth look at the body tag, our targets will be to zero the page margins and to set a background image and colour in a cross browser way. We will want to support a variety of browsers and we'll be testing in IE6, NN7, Mozilla, Opera6 and that beautiful browser known as NN4.
Z-index is a stacking order and the Gecko engine and IE have very different ideas about how that should effect the body tags position. It is worth knowing and may save you some head scratching time in the future. We'll look at that on page 4.
On with the show!
We already have our test page, remove the margin settings you added earlier and save the page.
Setting The Margins
We can write our margin settings in several ways, we'll look at long hand first and then look at how we can optimise the body rule by converting it to shorthand.
We could do this in Dreamweaver MX, however I would like to use notepad, SimpleText or similar at the moment. Using a text editor allows us to see the syntax and make alterations far quicker than we could in Dreamweaver MX. Dreamweaver MX is fine but we want to see the syntax, we want to learn and understand what is going on under the hood and the best way to achieve this is to manually write the code.
Open your text editor and type in the code below.
We have given our page a background color and set four margin properties, one for each side of the page and each has a value of 0px. As we discovered in our earlier lesson we need to set a forecolor that contrasts with the background color of the body rule. We attain this by setting a color value, in this instance I have used a value of #666666 as you can see.
Save your your file as mybodystyles.css, don't forget the .css extension! With your page open in Dreamweaver MX we can use the shortcut "Shift + F11" and by clicking the attach style sheet icon as shown below we can link our CSS file into our page.
This will open the "Link external Style Sheet" dialogue box, from that select the link radio button and browse to your CSS file. With that done click OK and Dreamweaver MX will link your CSS file to your page.
Your page should instantly then take on the background-color value that we defined for the body rule, a beige color.
OK, we know the body rules background-color works because we can see that our page has immediately taken on the given value. We don't know if the margin settings are working though, to see if they are correct we need to put something on the page.
Use the shortcut " ctrl + alt + t" (or command + alt + t for the Mac) to bring up the insert table dialogue box, as shown below. We'll adopt the settings I have inserted, when you have completed the dialogue box click OK to insert the table.
With our table inserted into our page we can select it by clicking inside the table and then selecting the table tag from Dreamweaver MX's quick tag selector in the bottom left corner, as shown below.
As you can see from the image above the <table> tag turns bold when selected. Move to the Property Inspector and click on the "bg color" cube, I have given my table a bg color of #FFCCCC.
You should now be able to see your table clearly in design view. It should be situated at the top of the page and no margins should be visible to the top, left or right of the table.
Save your work.
At this point I should mention the following:
Browsers react differently when scrollbars are not required.
IE6: Provides ghost scrollbars
Opera 6 and Netscape 4: Reserve a space for the scrollbar but do not allow body content to enter the scrollbar area. Background properties though are allowed to invade the scrollbar area.
Netscape 7 and Mozilla: These browsers only show a scrollbar when content on the page dictates one is required, therefore the body content is allowed to use 100% of the browsers view port when a scrollbar is not required.
It is possible therefore that you can have your margins set to 0 correctly without the content reaching the right hand edge of the view port. To ensure that you have your margins set correctly you can add filler text to force the scrollbars appearance.
In the next section we will look at how the various browsers we have selected to test with handle our CSS, time to move on!