I don't know how many times I've come across someones page and they have writing overlapping
their bordered background. They've set up the background to view properly with their monitor resolution. Then someone else views it using a different
resolution and everything's overlapping. I came across some information about how to make it work with all browser sizes and it's great~!. It's fast, it's easy and it works~!!!.
And yes, I finally got this right. I had been using another method for bordered backgrounds that I thought was correct
in all resolutions and browsers. Unfortunately I had wrong information and passed it on here. But now I've found correct information and I am relieved that it DOES
work in all resolutions and browsers (yes... including the 'dreaded' Netscape...LOL). Thanks to my sister Arlene for passing on this info that she found here.
The answer is to use a two-celled table. In the first cell you put a small transparent gif which you set the width equal or slightly wider then the border and the height = 1. The rest
of your page goes in the other cell. Then you put a closing table. And this is how you do that...
Right after your body tag put the following lines:
<table>
<tr><td valign="left" align="top"><img src="images/invisible.gif" height="1" width="150"></td>
<td valign="left" align="top" width="100%">
In the WIDTH section you specify the width of your border (or slightly larger) in the bordered background. Then
you write the rest of your page as usual. Also you might have to change the img src if your images are not in an images folder.
When you are finished, right before </body> tag you
put this line to close the table:
</td></tr></table>
That's it. Now your text will be indented to the right by the proper amount, regardless of the
browser size. The bordered background on this page looks best with the width set at 150 but for different
bordered backgrounds you might have to fool around with this number. Just try different numbers until you
get the look you want.
Don't have an invisible gif? Get one HERE.
(Right click on 'HERE' and save target as ... ...in Netscape save link as...)
|