HTML & WEB-Design

Moderators: Jonathan
Number of threads: 1253
Number of posts: 3360

This Forum Only
Post New Thread
Single Post View       Linear View       Threaded View      f

Report
How to vertically align an image? Posted by d fader on 4 Jul 2006 at 1:22 AM
Hi,

I've been trying to vertically align an image in a table cell. This may sound easy but I want to to work in both IE and Firefox.

My problem: I have a tablerow with two cells, the first cells contains some text (will never wrap), the second cell contains a 16x16 image. I want this image vertically aligned in the tablecell (18px high). It works fine in Firefox, but in IE the tablerow is rendered 19px high instead of 18px. Here's my HTML code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Image test</title>
</head>

<body>
<table cellpadding="0" cellspacing="0" border="0" style="width: 50%">
<tr style="background-color: #bbbbff; height: 18px;">
<td style="font-size: 10px;">
Title
</td>
<td style="text-align: right; vertical-align: middle;">
<img src="/images/test.gif" alt="test image" style="vertical-align: middle;" />
</td>
</tr>
</table>
</body>
</html>
,-~[ D-FADER ]~-'
Report
Re: How to vertically align an image? Posted by mac_doggie on 5 Jul 2006 at 9:05 AM
: Hi,
:
: I've been trying to vertically align an image in a table cell. This may sound easy but I want to to work in both IE and Firefox.
:
: My problem: I have a tablerow with two cells, the first cells contains some text (will never wrap), the second cell contains a 16x16 image. I want this image vertically aligned in the tablecell (18px high). It works fine in Firefox, but in IE the tablerow is rendered 19px high instead of 18px. Here's my HTML code:
:
: <?xml version="1.0" encoding="iso-8859-1"?>
: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
:
: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
: <head>
: <title>Image test</title>
: </head>
:
: <body>
: <table cellpadding="0" cellspacing="0" border="0" style="width: 50%">
: <tr style="background-color: #bbbbff; height: 18px;">
: <td style="font-size: 10px;">
: Title
: </td>
: <td style="text-align: right; vertical-align: middle;">
: <img src="/images/test.gif" alt="test image" style="vertical-align: middle;" />
: </td>
: </tr>
: </table>
: </body>
: </html>
: ,-~[ D-FADER ]~-'
:
You can try <td valign="top">
or you can try to adjust the line-height, and make sure something else besides the image is in the td, just add a &nbsp;

-mac-
mailto:mac_doggie@hotmail.com
the Netherlands...





 

Recent Jobs

Official Programmer's Heaven Blogs
Web Hosting | Browser and Social Games | Gadgets

Popular resources on Programmersheaven.com
Assembly | Basic | C | C# | C++ | Delphi | Flash | Java | JavaScript | Pascal | Perl | PHP | Python | Ruby | Visual Basic
© Copyright 2011 Programmersheaven.com - All rights reserved.
Reproduction in whole or in part, in any form or medium without express written permission is prohibited.
Violators of this policy may be subject to legal action. Please read our Terms Of Use and Privacy Statement for more information.
Operated by CommunityHeaven, a BootstrapLabs company.