BUG: SMF 1.1 RC2 Child Boards Cause IE To Mess Up Column Width

Started by motumbo, January 01, 2006, 02:45:31 PM

Previous topic - Next topic
Print
Go Down Pages1
User actions

motumbo

January 01, 2006, 02:45:31 PM
I don't know if this is a bug with SMF or with Internet Explorer.  I suspect IE since it looks perfect in Firefox.  Regardless, I hope there is a work-around for this.

If you have a category with a board that has child boards, the names of the child boards cause the "# posts in # topics" column to be very wide (see "Parent Board").  I am using 1.1 RC2 and IE 6.0.2900.2180.xpsp_sp2rtm.xxxxxx.  My IE is completely pathched with all the latest service packs and cumulative patches.  (I never use IE, though, because it sucks so bad.)

I looked at the HTML code and can find absolutely no reason why this column width is screwed up.  But since 85% or more of internet surfers use IE, this is going to be an issue.  I also can't imagine that it is only my version of IE that is screwed up.  Others will have this problem, too, I'm sure. 

Here is a picture of the problem:

http://photobucket.com/albums/d133/motumbo55/?action=view&current=SMF_RC2_Bug_Pic.jpg

Can anyone help with a workaround???

Here is the HTML code source from the webpage generated:

Code Select

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="IE Bug Test - Index" />
<meta name="keywords" content="PHP, MySQL, bulletin, board, free, open, source, smf, simple, machines, forum" />
<script language="JavaScript" type="text/javascript" src="http://127.0.0.1/rc2new/Themes/default/script.js?rc2p"></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "http://127.0.0.1/rc2new/Themes/default";
var smf_images_url = "http://127.0.0.1/rc2new/Themes/default/images";
var smf_scripturl = "http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;";
// ]]></script>
<title>IE Bug Test - Index</title>
<link rel="stylesheet" type="text/css" href="http://127.0.0.1/rc2new/Themes/default/style.css?rc2" />
<link rel="stylesheet" type="text/css" href="http://127.0.0.1/rc2new/Themes/default/print.css?rc2" media="print" />
<link rel="help" href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=help" target="_blank" />
<link rel="search" href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=search" />
<link rel="contents" href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;" />
<link rel="alternate" type="application/rss+xml" title="IE Bug Test - RSS" href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;type=rss;action=.xml" />

<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header = false;

function shrinkHeader(mode)
{
document.cookie = "upshrink=" + (mode ? 1 : 0);
document.getElementById("upshrink").src = smf_images_url + (mode ? "/upshrink2.gif" : "/upshrink.gif");

document.getElementById("upshrinkHeader").style.display = mode ? "none" : "";
document.getElementById("upshrinkHeader2").style.display = mode ? "none" : "";

current_header = mode;
}
// ]]></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var current_header_ic = false;

function shrinkHeaderIC(mode)
{
document.cookie = "upshrinkIC=" + (mode ? 1 : 0);
document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

current_header_ic = mode;
}
// ]]></script>
</head>
<body>
<div class="tborder" >
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="catbg" height="32">
<span style="font-family: Verdana, sans-serif; font-size: 140%; ">IE Bug Test</span>
</td>
<td align="right" class="catbg">
<img src="http://127.0.0.1/rc2new/Themes/default/images/smflogo.gif" style="margin: 2px;" alt="" />
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td class="titlebg2" height="32" align="right">
<span class="smalltext">January 01, 2006, 01:42:48 pm</span>
<a href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="http://127.0.0.1/rc2new/Themes/default/images/upshrink.gif" alt="*" title="Shrink or expand the header." align="bottom" style="margin: 0 1ex;" /></a>
</td>
</tr>
<tr id="upshrinkHeader">
<td valign="top" colspan="2">
<table width="100%" class="bordercolor" cellpadding="8" cellspacing="1" border="0" style="margin-top: 1px;">
<tr>
<td colspan="2" width="100%" valign="top" class="windowbg2"><span class="middletext">Welcome, <b>Guest</b>. Please <a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=login">login</a> or <a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=register">register</a>.
<script language="JavaScript" type="text/javascript" src="http://127.0.0.1/rc2new/Themes/default/sha1.js"></script>

