CSS Table Row Height 1

[Borvik]

This doesn't make sense to me.

I have a table whose height is 100px with three rows.

Row 1: 39px high
Row 2: 22px high
Row 3: 39px high

39px + 22px + 39px = 100px

The second cell of the first row spans all 3 rows with an image. The result should be a black bar through an image (part of the black bar is in the image).

Web page located at

http://borvik.gotdns.com/example

It displays perfectly in IE 7, Chrome, Safari, and Opera - but NOT Firefox!

I've run it through the HTML and CSS validators and there are no errors.

If I remove the height declaration on the third row - it works fine in all the browsers except for IE.

Any ideas on how to fix this problem? I'd like to try and avoid IE conditional comments - but if that's the only way out then I suppose that will work.

 

[audiopro]

Any ideas on how to fix this problem

Solve the problem by removing table.

Keith

http://www.studiosoft.co.uk

 

[Borvik]

Ok Keith,

I would love to be able to do that - however, I'm trying to maximize the number of users that can visit the site and view it properly. I have no idea what browsers the users will be using.

Not to mention I unfortunately need this to be semi-FrontPage friendly so the boss can manage it (very illiterate) - and FrontPage isn't so CSS friendly.

 

[Vragabond]

Add [tt]display: block;[/tt] to the image in the table cell declaration.

Images, acting as inline elements, sometimes don't fit very snugly in their containers. If you make them block level elements, they usually behave better in such circumstances.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Borvik]

Cheers Vragabond!

It works across all now.

 

[Vragabond]

Mind you, getting rid of the table is still a good idea.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Borvik]

Yea - I know. It's tough to circumvent the requirements of the site though.