No Margin Around Images

[OOzy]

Dears,

I have a table that has two columns. Each column has an image. I would like the images to exactly fits the <TD> i.e. no margin around the image. I tried to margin:0%; no help; padding:0%

Note: My code is Xhtml

HTML-TABLE

<table id="hdr" >
<tbody>
<tr>
<td class="rhdr"><img height="90" width="265"
src="../src/images/logo.png" alt="Logo" /></td>
<td class="lhdr"><img height="90" width="265"
src="../src/images/logo-bldg.png" alt="Image" /></td>
</tr>
</tbody>
</table>


CSS

table#hdr
{
border:1px solid black;
background-color: #12DEAD;
border-width:thin;
width:100%;
height:78px;
border-collapse:collapse;
margin-left:0%;
margin-right:0%;
margin-top:0%;
margin-bottom:0%;
padding:0% 0% 0% 0%;
border-spacing:0% 0% 0% 0%;

}

td.rhdr
{
background-color: #12DEAD;
text-align:right;
margin-left:0%;
margin-right:0%;
margin-top:0%;
margin-bottom:0%;
padding:0%;
border-spacing:0% 0% 0% 0%;
padding:0% 0% 0% 0%;
}

td.lhdr
{
background-color: #12DEAD;
text-align:left;
margin-left:0%;
margin-right:0%;
margin-top:0%;
margin-bottom:0%;
padding:0%;
border-spacing:0% 0% 0% 0%;

}

 

[Foamcow]

You will need to add

<table cellpadding="0" cellspacing="0">
</code>

To your table tag.
I know it's not "proper" but many browsers still pad the cells out even if you use CSS to remove the padding/spacing.

Thinking about it, try adding

[code]
table {collapse:all}

to your stylesheet, that might do it.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[Foamcow]

ignore the collapse all thing..it's nonsense
i am going to lie down somewhere lol

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[ChrisHunt]

Try doing it like this:

table#hdr
{
  border: thin solid black;
  background-color: #12DEAD;
  width:100%;
  height:78px;
  border-collapse:collapse;
  margin:0;
  padding:0;
}

td.rhdr
{
  text-align:right;
  margin:0;
  padding:0;
}

td.lhdr
{
  text-align:left;
  margin:0;
  padding:0;
}

table#hdr img {
  margin: 0;
  padding: 0;
  border: 0;
}

The first three rules are yours, with unnecessary and/or repeated clauses removed. Note that you don't need to include a unit when a value is 0.

The last one is an addition, in case your problem stems from margins around the image (from some other CSS rule) instead of the table's properties.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Foamcow]

I really needed that lie down.

You might still try the cellpadding thing though if the CSS solution doesn't work.

It is more likely though that there are margins around the image elements as ChrisHunt said.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time