Annoying table problem with FireFox

[sqthreer]

I am building a new theme from the default SMF theme for my forum. The problem lies somewhere within Display.template, and is near the user information area. I'll just show a picture first off of what the main problem is.

http://img.photobucket.com/albums/v126/sqthreer/ss1.png

The right border of the user's information cells don't align correctly as you can see in the lighted area on that screenshot.

And a lot of times it looks like this: http://img.photobucket.com/albums/v126/sqthreer/ss2.png

It's different every time you refresh, sometimes it's not very bad, sometimes it's even worse than the second picture I put up there. By the way those screenshots are from me applying the theme to my forum without letting the other users view it since it's not done yet. I discovered the problem the first time I did this because it apparently only does it with multiple and different users.

Here's the code for that little area, I don't know if it has anything to do with the problem, and I can show more code if needed:

Code Select Expand

// Show information about the poster of this message.
echo '
<table style="border: 1px solid #cccccc;" width="100%" cellpadding="2" cellspacing="0" style="table-layout: fixed;">
<tr>
<td width="115" bgcolor="#eef5ff" valign="top" rowspan="2" style="border-right: 1px solid #666666; overflow: hidden;">
<div style="background-color: #ffffff; padding: 0px; font-size: 11px; overflow: hidden;"><b>', $message['member']['link'], '</b></div>
<div class="smalltext"><div style="background-color: #ffffff; padding: 0px 0px 2px 0px; border-bottom: 1px solid #cccccc;">';

Another strange thing is that it works perfectly in IE whereas I usually have the problems with IE instead of FireFox.

Unfortunately I don't really have a place set up where you'd be able to view the problem first hand. Like I said before I'd show you the seperate forum I'm working on but it doesn't appear there since there are only a few users that I created to test various things.

Sorry about the lack of information, I'm just not sure what specifically you would need to help with this. If anyone knows a quick fix that'd be great but I don't expect that to happen.

Thanks to all who help.

[sqthreer]

Anyone got some answers?

[Tim]

Try adding a min-width: X px to the style

[sqthreer]

Ok I tried that and it's still got the same problem. I also realized I had two inline styles in that tag so I updated the code with what I have there now.

There's another thing I forgot to bring up before, but it has a hard time just keeping the forum the defined width which is 780 pixels. Most pages not including the index stretch the forum by about 10 to 20 pixels to the right. It's not really noticeable but an annoyance nonetheless.

I also have this extension for firefox which allows me to middle click and hold to scroll the page up and down. When I accidentally used this inside someones large signature that exceeded the overflow limit (which I had set to scroll) it would stretch the page by a few pixels. I don't understand this at all...

[Tim]

try taking this out as an attribute and putting it in the style
width="120px"

by the way, a browser will always interpret the width attribute as in pixels

[sqthreer]

It would be width: 120px in the style right? I'm sort of new to CSS. If that's correct I tried it and it still doesn't work :/

And I'm just so used to putting in the 'px' I don't know why , It doesn't hurt anything though so oh well.

[bloc]

Does taking out the inline min-width and max-width attributes change anything? I would try that and exchange width="120px" with just width="120".

[sqthreer]

Ok I was getting somewhere for a while. I took out the all the width modifying styles and put in width="115".

I also scrolled down a bit and found the <div> surrounding the avatar. It was set to 100% so I changed it to 115. It seemed to work and I realized something while it was doing good. All the borders were aligned correctly but the users without avatars's cell was 5 pixels shorter. I measured the pixel of each cell with this FF extension and the avatarless cells were 115 pixels, while the avatar'd cells were 120. Then I refreshed without changing any code and it went back to making the cells long and random widths.

This is quite the frusterating problem :/

If it helps or has anything to do with it, here's the code for the following collumn:

Code Select Expand

<td style="padding: 0px;" valign="top" width="640" height="100%">
<table width="640px" cellpadding="3" cellspacing="0" border="0"><tr bgcolor="#eef5ff">

I'm really at a loss here.