Unwanted white space in IE ... works fine in FF

[human bean]

Hello, and thanks for your interest.

My horizontal button scheme causes unwanted white space to appear just above the button row in IE8. It displays perfectly in FF3. Here are some cropped screenshots that demonstrate the issue:

First, IE. The upper black area is the bottom of a jpg image, located inside a table cell, one row above the menu code. The menu code is inside a cell in the next row, identical in width. Notice the gap between the bottom of the image and the top of the buttons ...



Now, Firefox ... this is the desired result:



I tried moving the tagged script outside the table. tried various 'valign=?' schemes, tried 'bordercollapse' style, and also tried placing all the button code inside 'div' tags. If there is a CSS conflict, I cannot find it.

Help?

Thanks.

- H. Bean, Esq.

PS - An additional button style type (Selected) in addition to normal/mouseover/mousedown would be a very useful feature!

[Karlis]

This appears to be something similar to an IE bug where a break before closing tag causes a white space.

E.g.

Code: Select all

<img ...></div>

would display ok while

Code: Select all

<img ...>
</div>

would cause problems. Same happens with other types of container tags such as td, table etc. Can you look at this?

[human bean]

Thank you for responding. I will check it out and let you know the results.

- H. Bean, Esq.

[human bean]

Sorry for the delayed response -- I have to do chemotherapy every two weeks, and it really interferes with everything.

Anyway, the problem was not your software. I had somehow imported a bad header and was not complying with strict code (wrong doctype). After I fixed that, everything worked fine. I guess Firefox is a bit less anal about such things than Internet Exploder. Leave it to Microsoft ... (sigh)

Thanks again for your response, and sorry to trouble you when the problem was on my end.

- H. Bean, Esq.