Let's try hard coding the page margins on the example page. That is, we will use HTML on the page and CSS to set the page margins. First, let's set our style definitions.
p {background:gold}
BODY {margin-left:15%;margin-right:15%;}
Now let's set the page margins right in the document. The margin attributes go right into the BODY tag.
<body marginwidth=20
leftmargin=20 rightmargin=20>
What's going on here? Netscape uses the MARGINWIDTH attribute, which sets the margins for the right and left sides of page. Explorer uses the RIGHT/LEFTMARGIN attributes. These attributes allow for different margins left and right. Since each brower ignores the other's margin attributes, it is safe to use both in the BODY tag. It's a very simple - for once! - cross-browser compatibility workaround.
There's one problem. Both Netscape's and Explorer's margin attributes use only pixels. This means that we have the style definition above and the HTML code following at cross-purposes. We'll roll with this for now, since the earlier examples with CSS and margins used percentages.
Why use percentages at all? They are the preferred unit in page design since they allow the scale of whatever you're creating - a table, margins - colored divs - to increase or decrease with the user's screen resolutions.
We'll add the same table as we had before. This table will only be 30% of the page width and will aligned to the left. We'll place the table wrapped inside open and closed P tags with some text. Here's the code for it:
<table border="1" bgcolor="#FF0000"
width="30%" cellpadding="0"
cellspacing="0"
align="left">
<tr><td>hi, here's some important<br>
information for you</td></tr>
</table>
In the browsers we see:
| we see in NN4.7: | we see in IE5.0: |
|
|
| we see in NN6.0: | |
|
NN4.7 loses formatting information in the paragraph with the table and the paragraph after. NN6.0 is a mixed bag. IE5.0 performs just fine. NN4.7 is using the MARGINWIDTH attribute values in the last displayed paragraph.
I have found that centering the table and setting its width to 100% produces similar results to earlier examples in this section.
| resources | |
| Four Corners Effective Banners | This site is dedicated to the study of all things banner-like, including: banners, click-through ratios, banner advertising, banner link exchanging, etc. You'll learn how to improve your banners and increase your site traffic. |
| Free Site Tools | A webmaster's directory of free resources to help find about everything to build, maintain and promote your website. 1000+ Resources. |
| Free Webmaster Tools and Resources | Your center for absolutely free high quality webmaster resources and tools to manage your web site. All utilities, programs and sites are carefully selected. |
| EZSearches.com | Want access to free email, auctions, shopping bargains and more? Try EZSearches.com |
| Akron Computer Repair | A great computer repair company that does in-home visits or drop-off. |
| Cool Candle Shoppe | Candles Place is a great site that if you're looking to purchase some great wax sticks, I'd go here. |