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



## sparklywater

I have a cell with an image inside aligned center using <td align="center"...
On a widescreen monitor, this displays the image 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 image sto show what's happening.

In this image you can see the cells correctly centered in Firefox:











And this is the same page displayed in IE7 with the image in the cell aligned left (should be centered):











Here is the code for the table-cells in that part of the page (look at first 3 lines):



HTML:


<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>


----------



## sparklywater

Any ideas? Please take a look at the code and see if I could try something to make this work in IE. You can take a look at the homepage live at www.sparklywater.com


----------



## sparklywater

anyone?


----------



## dm01

This is because the align attribute is deprecated. You need to use CSS.

There are two ways to do this: in-line and internal.

In-line: replace align="center" with style="text-align: center".

Internal:



HTML:


<head>
<style type="text/css">
td.center {text-align: center}
</style>

</head>
<body>
<table border=0>
<tr><td class="center">centred table cell</td><td>left-aligned table cell</td></tr>.
</table>

I hope that made sense.


----------



## sparklywater

thanks for your reply. I just tried using style="text-align: center"
but this did not fix the problem (still aligned toward the left).


----------



## dm01

Try the other way I mentioned. style= does not work for <td>, due to the way the tables are set up in XHTML.


----------



## corneliusparkin

Hi. Check your width is not a fixed amount i.e. 100. It should be a percentage i.e. 50%. IE SUCKS BIG TIME!


----------



## ahmorrow

Or you could just add a bit of CSS to the <head>



Code:


<style type="text/css">
img {margin:auto auto;}
</style>


----------

