td align="center" does not work in Internet Explorer 7

I have some cells in a table with an image-icons inside each cell aligned
'center' using <td align="center"...

On a widescreen monitor, this displays the images correctly centered in
Firefox, but in IE7 the image is still aligned to the left. I'd appreciate it
if someone could offer a fix for this, below are some images to show what's
happening.

In this image you can see the icons correctly centered in Firefox (circled
in red):

http://www.sparklywater.com/files/misc/sw/1.jpg


However this is the same page displayed in IE7 with the images in the cells
aligned left (should be centered):

http://www.sparklywater.com/files/misc/sw/2.jpg


Here is the code for the tablein that part of the page (look at first 3
lines):


<table><tr>
<td class="alt1" colspan="<if
condition="$vboptions[showmoderatorcolumn]">6<else />5</if>"
id="f$forum[forumid]" valign="middle" align="center" width="84">



<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><img
src="<if condition="$show['customstatusicon']">$forum[customicon]<else
/>$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif</if>" border="0"
alt="$forum[title]" title="$forum[title]" /></a>





</td>

<td class="alt1"> <font face="verdana" size="2"><a
href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]" alt="View
threads in category '$forum[title]'" title="View threads in category
'$forum[title]'"><strong>$forum[title]</strong></a></font>
<if condition="$show['browsers']"><span class="smallfont">(<phrase
1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>

<if condition="$show['forumdescription']"><div class="smallfont"
style="margin-top: 2px">$forum[description]<div width="100%"
style="margin-top: 2px">






<table cellpadding="0" cellspacing="0" border="0" width=""><tr
align="$stylevar[right]">
<td nowrap="nowrap">
<if condition="$show['lastpostinfo']">

<div class="smallfont" align="left">
<div>
<span style="white-space:nowrap">
<if condition="$show['icon']"><img class="inlineimg" src="$icon[iconpath]"
alt="$icon[title]" border="0" /></if>
<if condition="$lastpostinfo['prefix']">
$lastpostinfo[prefix]
</span><if condition="is_browser('safari')"><!--bug#24775--> </if>
<span style="white-space:nowrap">
</if>
Last Post: <i><a
href="showthread.php?$session[sessionurl]goto=newpost&t=$lastpostinfo[lastthreadid]"
style="white-space:nowrap" title="<phrase
1="$lastpostinfo[lastthread]">$vbphrase[go_first_unread_in_thread_x]</phrase>">$lastpostinfo[trimthread]</a></i></span>



</if>


<div class="smallfont" align="left" style="margin-top: 2px<if
condition="is_browser('ie', 6)">; float:$stylevar[left]</if>; margin-bottom:
0px">
<phrase
1="member.php?$session[sessionurl]find=lastposter&f=$lastpostinfo[forumid]"
2="$lastpostinfo[lastposter]">$vbphrase[by_x_home]</phrase>

</div>
</td>


</tr>



</table></div>
</if>









<div class="smallfont" style="margin-right: 2px; margin-top: 0px"
align="right">

$lastpostinfo[lastpostdate] <if condition="!$show['detailedtime']"><span
class="time" >$lastpostinfo[lastposttime]</span></if>
<a
href="showthread.php?$session[sessionurl]p=$lastpostinfo[lastpostid]"><img
class="inlineimg" border="0" src="$stylevar[imgdir_button]/lastpost.gif"
alt="$vbphrase[go_to_last_post]" /></a>

</div>




</td></tr></table>

ameen wrote on Sun, 16 Nov 2008 19:59:00 -0800:

> I have some cells in a table with an image-icons inside each cell
> aligned 'center' using <td align="center"...

> On a widescreen monitor, this displays the images correctly centered in
> Firefox, but in IE7 the image is still aligned to the left. I'd
> appreciate it if someone could offer a fix for this, below are some
> images to show what's happening.

> In this image you can see the icons correctly centered in Firefox
> (circled in red):

> http://www.sparklywater.com/files/misc/sw/1.jpg


> However this is the same page displayed in IE7 with the images in the
> cells aligned left (should be centered):

> http://www.sparklywater.com/files/misc/sw/2.jpg


> Here is the code for the tablein that part of the page (look at first 3
> lines):

The code you posted is unfortunately useless in determining the cause. There
is no <td align="center" anywhere in it, you're using CSS and haven't
included the relevant CSS parts. It also appears to be the raw template code
that is interpreted by your forum code, not the HTML that is actually sent
to IE.

I've taken a look at your actual HTML and CSS. You have a class="alt1" on
that table cell and a fixed width of 84, then you have a span tag, an a tag,
and then the image tag itself, all with align="center". It's the width="84"
that seems to be causing the problem - all I can assume is that IE is using
the 84px width (which due to the lack of width handling on other cells is
causing it to grow) to determine the centering location, and when the cell
widens then the image appears left skewed; it's not left aligned because
there is a gap at the left - you have a 70px wide image in an 84px
placeholder so it's placed 7px from the left side. Drop the width="84" and
IE renders those images in the centre of the cells. I have no idea if this
is a bug or by design.

--
Dan