homepage Welcome to WebmasterWorld Guest from 54.204.64.152
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Visit PubCon.com
Home / Forums Index / Browsers / Opera Browser Usage and Support
Forum Library, Charter, Moderator: open

Opera Browser Usage and Support Forum

    
vertical-align image to the bottom of a table cell
small gap in Firefox, Opera, Mozilla but none in IE
Tonearm




msg:1584723
 5:25 pm on Dec 2, 2004 (gmt 0)

The following code leaves a 4 pixel gap underneath the image in Firefox and Opera, a 5 pixel gap in Mozilla 1.4, and no gap in IE6.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
* {padding:0;margin:0;border:0}
.* {padding:0;margin:0;border:0}
table {border-collapse:collapse}
td {background-color:black;vertical-align:bottom}
div {background-color:red}
</style>
</head>
<body>
<table>
<tr>
<td><div>left</div></td>
<td><a href="test.html"><img alt="" height="20" src="image.gif" width="20" /></a></td>
<td><div>right</div></td>
</tr>
</table>
</body>

Does anyone know how to fix that?

 

choster




msg:1584724
 5:49 pm on Dec 2, 2004 (gmt 0)

Try setting

img {display:block}

tedster




msg:1584725
 5:58 pm on Dec 2, 2004 (gmt 0)

This is one of those quirks mode versus standards mode things - IE gets the rendering wrong, and so we get surprised when a more standards compliant browser displays the gap.

You can learn more here:

Quirks mode vs. Standards mode [webmasterworld.com]

Tonearm




msg:1584726
 6:10 pm on Dec 2, 2004 (gmt 0)

That works great, except text-align:center no longer works on the images and they always align to the left. Any way to get them to center and lose the gap?

tedster




msg:1584727
 6:54 pm on Dec 2, 2004 (gmt 0)

How about using this CSS instead:

td img {
vertical-align: bottom;
}

Tonearm




msg:1584728
 7:09 pm on Dec 2, 2004 (gmt 0)

I could have sworn I tried that, but:

img {vertical-align:bottom}

seems to fix it. Thanks!

tedster




msg:1584729
 7:27 pm on Dec 2, 2004 (gmt 0)

This CSS rule goes right to the heart of the matter. The issue is that, by default, images are an inline element. The W3C standard is that inline elements are aligned to the TEXT BASELINE, which is always a few px above the bottom of a table cell in order to leave some room for the descenders on letters such as "g" and "y".

Hence we get a gap. Changing the <img> element to display:block fixes that particular issue, but then (on a standards compliant browser) the centering rules that work on inline elements are no longer applied.

I'm glad it's fixed for you.

Tonearm




msg:1584730
 7:32 pm on Dec 2, 2004 (gmt 0)

Ah I see, the text baseline. That totally makes sense.

tedster




msg:1584731
 8:06 pm on Dec 2, 2004 (gmt 0)

There is another fix - a really dumbed down approach -and that is just to remove the DTD (or use a partial DTD that does not inlcude the URL). Then the browser switches over to rendering in quirks mode, just like all the older browser - and stops bothering you with all that standards compliant stuff.

When the first doc-type switching came out I paid very little attention to the comments and articles about it, for a while, at least. And then I got bit bad and had to do some serious study again. I'm sure the future will hold a few more similar surprises.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Opera Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved