MyBB Community Forums

Full Version: Portal Appearance in Internet Explorer is different to Firefox
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Ok so if you go to www.mx5atlanta.com in firefox, it looks lovely. Everything fits inside the page container and everyone's happy. However, if you use internet explorer it looks like the attachment.

[attachment=9984]

The page container is set to a width of 1000 pixels and it has that little /ie 5 fix stuff already in the extra css section. I'm really a bit miffed as to why this is happening. The major difference I see is that Firefox allows for the inner scrolling of the larger pictures on the portal while IE does not. And I think that is what blows it all out of proportion. But if that was the case, then why does the page container width seemingly expand too?

Thanks for your time,

Jack
Here is my portal template

Quote:<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
</head>
<body>
{$header}
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0" align="center">
<tr><td valign="top" width="200">
{$welcome}
{$pms}
{$search}
{$whosonline}
{$stats}
</td>
<td>&nbsp;</td>
<td valign="top">
{$announcements}
</td>
<td>&nbsp;</td>
<td valign="top" width="200">
{$latestthreads}
</td>
</tr>
</table>
{$footer}
</body>
</html>

And here is the portal Announcement template that lets everything work fine on Firefox and Opera.

Quote:<table cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>{$icon} <a href="{$mybb->settings['bburl']}/showthread.php?tid={$announcement['tid']}">{$announcement['subject']}</a></strong></td>
</tr>
<tr>
<td class="trow2" align="right">
<span class="smalltext">{$lang->posted_by} <a href="{$mybb->settings['bburl']}/member.php?action=profile&amp;uid={$announcement['uid']}">{$announcement['username']}</a> - {$anndate} {$anntime} {$numcomments}</span>
</td>
</tr>
<tr>
<td class="trow1">
<table border="0" cellpadding="{$theme['tablespace']}" width="100%"><tr>{$avatar}<td class="trow1"><div style="max-height: 300px; overflow: auto;"><div style="max-width: 475px; overflow:auto;">
<p>{$message}</p>{$post['attachments']}
</div></div></td></tr>
<tr><td align="right" colspan="2" valign="bottom"><span class="smalltext"><a href="{$mybb->settings['bburl']}/printthread.php?tid={$announcement['tid']}"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/printable.gif" alt="" /></a>&nbsp;<a href="{$mybb->settings['bburl']}/sendthread.php?tid={$announcement['tid']}"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/send.gif" alt="" /></a></span></td></tr>
</table>
</td>
</tr>
</table>
<br />

Is there something specific I need to do in order for IE to let it scroll??
Have you tried setting the width to: 95%?
Yep. And IE still runs on it's on rule.
Have you tried a fixed width in pixels and also have you set any width to the boxes on the left and right side?
Yep. I put it back on fixed width and I've messed with the different sizes of the boxes to make them fit. On firefox it's how I want it to be. On IE it's still shagged.
(2008-07-24, 05:19 PM)jdmaddox Wrote: [ -> ]
Quote:<table cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>{$icon} <a href="{$mybb->settings['bburl']}/showthread.php?tid={$announcement['tid']}">{$announcement['subject']}</a></strong></td>
</tr>
<tr>
<td class="trow2" align="right">
<span class="smalltext">{$lang->posted_by} <a href="{$mybb->settings['bburl']}/member.php?action=profile&amp;uid={$announcement['uid']}">{$announcement['username']}</a> - {$anndate} {$anntime} {$numcomments}</span>
</td>
</tr>
<tr>
<td class="trow1">
<table border="0" cellpadding="{$theme['tablespace']}" width="100%"><tr>{$avatar}<td class="trow1"><div style="max-height: 300px; overflow: auto;"><div style="max-width: 475px; overflow:auto;">
<p>{$message}</p>{$post['attachments']}
</div></div></td></tr>
<tr><td align="right" colspan="2" valign="bottom"><span class="smalltext"><a href="{$mybb->settings['bburl']}/printthread.php?tid={$announcement['tid']}"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/printable.gif" alt="" /></a>&nbsp;<a href="{$mybb->settings['bburl']}/sendthread.php?tid={$announcement['tid']}"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/send.gif" alt="" /></a></span></td></tr>
</table>
</td>
</tr>
</table>
<br />

Is there something specific I need to do in order for IE to let it scroll??

To fix this error in IE also to make it better (in my opinion) change
<div style="max-height: 300px; overflow: auto;"><div style="max-width: 475px; overflow:auto;">
to
<div style="width: 400px; height: 300px; overflow:auto;">
(i noticed you changed the 475 to 400, or atleast the page loads with them at 400...)
Also remember to delete the extra </div> from </div></div></td></tr>

In my opinion it looks better if the two scroll bars are together instead of seperate. Which is why i grouped the two divs together.

Just one final thing to say ... You might want to fix the coding errors on the page:
http://validator.w3.org/check?uri=http%3...ne&group=0
Thanks alot I'll try it out and report back!
Thanks alot mate it works!
Its not perfect.. However, it does work. To make it much better i would get rid of the image(avatar) that displays to the left of the post (if the user has one) and make it so the post takes up the whole box. Either that or make it so that section on the left side is a fixed size.