DIV height and different browsers..

problem with DIV height and border measurement on different browsers

[craig1972]

hi,

i have an image of height = 200 px. i want to put it in a DIV which is 200 px in height and has a border of 1px all around to give a look of only the image (without any padding) and the border around it. unfortunately, this works as desired in opera 6, mozilla and IE, but opera 7 seems to miss the bottom border. perhaps it is calculating the 1px border INTO the "200px height" which means my image only has 199px to hold it, and thus overlaps the bottom border.

what can i do to solve this? how can i define borders in a cross-browser way?

thanks for any thoughts/ideas!

[Birdman]

You could define the image's dimensions as width: 100%; height: 100%. Or, you could just add the border directly to the image.

I believe IE is the browser at fault, adding the border inside of the box, rather than padding it outside the box.

[Nick_W]

>ou could just add the border directly to the image

Yes, it doesn't directly answer your question (though I beleive Birdmans last point does) but it's the best solution purely becuase it's so much more elegant and 'light'.

Nick

[felix]

If it is because the image is obscuring the border, overflow:hidden for the div should work.

[craig1972]

that did it felix! thanks! my example had one image, but i have 10 images in the div, so a border around an image is not an option. anyway, prob solved. :)