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

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.