Remove .clear-block in default filefield formatter which breaks node layouts with floated elements [#684018]

theme_filefield_file() right now returns a DIV with the clear-block class, presumably because it contains a floated icon that it wants to clear.

The problem with having clear-block or clearfix at the field level, though, is that it doesn't play nice with floats elsewhere in the node. See the attached screenshot with the clear-block; .clear-block (or rather, .clear-block:after) is pushing out to clear past the floated imagefield image.

I'm not sure that float clearing is really necessary in the default generic formatter, so here's a patch taking it out, with another screenshot after the fix.

Comment	File	Size	Author
#6	filefield_style_fixes.patch	4.13 KB	quicksketch
	filefield_without_clear-block.png	47.03 KB	Les Lim
	filefield-remove-clear-block.patch	453 bytes	Les Lim
	filefield_with_clear-block.png	44.03 KB	Les Lim

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

srobert72 CreditAttribution: srobert72 commented 14 January 2010 at 07:20

Subscribe.

It solves problem under which browser ?
I think I have same issue but only under IE7, do you confirm ?

Comment #2

Les Lim

he/they

English

CreditAttribution: Les Lim commented 15 January 2010 at 02:09

srobert72: Actually, no. In this case, IE6 and IE7 should both display fine without the patch. The problematic CSS is part of .clear-block:after, which affects only modern browsers that recognize the :after pseudo-class. That would include Firefox, Safari and IE8.

Comment #3

matteogeco CreditAttribution: matteogeco commented 2 March 2010 at 13:47

Subscribing

Comment #4

stongo CreditAttribution: stongo commented 17 March 2010 at 14:07

I had to add a break at the end of the patched line to make it work properly

  return '<div class="filefield-file">'. $icon . l($link_text, $url, $options) .'</div><br />';

Comment #5

Geijutsuka CreditAttribution: Geijutsuka commented 5 June 2010 at 23:28

subscribing

Comment #6

quicksketch

he/him

CreditAttribution: quicksketch commented 29 June 2010 at 23:48

Status:

Needs review

» Fixed

File	Size
filefield_style_fixes.patch	4.13 KB

lesmana correctly identified the reason for the "clear-block" class in the original description: "presumably because it contains a floated icon that it wants to clear."

This is correct. That means that in order to remove the "clear-block" class we need to remove the DIV around the icon that needs to be floated. Since I can't find any reason for putting a wrapper around the icon at all (it's already going to be the only image inside of a .filefield-file div), I'd prefer to just remove the wrapper around the icon entirely and let the image display as it would normally.

While looking at our CSS and markup, I also couldn't find any reason for several of our styles and the RTL support is pretty inaccurate. I've committed these changes which also include the removal of the clear-block class.