Putting Graphics Inside "Frames"

I have had SO many e-mails from wonderful visitors that have downloaded my graphics, placed them on their page, then realized the "frame" they viewed on my page did not show up on their page! The frame surrounding graphics is an HTML trick, not "part" of the graphic. I am going to explain how to do it by using the enchantress.net logo, with the filename ebsmall.gif, and an actual height and width of 40 and 149, respectively.

About the Color of the Table "Border" - the part that looks like the Frame

I hope you all appreciate the fact that nothing looks the same on every computer. I am concentrating this discussion on the Netscape and Internet Explorer's versions 4.0 and higher, as that is what I have avaliable to me, and can't "back up" to cover every browser type and version in existence. If you are using Netscape, the table "border" will default to a nice little frame that uses the background color of your page. If you are using Internet Explorer, the table "border" will default to white/gray. If you want to control the color of the table border, you can do so, but you have to do it two different ways for it to look the same in both browsers.

The "bordercolor="#whatever" command takes care of Netscape. In Netscape, you use this command, and the border will show the color number you've used in the bottom and right side, and a lighter version of the same color for the left and top side. Unfortunately, this command only yields a flat, one-color box in Internet Explorer.

The "bordercolorlight="#whatever" and the "bordercolordark="#whatever" takes care of Internet Explorer. Unfortunately, this is another hoop to jump through to get a coordinated color scheme to your 3-D looking border, BUT, it works. Also unfortunately, those two commands mean absolutely NOTHING to Netscape.

In order to get the color you want and have it available to viewers on BOTH browsers, then, you will need to use all three commands in your initial <table> command; for your convenience, I have done just that in the final preview below. Since I have NOT used the commands in the first two examples, you will see the table using my default background color of "#333A57" if you are viewing in Netscape, and you will see the silverish white/gray borders if you are viewing in Internet Explorer.

The HTML For the Tables

NOTE: The italicized text below is for instructional use only and is not to be included in your HTML source. Text to copy and paste is boldfaced.

Place the following code on your page where you wish the "enchantress.net" logo to appear. Copy below by highlighting, then use your browser's "copy" function. Use your HTML editor to paste into your document------------------>

<p><center><table border=3><tr><td><a href="http://www.enchantress.net/">
<img src="ebsmall.gif" height=40 width=149 border=0></a></td></tr></table></center><p>

Here is an example of a wider border set in the table command; this time, we'll set it to 10. The HTML code will look like this:

<p><center><table border=10><tr><td><a href="http://www.enchantress.net/">
<img src="ebsmall.gif" height=40 width=149 border=0></a></td></tr></table></center><p>

And finally, my favorite trick, the "double border" created by using a table within a table, with graduated border sizes (by the way, you can make these as deep as you please - triple, quadruple, etc...):

<p><center><table border=12 bordercolor="#BD8763" bordercolorlight="#E6CDBC" bordercolordark="#BD8763">
<tr><td><table border=8 bordercolor="#333A57" bordercolorlight="#B5BCD5" bordercolordark="#333A57">
<tr><td><a href="http://www.enchantress.net/">
<img src="ebsmall.gif" height=40 width=149 border=0></a></td></tr></table></td></tr></table></center><p>

One last important note: The "border=0" statement included in the <img src> statement is the command that gets rid of the nasty little blue box that surrounds graphics linked to another page or an e-mail... I suggest you use it frequently - nobody really needs the blue box - I think we all know pretty much if you see a button with "e-mail" or "next" on it, you're supposed to click on it to get there!