Get ready for BLACK FRIDAY shopping starting in

Forums

This topic is locked

Using Images for Table Borders

Posted 30 May 2005 19:00:02
1
has voted
30 May 2005 19:00:02 Michael Cooper posted:
I'm using a table 3x3 table with border images in the outer cells. The top image works well as a bg image and spans with the table as the window changes, but the left and right images won't display correctly. The following URL shows the table and the spaces created above and below the border images:

www.clayboy.biz/home.htm

Replies

Replied 31 May 2005 11:03:38
31 May 2005 11:03:38 Wayne Hultum replied:
Try this, I've just merged the left and right cells and added the image as a background. To be on the safe side I'd make a backup of the original before you try it.

<pre id=code><font face=courier size=2 id=code>&lt;table border="1" cellpadding="0" cellspacing="0" id="mainTable"&gt;
&lt;tr&gt;
&lt;td&gt;&lt;div align="right"&gt;&lt;img src="img/leftcurve.gif" width="30" height="30"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td background="img/top.gif" id="bordercontent"&gt;&nbsp;&lt;/td&gt;
&lt;td colspan="2" background="img/top.gif" id="bordercontent"&gt;&nbsp;&lt;/td&gt;
&lt;td&gt;&lt;div align="left"&gt;&lt;img src="img/rightcurve.gif" width="29" height="30"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td rowspan="5" width="30" background="img/left.gif"&gt;&lt;img src="img/left.gif" width="30" height="15"&gt;&lt;/td&gt;
&lt;td bgcolor="#336699"&gt;&lt;div align="left"&gt;&lt;img src="img/topnavleft.gif" width="20" height="60"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td colspan="2" bgcolor="#336699"&gt;&lt;div align="right"&gt;&lt;img src="img/topnavright.gif" width="132" height="60"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td rowspan="5" background="img/right.gif"&gt;&lt;img src="img/right.gif" width="30" height="15"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td background="img/leftnav.gif" id="buttonnavcontent"&gt;&nbsp;&lt;/td&gt;
&lt;td background="img/leftnav.gif" id="buttonnavcontent"&gt;&lt;div align="right"&gt;
&lt;table border="0" align="left" cellpadding="0" cellspacing="0"&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="home.htm" target="_top" onClick="MM_nbGroup('down','group1','Home','',1)" onMouseOver="MM_nbGroup('over','Home','img/homebuttonover.gif','',1)" onMouseOut="MM_nbGroup('out')"&gt;&lt;img src="img/homebutton.gif" alt="" name="Home" width="85" height="19" border="0" onload=""&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="kilns.htm" target="_top" onClick="MM_nbGroup('down','group1','Kilns','',1)" onMouseOver="MM_nbGroup('over','Kilns','img/kilnsbuttonover.gif','',1)" onMouseOut="MM_nbGroup('out')"&gt;&lt;img src="img/kilnsbutton.gif" alt="" name="Kilns" width="80" height="19" border="0" onload=""&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="burners.htm" target="_top" onClick="MM_nbGroup('down','group1','Burners','',1)" onMouseOver="MM_nbGroup('over','Burners','img/burnersbuttonover.gif','',1)" onMouseOut="MM_nbGroup('out')"&gt;&lt;img src="img/burnersbutton.gif" alt="" name="Burners" width="103" height="19" border="0" onload=""&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a href="contact.htm" target="_top" onClick="MM_nbGroup('down','group1','Contact','',1)" onMouseOver="MM_nbGroup('over','Contact','img/contactbuttonover.gif','',1)" onMouseOut="MM_nbGroup('out')"&gt;&lt;img src="img/contactbutton.gif" alt="" name="Contact" width="105" height="19" border="0" onload=""&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;td background="img/leftnav.gif"&gt;&lt;div align="right"&gt;&lt;img src="img/rightnav.gif" width="141" height="19"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="3" bgcolor="#003366" id="maincontent"&gt;&lt;h2&gt;Welcome to Cooperworks!&lt;/h2&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="2" align="left" valign="top" bgcolor="#003366" id="maincontent"&gt;&lt;p&gt;Cooperworks is a manufacturer of high quality ceramics equipment. Since 1990 it has used heat efficient design and durability to create gas and wood fire kilns that produce the best possible ceramics. &lt;/p&gt;
&lt;p&gt;Cooperworks also builds Power Burners which are included on every kiln. The forced-air system injects oxygen into the burner providing more power and higher efficiency. &lt;/p&gt;
&lt;p&gt;&nbsp;&lt;/p&gt;&lt;/td&gt;
&lt;td bgcolor="#003366" id="maincontent"&gt;&lt;img src="img/kiln.jpg" width="216" height="300"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td bgcolor="#003366"&gt;&lt;div align="left"&gt;&lt;img src="img/mainbotleft.gif" width="20" height="15"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td colspan="2" bgcolor="#003366" id="footercontent"&gt;&lt;div align="right"&gt;&lt;img src="img/mainbotright.gif" width="66" height="15"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;div align="right"&gt;&lt;img src="img/left.gif" width="30" height="30"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td colspan="3" bgcolor="#FFFFFF"&gt;&lt;div align="right"&gt; &lt;/div&gt;&lt;/td&gt;
&lt;td&gt;&lt;div align="left"&gt;&lt;img src="img/right.gif" width="30" height="30"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt; </font id=code></pre id=code>

Reply to this topic