TD bgimage centering in FF and also a loading freeze in IE

[TravisRoe]

Im having trouble with centering a background image in FireFox. In IE it centers just fine with either align="center" or cellhalign="center" - Firefox seems to not do it.

<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>

Here's the header code:

NOTE: The last TD/cell is the only relevant bit I think but included it all for info. :

" <td height="22" colspan="3" align=center" background="../mkportal/templates/default/images/newbar/Headimages/7BottomBack.gif"><script>
"
this image centers fine in ie but never in FF no matter what I do...even using cellhalign and eveything else? :(

Full header code:

<SCRIPT language=JavaScript src="../mkportal/templates/default/images/newbar/milonic_src.js" type=text/javascript></SCRIPT>
<script language=JavaScript>
if (parent.frames.length) { top.location=document.location;}
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=../mkportal/templates/default/images/newbar/mmenuns4.js></scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=../mkportal/templates/default/images/newbar/mmenudom.js></scr"+"ipt>");
</script>
<SCRIPT language=JavaScript src="../mkportal/templates/default/images/newbar/menu_data.js" type=text/javascript></SCRIPT>
<table width="1006" height="176" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="261" height="18" background="../mkportal/templates/default/images/newbar/Headimages/0TopLeft-261x18.gif" class="style1"> </td>
<td width="468" height="18" background="../mkportal/templates/default/images/newbar/Headimages/3TopMiddle-468x18.gif"> </td>
<td width="277" height="153" rowspan="3" background="../mkportal/templates/default/images/newbar/Headimages/6RightColumnAllOneCell-StretchyCell-295x175.gif"> </td>
</tr>
<tr>
<td width="261" height="61" background="../mkportal/templates/default/images/newbar/Headimages/1TopLeftDownOne-261x61.gif"> </td>
<td width="468" height="61" background="../mkportal/templates/default/images/newbar/Headimages/4TopMiddleDownOne-468x61.gif"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="468" height="60" align="absmiddle" title="thecarscene.com Ad">
<param name="movie" value="../mkportal/templates/default/images/newbar/mimages/TCSAd.swf" />
<param name="quality" value="high" />
<embed src="../mkportal/templates/default/images/newbar/mimages/TCSAd.swf" width="468" height="60" align="absmiddle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object></td>
</tr>
<tr>
<td width="261" height="75" background="../mkportal/templates/default/images/newbar/Headimages/2TopLeftDownTwo-261x75.gif"> </td>
<td width="468" height="75" background="../mkportal/templates/default/images/newbar/Headimages/5TopMiddleDownTwo-468x75.gif"> </td>
</tr>
<tr>
<td height="22" colspan="3" align=center" background="../mkportal/templates/default/images/newbar/Headimages/7BottomBack.gif"><script>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
menuwidth="547px";
itemwidth="547px";
padding=0;
alwaysvisible=1;
orientation="horizontal";
position="relative"; (! note also tried Center here)
aI("image=../mkportal/templates/default/images/newbar/mimages/0Left-91x22-Home.gif;status=Back to Home Page;url=http://thecarscene.com/;");
aI("image=../mkportal/templates/default/images/newbar/mimages/1LeftPlusOne-107x22-Forums.gif;showmenu=Forums;url=http://thecarscene.com/forums/index.php;");
aI("image=../mkportal/templates/default/images/newbar/mimages/2LeftPlusTwo-118x22-Features.gif;showmenu=Features;");
aI("image=../mkportal/templates/default/images/newbar/mimages/3LeftPlusThree-116x22-Personal.gif;showmenu=Personal;");
aI("image=../mkportal/templates/default/images/newbar/mimages/4LeftPlusFour-116x22-Sponsors.gif;showmenu=Sponsors;url=http://www.thecarscene.com/forums/index.php?showforum=80;");
}
drawMenus();
</script></td>
</tr>
</table>

Please help! I'm (Very) stuck! :(

[edited by: tedster at 4:08 am (utc) on Jan. 25, 2006]

[drhowarddrfine]

You have 52 validation errors. Always get your code working in Firefox first. Then adjust for old and buggy IE. Never design using IE or you will wind up with problems such as this.

[TravisRoe]

Are you sure the validation issues are the reason the image is failing to centre? why on earth would a single table row just fail to work when the other attributes being set inside the <Td> work fine.

I understand I need to fix the validation errors and will undertake to do so shortly however I want to resolve this issue first and foremost. If I fix the 52 validation errors and still can't centre the table, you won't be here to control the outrage.

Trav

[twist]

align=center"

Not sure if you just made a typo but it should be align="center"

If that doesn't work, you could try wrapping what you want centered inside a div. Give the div a set-width and use margin:0 auto to center the block.

<td colspan="3" background="image.gif"><div style="margin:0 auto; width:x00px"><script>

A tip for this website, if you want people to help you with your code, clean it up first. I don't mean validation, but remove things like height, width, directory paths, and so on. If I open a page and see a mile of code I tend to want to hit the back button.