[3995] [Curve] Safari "float:left" signature display

[Diabolo.ca]

I've noticed that the signature line as well as the "logged" image end up pushed off the right of the screen on some posts with Curve in SMF 2.0 RC2 using Safari 4.0.3 on OS X 10.6.1. This happens with a fresh install of SMF. Only shorter posts are affected, otherwise the signature ends up below the post as it should. See the attached screenshot.

As far as I can tell, the offending CSS code is from webkit.css, which contains only:

Code Select Expand


.postarea .post
{
  float: left;
}

For the reason:

Code Select Expand

/* special styles for Safari (and other Webkit based browsers like Chrome)
Webkit needs this otherwise the post goes off to the right.
Causes issues in IE browsers in (and cached search engines pages it breaks them).
*/


However, if I remove the "float: left" style then the alignment looks fine and I do not see the behaviour that this code is meant to fix.

Alignment looks fine in Chrome 4.0.237.0 for OS X either way.

[SleePy]

Seems related to Bug #3995: Safari has broken layout in curve

[Brettflan]

Yeah, this one wasn't broken in RC2 charter for one reason, this current CSS in index.css:

Code Select Expand

/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
    overflow: auto;
    line-height: 1.4em;
    padding: 0.1em 0;
}

In RC2 Charter it had "width: 100%;" in there as well, which was removed for the public release. Adding that back in fixes the problem as well. I'm sure there was some reason it was removed, though.

EDIT: also, I notice another bug report on the same thing:
http://dev.simplemachines.org/mantis/view.php?id=3924

[zAlbee]

I agree diabolo, I think the so-called "fix" in the RC2 webkit.css file is bad. You noticed it with the signature in Safari; I also notice it in attachment previews, and "edit" notification line in Chrome 3.0.195.32 (Windows). It is happening on this very forum!

Removing float:left from webkit.css fixes it.

Adding width:100% does not fix it, as you see in my screenshot, that CSS rule is already applied from index.css and is not over-ridden, yet it (I think it is RC2 Charter) still has the bug.

[Brettflan]

That "width: 100%" is definitely removed in RC2 Public, actually. It was indeed present in RC2 Charter.

Adding it back does fix the specific issue he was talking about, but doesn't fix the attachment misalignment, as you pointed out. I had actually added this to webkit.css to fix that attachment problem, which also works:

Code Select Expand

.attachments
{
    clear: right;
}

However, if as both of you say simply removing that "float: left" fixes both problems without causing any other problems, that obviously is the better fix.

[searchgr]

I removed it and now it's ok with the attachments (safari/ipod). But there are several other problems: size of the fonts, the site loads very slow, problem with the links etc

[~DS~]

My member reporting a bug signature in Safari.

Here's a link to my Project Tool:
http://thetwoworldsforum.com/index.php?issue=7.0