Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

table padding around image, even though padding set to zero 1

Status
Not open for further replies.
spastica

spastica

Programmer
Sep 27, 2002
72
GB
Hello,

I have a table with a cell containing a horizontal image. I have specified the width and height, and specified no padding , yet the table still automatically puts padding around the image. is there any way to fix this? i want the cell to be the exact height of the image, with no excess space at the bottom, and only the image showing.

any help will be appreciated!
 
Sort by date Sort by votes
ok, here's the code! there are two rows with images in them...one is the top title, the bottom is a jpg image.

the body of the page is a new table (i haven't included it here)

thank you so much for taking the time to look at this! :)

(i'm commenting it out in case it appears as html instead of code!)

<!-- <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>
<!DOCTYPE html
PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
&quot;
<html xmlns=&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;>

<head>
<title>
Welcome
</title>
<link rel=&quot;stylesheet&quot; href=&quot;includes/stylesheet.css&quot; />
</head>

<!-- this is the header top image -->

<body topmargin=&quot;0&quot; leftmargin=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; bgcolor=&quot;#ffffff&quot;>

<!-- table for top section of page starts -->

<table width=&quot;100%&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; valign=&quot;top&quot; background=&quot;images/stripesback.gif&quot;>
<tr>

<td width=&quot;776&quot; valign=&quot;top&quot; background=&quot;images/stripes.gif&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;><a name=&quot;top&quot;></a><img src=&quot;images/headertop.gif&quot; height=&quot;44&quot; width=&quot;776&quot; border=&quot;0&quot;>
</td>

<td width=&quot;100%&quot; height=&quot;44&quot; background=&quot;images/stripes.gif&quot; valign=&quot;top&quot;></td>


</tr>

<!--this row holds the bottom header image -->
<tr>
<td valign=&quot;top&quot; height=&quot;115&quot; class=&quot;headerbottom&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;780&quot;><img src=&quot;images/headerbottom.jpg&quot; width=&quot;780&quot; height=&quot;115&quot; border=&quot;0&quot; alt=&quot;Welcome&quot;></td>

<td valign=&quot;top&quot; height=&quot;115&quot; background=&quot;images/treeback.jpg&quot; class=&quot;headerbottom&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;></td></tr>




</table> -->
 
Upvote 0 Downvote
you'll want
Code: 
<td width=&quot;776&quot; valign=&quot;top&quot; background=&quot;images/stripes.gif&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;><a name=&quot;top&quot;></a><img src=&quot;images/headertop.gif&quot; height=&quot;44&quot; width=&quot;776&quot; border=&quot;0&quot;>
         </td>
to read
Code: 
<td width=&quot;776&quot; valign=&quot;top&quot; background=&quot;images/stripes.gif&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;><a name=&quot;top&quot;></a><img src=&quot;images/headertop.gif&quot; height=&quot;44&quot; width=&quot;776&quot; border=&quot;0&quot;></td>
-- cut here --
 
Upvote 0 Downvote
thank you!! that completely fixes the problem in explorer, but still doesn't do the job in netscape.

here's what i have:

<table width=&quot;100%&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; valign=&quot;top&quot; background=&quot;images/stripesback.gif&quot;>

<tr><td width=&quot;776&quot; valign=&quot;top&quot; background=&quot;images/stripes.gif&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;><a name=&quot;top&quot;></a><img src=&quot;images/headertop.gif&quot; height=&quot;44&quot; width=&quot;776&quot; border=&quot;0&quot;></td>
<td width=&quot;100%&quot; height=&quot;44&quot; background=&quot;images/stripes.gif&quot; valign=&quot;top&quot;></td></tr>
<tr><td valign=&quot;top&quot; height=&quot;115&quot; class=&quot;headerbottom&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;780&quot;><img src=&quot;images/headerbottom.jpg&quot; width=&quot;780&quot; height=&quot;115&quot; border=&quot;0&quot; alt=&quot;Welcome&quot;></td><td valign=&quot;top&quot; height=&quot;115&quot; background=&quot;images/treeback.jpg&quot; class=&quot;headerbottom&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;></td></tr>

</table>
<!-- header ends -->
 
Upvote 0 Downvote
There's quite a few mistakes to start with, if you clean up your code then nest tables to achieve what you are looking for.

1. can't specify valign for tables
2. you have cellpadding and cellspacing in the cells, only need to do this for the tables.
3. you have mixed pixels and percentages (width 780 and width 100%) this is a bad idea.
4. you have one cell 768 and the one below it as 780, I have rarely seen it work well to have a cell below with a different width.

You should create a 4*4 table, then you can nest tables in each of these to get the effect you require.


É

:: ::
 
Upvote 0 Downvote
One comment about cian's post:
mixing pixels and percentages in table elements dimentions is NOT a bad idea. It is quite widely spread technique that helps to achieve the desired result. Of course, if done correctly, and this depends on your actual task.
All the rest of his points are correct and should be taken into consideration.

To see what's going on in your table it's a good idea to set table border to 1 - this will allow you to get the clear picture.
 
Upvote 0 Downvote
It IS a bad idea. It is not supported through every browser and in the way Netscape, Mozilla, and Opera read pixels differently than IE it is almost always pproblematic if you are building cross-browser. Won't even go into cross-platform!

Not to mention, W3C doesn't seem to have anything that would remotely reccommend it.

-----------------------------------------------
These are endless galaxies which are yours.
You can journey to infinity
through the endless passages of the cosmos.
Even better. This all belongs to you.
This is your mind.
 
Upvote 0 Downvote
I've never had any problem with this. And I always do everything cross-browser and support the browsers from your list.

If you specify the table width in % and cell width in pixels it will never cause any problems. Again, if it's done correctly.
 
Upvote 0 Downvote
uh huh -----------------------------------------------
These are endless galaxies which are yours.
You can journey to infinity
through the endless passages of the cosmos.
Even better. This all belongs to you.
This is your mind.
 
Upvote 0 Downvote
starway , i have to disagree. BDNFLNC is correct in saying how never to mix pixels and % for tables. w3c even suggests never to mix them up.
 
Upvote 0 Downvote
In starway's defense, the mix can be done and, as he points out, done correctly. On the other hand, doing so makes the browser work doubletime trying to figure out how to render the page. If the two are used together in the same table, the browser will make the decision how to render the page.

I used to try to mix pixels & percentages but found that I was creating more work for myself than necessary. I'm a one-man shop and can't afford to spend time shuffling widths around trying to make the table work. I have since reverted to keeping pixels with pixels and percentages with percentages. But remember, there is no reason not to mix the two when nesting tables - just don't mix them in the same table. There's always a better way...
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
697
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
701
bdwilcox
bdwilcox
usarmycwo
  • Locked
  • Question
Any FrontPage users still around? 1
Replies
4
Views
813
feherke
feherke
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top