This is quite an anal problem (but when it comes to look I tend to be...)
FF doesn't like 100% as a height/width option for divs... Therefore (as you can see in the demo on this site), the bottom of the chat window and the smileys window (on a standard loadup, ie with the online and smilies showing) aren't aligned correctly. To be precise the smilies window is 2px too high.
I've done problemsolving on this, and I've worked out what the problem is... When FF tries to do height: 100%; for the chat window, it infact does 100% of the containing div, rather than 100% of the space available inside it's container. So the chat window is actually 2px too big, resulting in it sticking out at the bottom a little bit, thus why the smilies window is that 2px higher, as by contrast it has an absolute bottom of 0, which is absolute of the space inside rather than the outside of the containing div.
Now I've managed to sort this problem for the standard display by ammending the css template file. This I recommend you implement even if nothing else is taken from this as it is probably a better way to do it. Rather than setting the height to 100% of the container, the best way to do it is also set the absolute bottom of the chat window to 0, resulting in the top, left and bottom always being at maximum inside the container.
However, this still leaves one problem... When you close one of the who's online/smilies boxes, the alignment is again out (2px too high at the top for smilies, 2px too low at the bottom for who's online). The reason being, when they are resized (line 971 of templates/pfcclient.js.tpl.php - the "refresh_OnlineAndSmileys" function) the remaining of the who's online/smilies window is set to 100%...
I'm having a bit of trouble working out exactly how this command works... This is the function:
- Code: Select all
refresh_OnlineAndSmileys: function()
{
var onlinediv = $('<?php echo $prefix; ?>online');
var smileysdiv = $('<?php echo $prefix; ?>smileys');
var style = $H();
if (this.showwhosonline)
{
style['height'] = '';
Element.setStyle(smileysdiv, style);
}
else
{
style['height'] = '100%';
Element.setStyle(smileysdiv, style);
}
if (this.showsmileys)
{
style['height'] = '';
Element.setStyle(onlinediv, style);
}
else
{
style['height'] = '100%';
Element.setStyle(onlinediv, style);
}
// for IE7 CSS refresh
// if fixes the smiley and online boxes resize problem on IE6
if (document.recalc) setTimeout('document.recalc(true);', 0);
}
I can see how this would set it to either hidden of taking up the whole height, but how does this bring it back to the size set in the css for when both boxes are shown?
My first reaction when I saw 100% was to think 'lets change the 100% to instead set absolute values for the top/bottom'... However, as I'm guessing the 100% also sets it back to the css percentage for when both boxes were there, I don't think that one would work.
Sorry if the post didn't make much sense... I can try to clarify anything that was non-sensical. Any ideas on how to solve the problem? I know it's only 2px, but it bugs me!
