On Firefox, on many pages (e.g. content, blocks, views, people, etc) the #action-links block (which is float:left) pushes the #content-wrapper (also float:left) block to the right, causing a horizontal scrollbar to appear and the main content of the page (#content-wrapper) to be partially outside the viewport (unless the user scrolls to the right). (see attached screenshot #1)

This happens both on the "Material" skin and the default appearance (no skin).

One solution would be to simply add the "clear: both" (or "clear: left") property to #content-wrapper (see attached screenshot #2).

However I don't understand why those blocks need to be floated, so maybe I'm missing something and the solution is not that simple...

CommentFileSizeAuthor
#4 2473881-diff-log.png11.29 KBANDiTKO
#2 firefox_action_links-2473881-2.patch325 bytesjoelpittet
action-links-content-wrapper-float.png29.4 KBs427
action-links-content-wrapper-float-clear.png33.5 KBs427
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

joelpittet’s picture

joelpittet
Primary language English
Location Vancouver
CreditAttribution: joelpittet commented

I was going to report this as well, clear: both sounds like a reasonable solution. But I agree, if it can be avoided it would be nice to not have them floated.

joelpittet’s picture

joelpittet
Primary language English
Location Vancouver
CreditAttribution: joelpittet commented
Status: Active » Needs review
FileSize
firefox_action_links-2473881-2.patch325 bytes

How about a micro clearfix?

joelpittet’s picture

joelpittet
Primary language English
Location Vancouver
CreditAttribution: joelpittet commented
Status: Needs review » Needs work

Well I think maybe just remove the float: left on it would be an easier and better solution. And there are two properties for list-style-type.

ANDiTKO’s picture

ANDiTKO CreditAttribution: ANDiTKO as a volunteer commented
Status: Needs work » Closed (fixed)
FileSize
2473881-diff-log.png11.29 KB

Fixed by removing the float: left and making the display from "block" to "inline-block". The float was nessesary to properly do the wave effect in the material skin.

But it works perfectly now with the "inline-block" property. And firefox renders it correctly now.

Thank you @s427 and @joelpittet!

Changes committed to the latest dev version.