<form action="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=login2" method="post" class="middletext" style="margin: 3px 1ex 1px 0;" onsubmit="hashLoginPassword(this, 'ad80dda55a5391ccbb1cb06f90824a41');">
<input type="text" name="user" size="10" /> <input type="password" name="passwrd" size="10" />
<select name="cookielength">
<option value="60">1 Hour</option>
<option value="1440">1 Day</option>
<option value="10080">1 Week</option>
<option value="302400">1 Month</option>
<option value="-1" selected="selected">Forever</option>
</select>
<input type="submit" value="Login" /><br />
<span class="middletext">Login with username, password and session length</span>
<input type="hidden" name="hash_passwrd" value="" />
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="upshrinkHeader2" width="100%" cellpadding="4" cellspacing="0" border="0">
<tr>
<td width="90%" class="titlebg2">
<span class="smalltext"><b>News</b>: SMF - Just Installed!</span>
</td>
<td class="titlebg2" align="right" nowrap="nowrap" valign="top">
<form action="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=search2" method="post" style="margin: 0;">
<a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=search;advanced"><img src="http://127.0.0.1/rc2new/Themes/default/images/filter.gif" align="middle" style="margin: 0 1ex;" alt="" /></a>
<input type="text" name="search" value="" style="width: 190px;" />&nbsp;
<input type="submit" name="submit" value="Search" style="width: 11ex;" />
<input type="hidden" name="advanced" value="0" />
</form>
</td>
</tr>
</table>
</div>
<table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
<tr>
<td class="maintab_first">&nbsp;</td><td class="maintab_active_first">&nbsp;</td>
<td valign="top" class="maintab_active_back">
<a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;">Home</a>
</td><td class="maintab_active_last">&nbsp;</td>
<td valign="top" class="maintab_back">
<a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=help">Help</a>
</td>
<td valign="top" class="maintab_back">
<a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=search">Search</a>
</td>
<td valign="top" class="maintab_back">
<a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=login">Login</a>
</td>
<td valign="top" class="maintab_back">
<a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=register">Register</a>
</td>
<td class="maintab_last">&nbsp;</td>
</tr>
</table>
<div id="bodyarea" style="padding: 1ex 0px 2ex 0px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="bottom"><div class="nav" style="font-size: smaller; margin-bottom: 2ex; margin-top: 2ex;"><b><a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;" class="nav">IE Bug Test</a></b></div></td>
<td align="right">
</td>
</tr>
</table>
<div class="tborder" style="margin-top: 0;">
<div class="catbg" style="padding: 5px 5px 5px 10px;">
<a name="1" href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;#1">General Category</a>
</div>
<table border="0" width="100%" cellspacing="1" cellpadding="5" class="bordercolor" style="margin-top: 1px;">
<tr>
<td  class="windowbg" width="6%" align="center" valign="top"><a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=unread;board=1.0"><img src="http://127.0.0.1/rc2new/Themes/default/images/off.gif" alt="No New Posts" title="No New Posts" /></a>
</td>
<td class="windowbg2">
<b><a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;board=1.0" name="b1">General Discussion</a></b><br />
Feel free to talk about anything and everything in this board.
</td>
<td class="windowbg" valign="middle" align="center" style="width: 12ex;"><span class="smalltext">
1 Posts <br />
1 Topics
</span></td>
<td class="windowbg2" valign="middle" width="22%">
<span class="smalltext">
<b>Last post</b>  by Simple Machines<br />
in <a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;topic=1.msg1#new" title="Welcome to SMF!">Welcome to SMF!</a><br />
on <b>Today</b> at 01:19:12 pm
</span>
</td>
</tr>
</table>
</div>
<div class="tborder" style="margin-top: 1ex;">
<div class="catbg" style="padding: 5px 5px 5px 10px;">
<a name="2" href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;#2">My New Category</a>
</div>
<table border="0" width="100%" cellspacing="1" cellpadding="5" class="bordercolor" style="margin-top: 1px;">
<tr>
<td rowspan="2" class="windowbg" width="6%" align="center" valign="top"><a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=unread;board=2.0"><img src="http://127.0.0.1/rc2new/Themes/default/images/off.gif" alt="No New Posts" title="No New Posts" /></a>
</td>
<td class="windowbg2">
<b><a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;board=2.0" name="b2">Parent Board</a></b><br />
The Proud Parent
</td>
<td class="windowbg" valign="middle" align="center" style="width: 12ex;"><span class="smalltext">
0 Posts <br />
0 Topics
</span></td>
<td class="windowbg2" valign="middle" width="22%">
<span class="smalltext">
</span>
</td>
</tr>
<tr>
<td colspan="3" class="windowbg3">
<span class="smalltext"><b>Child Boards</b>: <a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;board=3.0" title="No New Posts (Topics: 0, Posts: 0)">Child Board 1</a>, <a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;board=4.0" title="No New Posts (Topics: 0, Posts: 0)">Child Board 2</a>, <a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;board=5.0" title="No New Posts (Topics: 0, Posts: 0)">Child Board 3 With Long Name</a></span>
</td>
</tr>
</table>
</div><br />
<div class="tborder" >
<div class="catbg" style="padding: 6px; vertical-align: middle; text-align: center; ">
<a href="#" onclick="shrinkHeaderIC(!current_header_ic); return false;"><img id="upshrink_ic" src="http://127.0.0.1/rc2new/Themes/default/images/collapse.gif" alt="*" title="Shrink or expand the header." style="margin-right: 2ex;" align="right" /></a>
IE Bug Test - Info Center
</div>
<div id="upshrinkHeaderIC">
<table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor">
<tr>
<td class="titlebg" colspan="2">Forum Stats</td>
</tr>
<tr>
<td class="windowbg" width="20" valign="middle" align="center">
<a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=stats"><img src="http://127.0.0.1/rc2new/Themes/default/images/icons/info.gif" alt="Forum Stats" /></a>
</td>
<td class="windowbg2" width="100%">
<span class="middletext">
1 Posts in 1 Topics by 1 Members. Latest Member: <b> <a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=profile;u=1">admin</a></b>
<br /> Latest Post: <b>&quot;<a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;topic=1.msg1#new" title="Welcome to SMF!">Welcome to SMF!</a>&quot;</b>  ( <b>Today</b> at 01:19:12 pm )<br />
<a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=recent">View the most recent posts on the forum.</a><br />
<a href="http://127.0.0.1/rc2new/index.php?PHPSESSID=qk6ciqmdqe572v34595dgn3m04&amp;action=stats">[More Stats]</a>
</span>
</td>
</tr>
<tr>
<td class="titlebg" colspan="2">Users Online</td>
</tr><tr>
<td rowspan="2" class="windowbg" width="20" valign="middle" align="center">
<img src="http://127.0.0.1/rc2new/Themes/default/images/icons/online.gif" alt="Users Online" />
</td>
<td class="windowbg2" width="100%">
1 Guest, 0 Users
<div class="smalltext">
<br />

