1 Pixel Away

[cameron]

I just did a bit of work on a the design of my new site, and I'm having a problem.

http://www.mosquito-trap-reviews.org/

The black border line lines up fine with the image in IE, but is off by 1 pixel in Firefox. Any ideas what I have to do to fix this?

[James]

They render the same in Firefox 0.9.3 and IE6, except for some grey blotch at the bottom of the layout in IE6.

[r2d2]

Looks ok to me in Ff 0.9.1 on linux.

Its probably due to the box model problem though, its best not to set an absolute width and padding/border/margin for divs, use two divs, one for the width, then put the border one inside and set width to 100%.

Edit: ah, ignore all that, I see ur using tables, will have to see it in IE later.

[cameron]

I've tried changing the size of the text in the green area, and that fixed the problem (i'm doing this in an offline version of the page). I don't understand though, why this would have any effect, because none of the text is wide enough to be forcing the cell to expand.

[James]

Ah yes, it appears to do this whenever the text size is increased or decreased too much.

[intelliot]

Cell padding perhaps? Are you using nested tables?

[cameron]

No nested table, and cellpadding is set to 0. I do have padding-top: 10px for the green part. I'm just using " " on each line to make it look like there is padding on the sides.

[James]

I'm just using " " on each line to make it look like there is padding on the sides.
Try adding overflow: hidden; to the table's CSS. That's a quick and dirty solution.