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.

Members fund testing for the Drupal project. Drupal Association Learn more


srobert72’s picture


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

Les Lim’s picture

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.

matteogeco’s picture


stongo’s picture

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 />';
Geijutsuka’s picture


quicksketch’s picture

Status: Needs review » Fixed
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.

quicksketch’s picture

Title: .clear-block in default filefield formatter breaks node layouts with floated elements » Remove .clear-block in default filefield formatter which breaks node layouts with floated elements

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.