Centering Issues

[simpleTVT]

The Problem

How can i center the banner at the top of the page.

Forums:http://cutemachines.com/forums/

Koodi [Valitse] Laajenna

#MRHeader {
   background-image:  url(images/head_bg.gif);
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }

Im guessing the code is incorrect, as its not actually centering the banner.

[Rudolf]

It is centered in Firefox, but that piece of code is not correct

Koodi (Try this) [Valitse] Laajenna


#MRHeader {
   background-image:  url(images/head_bg.gif);
   text-align:center;
   margin-top:0px;
   margin-bottom:0px;
   padding:0px;
}


[simpleTVT]

Ok i did change that code. But in I.E it is not centered.

[Rudolf]

Koodi (Search) [Valitse] Laajenna

<div id="MRHeader">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="650" valign="top" height="110" align="middle">
<a href="http://cutemachines.com/forums/index.php">
<img width="780" height="110" title="Cute Machines Logo" alt="Cute Machines Logo" src="http://cutemachines.com/forums/Themes/PSPTheme_Fixed/images/logo.gif"/>
</a>
</td>
</tr>
</tbody>
</table>
</div>

You'll see align="middle" which should be align="center". Or simply remove it.

[simpleTVT]

I have changed the "middle" to "center" but still no change.


Firefox is aligned center.

I.E is still aligned to left.

[dolator]

maybe you just need to empty your cache?

[simpleTVT]

I have empted cache, but still not change. Im stumped.

[Rudolf]

You have two tables nested, or so it appears. The tables are not needed anyway.
You need to have something like this:

Koodi [Valitse] Laajenna


<div id="MRHeader">
<a href="http://cutemachines.com/forums/index.php"><img src="http://cutemachines.com/forums/Themes/PSPTheme_Fixed/images/logo.gif" width="780" height="110" alt="Cute Machines Logo" title="Cute Machines Logo" /></a>
</div>


Use the style

Koodi [Valitse] Laajenna


#MRHeader {
   background-image:  url(images/head_bg.gif);
   text-align:center;
   margin-top:0px;
   margin-bottom:0px;
   padding:0px;
}

For reference, the reason it wasn't centered in IE is that the wrapper table cell had a width of 760px defined. This forced IE to don't take the whole screen for the cell, so the resulting image was centered in that 760px.

[simpleTVT]

Koodi [Valitse] Laajenna

<div id="MRHeader">
<a href="http://cutemachines.com/forums/index.php"><img src="http://cutemachines.com/forums/Themes/PSPTheme_Fixed/images/logo.gif" width="780" height="110" alt="Cute Machines Logo" title="Cute Machines Logo" /></a>
</div>
When i replace the code with this is get:

Koodi [Valitse] Laajenna

Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in index.template.php on line 220

Any ideas

[simpleTVT]

Fixed it.