unwanted gap between img and table

Forum Moderators: open

Message Too Old, No Replies

unwanted gap between img and table

only in xhtml and only firefox

mjb2

4:55 pm on Apr 29, 2007 (gmt 0)

Could anyone suggest why I'm getting an unwanted vertical gap between the img and the second table in the following code?

This only happens:
* in xhtml (it works OK if I remove the first line)
* in firefox (it OK in ie6)

I would appreciate ideas for removing this gap which works in all browsers and allows me to continue using xhtml.

I have tried:
border-width:0px;
margin:0px;
padding:0px;
on both table and img without effect.

here is the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table width="100%" border="1">
<tr>
<td>a</td>
</tr>
</table>
<img src="banner11.gif" alt="banner" />
<table width="100%" border="1">
<tr>

[edited by: tedster at 6:36 pm (utc) on April 29, 2007]
[edit reason] fix the formatting [/edit]

DanA

5:21 pm on Apr 29, 2007 (gmt 0)

The code above is not valid XHTML. Enclose the image in a block element.
The fix is to use <img style="vertical-align:bottom;" src="banner11.gif" alt="banner" />

or style="display:block;"

mjb2

6:01 pm on Apr 29, 2007 (gmt 0)

Thank you very much, it works!

From what you say, to make the page properly xhtml compliant, then I should put the img inside another tag like <p> or would <pre> be better so that that does not generate a border?

I guess I need to search for some tutorials so that I can understand the standards better.

Thanks,

Martin

tedster

6:35 pm on Apr 29, 2007 (gmt 0)

This is a Quirks Mode vs. Standards mode [webmasterworld.com] issue. In standards mode, any inline element in a table cell (img is an inline element by default) will be aligned to the text baseline - that allows space for the descenders that extend below the baseline on some letters. That's why the problem comes up and why these fixes work