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.

Comments

Subscribe.

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

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.

Subscribing

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 />';

subscribing

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

Title:.clear-block in default filefield formatter breaks node layouts with floated elementsRemove .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.