</div>
</td>
</tr>
<tr>
<td class="windowbg2" width="100%">
<span class="middletext">
Most Online Today: <b>2</b>.
Most Online Ever: 2 (<b>Today</b> at 01:23:35 pm)
</span>
</td>
</tr>
</table>
</div>
</div>
</div>

<div id="footerarea" style="text-align: center; padding-bottom: 1ex;">
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function smfFooterHighlight(element, value)
{
element.src = smf_images_url + "/" + (value ? "h_" : "") + element.id + ".gif";
}
// ]]></script>
<table cellspacing="0" cellpadding="3" border="0" align="center" width="100%">
<tr>
<td width="28%" valign="middle" align="right">
<a href="http://www.mysql.com/" target="_blank"><img id="powered-mysql" src="http://127.0.0.1/rc2new/Themes/default/images/powered-mysql.gif" alt="Powered by MySQL" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
<a href="http://www.php.net/" target="_blank"><img id="powered-php" src="http://127.0.0.1/rc2new/Themes/default/images/powered-php.gif" alt="Powered by PHP" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
</td>
<td valign="middle" align="center" style="white-space: nowrap;">

<span class="smalltext" style="display: inline; visibility: visible; font-family: Verdana, Arial, sans-serif;"><a href="http://www.simplemachines.org/" title="Simple Machines Forum" target="_blank">Powered by SMF 1.1 RC2</a> |
<a href="http://www.simplemachines.org/about/copyright.php" title="Free Forum Software" target="_blank">SMF &copy; 2001-2005, Lewis Media</a>
</span>
</td>
<td width="28%" valign="middle" align="left">
<a href="http://validator.w3.org/check/referer" target="_blank"><img id="valid-xhtml10" src="http://127.0.0.1/rc2new/Themes/default/images/valid-xhtml10.gif" alt="Valid XHTML 1.0!" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img id="valid-css" src="http://127.0.0.1/rc2new/Themes/default/images/valid-css.gif" alt="Valid CSS!" width="54" height="20" style="margin: 5px 16px;" onmouseover="smfFooterHighlight(this, true);" onmouseout="smfFooterHighlight(this, false);" /></a>
</td>
</tr>
</table>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var window_oldOnload = window.onload;
window.onload = smf_codeFix;

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = codeFix.length - 1; i > 0; i--)
{
if (codeFix[i].currentStyle.overflow == "auto" && (codeFix[i].currentStyle.height == "" || codeFix[i].currentStyle.height == "auto") && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0) && (codeFix[i].offsetHeight != 0 || codeFix[i].className == "code"))
codeFix[i].style.height = (codeFix[i].offsetHeight + 36) + "px";
}

