6 Replies - 15485 Views - Last Post: 12 January 2010 - 06:13 AM

#1 tilden  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 30-December 09

Removing space between image and border in a table

Posted 30 December 2009 - 07:20 PM

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>


Is This A Good Question/Topic? 0
  • +

Replies To: Removing space between image and border in a table

#2 ladyinblack  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 9
  • View blog
  • Posts: 419
  • Joined: 08-April 09

Re: Removing space between image and border in a table

Posted 30 December 2009 - 10:47 PM

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">

Was This Post Helpful? 0
  • +
  • -

#3 tilden  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 30-December 09

Re: Removing space between image and border in a table

Posted 31 December 2009 - 05:18 AM

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.
Was This Post Helpful? 0
  • +
  • -

#4 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 207
  • View blog
  • Posts: 988
  • Joined: 28-February 09

Re: Removing space between image and border in a table

Posted 31 December 2009 - 12:50 PM

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;
}



Was This Post Helpful? 0
  • +
  • -

#5 tilden  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 30-December 09

Re: Removing space between image and border in a table

Posted 04 January 2010 - 08:10 PM

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.
Was This Post Helpful? 0
  • +
  • -

#6 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 216
  • View blog
  • Posts: 1,602
  • Joined: 20-January 09

Re: Removing space between image and border in a table

Posted 06 January 2010 - 09:03 AM

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

Was This Post Helpful? 0
  • +
  • -

#7 przemass  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 166
  • Joined: 18-July 09

Re: Removing space between image and border in a table

Posted 12 January 2010 - 06:13 AM

Try to use cellspacing="0" on main table.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1