Text Alignment differs from IE7 \ Firefox

[sphilip]

This is odd. If I open my forums using Firefox, which is what I've been skinning it with, the text in the forum is left justified as it should be. If I open it in IE7 the text is all centered.

I'm hoping someone has seen something like this before? Thanks in advance.

the site's can be found at http://scclan.hostpimps.com/phpBB3

Firefox...


IE7...

[Phil]

Moving to Styles support.

[Raimon]

open overall_header.html

search:

Code: Select all

<div align="center">
  <table width="1000" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><div align="center">
        <table width="1000" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images/template_01.jpg" alt="logo" width="1000" height="121" /></td>

          </tr>
          <tr>
            <td><table width="1000" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="1"><img src="/images/topmenu_06.jpg" width="43" height="32" /></td>
                <td width="213" background="/images/topmenu_07.jpg">&nbsp;</td>
                <td valign="bottom" background="/images/topmenu_07.jpg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td>

					<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="5%">&nbsp;</td>
    <td width="95%">
		<div align="center" class="mainmenu">
		<a href="/"><strong>Home</strong></a> | <a href="/phpBB2/"><strong>Forums</strong></a> | <a href="/downloads.php"><strong>Downloads</strong></a> | <a href="/phpBB2/profile.php?mode=register"><strong>Register</strong></a></div>

	</td>
  </tr>
</table>
</td>
                    </tr>
                </table></td>
                <td width="1"><img src="/images/topmenu_09.jpg" width="213" height="32" /></td>
                <td width="1"><img src="/images/topmenu_10.jpg" width="37" height="32" /></td>
              </tr>
            </table></td>

          </tr>
        </table></div>

deleted it

search:

Code: Select all

<div class="wrap">

add before :

Code: Select all

<div align="center">
  <table width="1000" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>
	    <div align="center">
            <table width="1000" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td><img src="/images/template_01.jpg" alt="logo" width="1000" height="121" /></td>
                </tr>
                <tr>
                    <td>
					    <table width="1000" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="1"><img src="/images/topmenu_06.jpg" width="43" height="32" /></td>
                                <td width="213" background="/images/topmenu_07.jpg">&nbsp;</td>
                                <td valign="bottom" background="/images/topmenu_07.jpg">
								    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td>
					                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
												    <tr>
                                                        <td width="5%">&nbsp;</td>
                                                            <td width="95%">
		                                                        <div align="center" class="mainmenu">
		                                                            <a href="/"><strong>Home</strong></a> | <a href="/phpBB2/"><strong>Forums</strong></a> | <a href="/downloads.php"><strong>Downloads</strong></a> | <a href="/phpBB2/profile.php?mode=register"><strong>Register</strong></a>
																</div>
                                                            </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
				                </td>
                                <td width="1"><img src="/images/topmenu_09.jpg" width="213" height="32" /></td>
                                <td width="1"><img src="/images/topmenu_10.jpg" width="37" height="32" /></td>
                            </tr>
                        </table>
			        </td>
                </tr>
            </table>
		</div>
	  </td>
	</tr>
   </table>
</div>

after that refresh your template ( acp -> styles -> templates -> refresh ).

[sphilip]

Thank you so much for the assistance and detailed explanation. It worked perfectly. phpBB's support forums are second to none, thank again.

[Evil derboy]

I'm having a similar problem with my site. Text seems to shift across to the right in Firefox but displays OK in IE7.

My site is http://www.performance-audi.co.uk

IE7


Firefox

[GTK]

The Truth is that IE7 is displaying it wrongly (although it looks as if it is correct)

to figure out the problem you need to download FireFox + Firebug

after you do so open 2 pages, one with the default style (ProSilver) and one with the modified style

click on the shifted image and select "Inspect Element" ... this will open the Firebug extension at the end of the browser. this is 2 images one with the prosilver on with the modified prosilver you have

Original ProSilver



Your Modified ProSilver



what i have noticed is the Extra 40 in padding (which Firefox did display) and IE did not (which is a negative for IE)

what you have to do is remove that extra 40 from the css files

i hope this is the right solution

good luck

[Evil derboy]

Hi. Thanks very much for taking the time to reply. I've followed your advice but unfortunately that doesn't seem to be a solution. if you remove the 40 padding that does solve the issue of the icons on the right but there are other problems as well. The last poster isn't aligned properly on the topic table and the category text isn't aligned properly either. It's almost as if it's being pushed over too far but firebug doesn't show any padding for those items.

What I'm really baffled about is that I haven't modified any of those files what-so-ever. The only files that I changed were the overall_header and the overall_footer. I'd be really grateful if you had any other ideas on this.

Thanks again for giving it your attention.

Derek