Image Padding in CSS, HTML

Question

I'm having problems with images in a table. Although I set tr width=95, and image has width of 95 as well, the tr will automatically have a width of 97 (2 px padding on the right).

However, I've explicitly stated style="padding: 0px".

A sample page is as follows: http://beta.worcell.com/sony.html

Another problem that I have is with the up and down arrows (inside the buy column). I would like them to have equal spacing from the text box, but adding another line break to the bottom arrow would create too much of a space. Would I be able to change that in CSS?

Thank you.

Answer 1

part of the problem is this: in styles.css (line 77) you have

tr td {
  border:1px solid #DDDDDD;
  padding:0.6em;
}

Answer 2

you need to start out with a good css reset. that should take care of the padding issues for you. import the css reset as the first css style on your page, and go from there.

also, dont use

<br/>

if you can help it. everything that br does can be achieved by using margin

Answer 3

"padding: 0px" in your code applies to the table cell in this case, not the image tag.

Answer 4

You need to:

styles.css (line 15)
img {
border:0 none;
margin:-2px; <-- remove this
padding:0;
}

styles.css (line 77)
tr td {
border:1px solid #DDDDDD;
padding:0.6em; <-- remove this
}

Answer 5

The padding doesn't look to be the issue, it's the margins you have set. In the stylesheet you have

img {
    padding:0px;
    border:0px;
    margin:-2px;
}

The "margin: -2px;" part is what is making your images 97px rather than 95px. Set it to "margin: 0px;" and the images appear normal. You then also need to add,

menu img {
    margin: -2px;
}

in order to keep your menu images aligned as you had them.

For the up and down arrows you need to re-think your markup. The down link is within a form, yet the up link isn't, which is a bit inconsistent. They're also contained within paragraph tags which are displaying as blocks, which is making them appear one below the other, so the down arrow doesn't appear until after the bottom of the quantity box, etc.

Answer 6

Hmmmmm, 152 warnings in HTML Validator, lots of unclosed tags....

For the specific problem of the space next to the image, you could try removing the white-space between the </a> tag and the </td> tag.