[tilden]

I have an image at the top of a table with a number of links below it. I want to surround those links with a border. I can't use the border property of the main table becuase that will surrong the top image with the border, which I don't want. The following code works almost as needed but there is a one pixel space beneath the bottom of the top image and the beginning of the left and right borders. Can someone please point out how to code this so there isn't a space between the image and the beginning of the border?

<table border="0" cellpadding="0" width="100%">
   <tr> 
      <td class="main"><img src="main.jpg"></td>
   </tr>
   <tr>
      <td align="right">
         <table border="0" cellpadding="0" width="100%" style="border:1px solid #bb9671;">
             <tr>             
                <td align="center" style="padding-bottom: 5px;"><a href="home.html"><img src="image1,jpg"></a></td>
             </tr>
             <tr>               
                <td align="center" style="font-size: 12px;">Name</td>
             </tr>
             <tr>
                <td align="center" style="font-size: 11px;">Sale</td>
             </tr>
         </table>
      </td>   
   </tr>
</table>

[ladyinblack]

Hi there,

From what I understand, you want something like this.

	<table border="0" cellpadding="0" width="50%">
	  <tr> 
		<td class="main"><img src="main.jpg"></td>
		<td align="right">
		  <table border="0" cellpadding="0" width="100%" style="border:1px solid #bb9671;">
			<tr> 
			  <td align="center" style="padding-bottom: 5px;"><a href="home.html"><img src="image1,jpg"></a></td>
			</tr>
			<tr> 
			  <td align="center" style="font-size: 12px;">Name</td>
			</tr>
			<tr>
			  <td align="center" style="font-size: 11px;">Sale</td>
			</tr>
		  </table>
		</td> 
	  </tr>
	</table>

However, do you have a specific size for your images?

The only thing I've done was take out the </tr> and <tr> tags from between your

<td class="main"><img src="main.jpg"></td>
[b]</tr>
<tr>[/b]
<td align="right">

[tilden]

Thank you for helping. But the change you suggested will place the main image beside the other items. They need to be vertical. Maybe this will help see what I am trying to do.

This represents how the code displays now:
--------------------
| Main Image |
--------------------

| sub item |
| sub item |
| sub item |

This represents how I need it to display (no space between the main image and first item below it:

--------------------
| Main Image |
--------------------
| sub item |
| sub item |
| sub item |

Please let me know if that is not clear and I will setup a test page to view.

[calebjonasson]

Can I suggest that you not use tables for a menu and switch to some list items. You can get this in a way cleaner form using proper css.

<div class="menu">
<div class="menu-image"></div>
<ul>
	 <li>Item 1</li>
	 <li>Item 2</li>
	 <li>Item 3</li>
	 <li>Item 4</li>
</ul>
</div>

The above would be your html and down below is your css.

.menu {
margin:0px;
padding:0px;
}
.menu-image{
background:your image here;
border:1px solid #000;
}
.menu ul {
border-left:1px solid #000;
border-right:1px solid #000;
}

[tilden]

Thanks for the suggestion but I can't get rid of the tables, at least not completely since this is part of a larger project. A list wouldn't apprear correctly in this situation. I thought some sort of css positioning is what I needed but I'm not versed enough in that to make that happen and when I try it, the display is not even close to what it should be. I appreciate the help. I guess this is just one of those things I'll have to put aside until I can figure it out.

[gregwhitworth]

First off - you need to reset your browser's css settings:

<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
</style>

Second of all you have a class main applied to the main image which very well be the culprit.

Anyways, is this 1px space created by your border that you applied to the nested table? I would suggest setting it up this way (I'll keep tables for you, even though you CAN achieve the same feel with a list)

<table border="0" cellpadding="0" width="100%">
<tr>
<td class="main"><img src="main.jpg"></td>
</tr>
<tr>
<td align="right">
<ul>
	 <li><a href="home.html"><img src="image1.jpg"></a></li>
	 <li><a href="#">Name</a></li>
	 <li><a href="#">Sale</a></li>
</ul>
</td>
</tr>
</table>

Then you will apply all of the css that you applied to the table but to the list:

ul {
   list-style-type: none;
   border: 1px solid #bb9671;
   border-top: none; /* This will remove the top border if you don't want it delete it*/}

Let me know if you have any questions, and if it doesn't do what you want please let us know - you can DO almost ANYTHING with CSS. Don't give up.

This post has been edited by gregwhitworth: 06 January 2010 - 09:04 AM

[przemass]

Try to use cellspacing="0" on main table.