if (window_oldOnload)
{
window_oldOnload();
window_oldOnload = null;
}
}
// ]]></script>
</div>
</body></html>

motumbo

#1
January 01, 2006, 02:56:17 PM Last Edit: January 01, 2006, 03:10:29 PM by motumbo
I noticed SMF is using the XHTML transitional doctype.  Maybe that's the problem?  I'll check it out...

EDIT:  Changing Doctypes did not help.

Sheepy

#2
January 01, 2006, 05:23:13 PM
From my experience, IE's internal webpage model, espcially box model, which is critical to laying out XHTML, is bugged beyond any salvation.  So I'd say it's likely IE's fault. XHTML is bleeding edge to IE - it wan't formalised by the time IE was released (and no security patche will change how it handles them  >:()

For a quick look at the less annoying part of the hell, check this http://www.positioniseverything.net/explorer.html

I really can't wait the day the users switch en mass through Windows Update to IE7... provided that the IE team do what they says and actually try to update IE's standard compliancy.  :'(

motumbo

#3
January 01, 2006, 05:50:50 PM
Quote from: Sheepy on January 01, 2006, 05:23:13 PM
From my experience, IE's internal webpage model, espcially box model, which is critical to laying out XHTML, is bugged beyond any salvation.  So I'd say it's likely IE's fault. XHTML is bleeding edge to IE - it wan't formalised by the time IE was released (and no security patche will change how it handles them  >:()

Other people should be having problems with that then. Perhaps I'll rewrite the code to divs...

motumbo

#4
January 03, 2006, 02:48:24 PM
I can't believe no one else has had problems with this using IE.

Anyway, I did find a solution.  What I did was go into BoardIndex.template.php, take out the widths for each of the td tags that comprise the icon, category, post count, and last post columns and instead put a CSS class in them with corresponsing percentage width entries in style.css.

When each column has a specified percentage width (all summing to 100%), the problem disappears.  Plus, this method gives me complete control over the widths of the columns enabling me to quickly change them via the CSS.

Anik

#5
April 05, 2009, 05:15:09 AM
Does anyone fixed this problem?

In 1.1.8. I still have it :(

Bulakbol

#6
April 05, 2009, 08:30:08 AM
Try this. BoardIndex.template.php
Code (find) Select
<td class="windowbg2">
<b><a href="', $board['href'], '" name="b', $board['id'], '">', $board['name'], '</a></b><br />
replace
Quote<td class="windowbg2" width="60%">
               <b><a href="', $board['href'], '" name="b', $board['id'], '">', $board['name'], '</a></b><br />
Please do not PM me for support · My Mods and Theme · SMF Coding Guidelines · Modifications Approval Guidelines

Anik

#7
April 05, 2009, 09:52:16 AM
Great,  thanx!!! It's works now!
Hope not only in IE.

Anik

#8
April 12, 2009, 08:31:09 AM
One bug more with it

Messages count isn't centered anymore..
And column width is too large..

Bulakbol

#9
April 12, 2009, 11:41:49 PM
Try different number until you get what you think is right. 64% maybe?
Please do not PM me for support · My Mods and Theme · SMF Coding Guidelines · Modifications Approval Guidelines
Print
Go Up Pages1
User actions
Advertisement: