web site design


site developers resources and marketing and promotion references

  Home |  Marketing  |  Promotion  |  SEO  |  Site Development  

Basic and Advanced Html

The Magic Border or Left Hand Margin with Table Tips

The Secret

While I was in recovery from my bout with status bar scrollerosis I decided IWB needed a face lift. At the end of the last tutorial I showed you some of the changes I started to make. I will now tell you about the rest of the improvements I made. After I became a little more proficient at HTML I decided to try something that I had seen over and over on the net. The MAGIC BORDER is the topic of this tutorial.

When I decide to try something I always go and look at the source of a page that is similar to what I want to do. The first time I looked at a page with the Magic border I thought it was just a good use of tables to design a page. I had been working with a simple table on IWBs' first site and figured no problem I'll just pop in a few images to stabilize the table and we're all done. I go like crazy and she's all done!! I set it up on my ISPs' server and load the site in my browser of choice. "What the #$$%%%^ is this white border!!!" So, I go back and look at the source of the other site again to see if I made an error. Aghhhh I see two backgrounds, that must be the trick! Close, but no cigar as they say! I screwed around with it for a week until I got the idea to take the site apart piece by piece. I didn't have to go far, once I opened the background image it was all crystal clear!!!!

Aaah, yes my friends it is indeed mystical when you lack the knowledge to know, why, when you do every thing by the book it still doesn't work. Quite simply browser offset was the problem!! You can get a detailed explanation of browser offset from this article. If you decide to browse there a word of caution the author uses some rather unstable means of designing pages. Put simply the guy does not care what the page looks like if you're not using Netscape!!! More about "hacking" and browser specific tags and why they should be avoided at a later date. For now my friends I am about to de-mystify the MAGIC BORDER. It's no big secret, it's all in the background image!!

The Image

The image didn't look anything like what I thought it would! There was a wide white strip attached to it!! It finally all made sense!!!!!! IT"S ALL IN THE IMAGE!! I had de-mystified another one of my Internet mystery's. I made the image by attaching a white strip to the image. I look at it, seems fine!! I call up a friend all excited and feeling quite full of myself for what I had just accomplished. I gave him the url and he looks at it and asks me "why is the border going down the page in another place as well?" After discussing this with him a while I found the reason, his monitor was larger and so the image starts tiling at the end of the image to make up for the extra width!!

Now that I have told you how I found the secret I'll describe how to put the rest of the puzzle together. I refer to it as a puzzle because building a puzzle is similar to how you build these pages. Each image and table has to interlock and stabilize the elements of the document for it to look the same in every browser. To start, the page has a minimum of two table cells. One for the border and one for the body or meat of the page.

First you make the image for the background. Something to note first. When you do the code for the body there are two backgrounds used so that when the netizen asks for the page they are not looking at the ugly grey background while the page loads. You can also use it for the background color of your body table. I mentioned earlier that when I discovered how this is done that the image had a white strip attached. This strip can be any color, so if you want the rest of the page to be a certain color you just change the color of the strip. The main thing to remember is that the image has to be at least 1280 pixels wide. I have seen them as wide as 1600 pixels however this is overkill, as near as I can figure. I have seen them at 640 pixels to make a second border down the right side as well.

The last piece of the puzzle, so to speak, is a transparent image in the border to stabilize or set the width. I used a % in the table element why not use one in the table data element as well? This is a favorite of the gentleman I mentioned earlier. It is a total hack and browser specific. Hacks such as these have no place in a well designed page!!! Not all browsers support this method! Unless you are designing for an intranet, where you know the browser being used you have to presume that you never know what browser will show up to browse your page. Well there you go, that's all I know about this. I used 1280 pixels because that was the widest image I could make in Paintshop. I also have not found a site that simulates different widths or monitor sizes. So, if you know of a page that does this simulation I would appreciate hearing from you!!

To Tutorial Index


Archives Home || Tutorials || HTML || Marketing || Awards ||
Search Engine Optimization || Site Developer || Web Site Promotion

Email Marketing || Site Sponsorship and Banner Advertising
Internet Scripting  || Newsletter Archives

 T's World Logo,  cover and awards graphics 
by and Copyright 1997-2009  Markus Gemstad 
Copyright 1997-2003 
International Website Builders all rights reserved.
Yet Another  TVEntrprises Production!!