The current CSS clearing class in core is well, ... not so great :-) It works, but it forces an extra BR in there which isn't too elegant.

The most widely used technique for clearing can be found here: http://www.positioniseverything.net/easyclearing.html

So why not use that? With proper CSS source ordering now and a proper cleanup of code, now let's start refactoring and adding in useful CSS classes :-)

This patch does that, it adds in a useful CSS clearing class (I've used this on multiple sites, browsers, OSes, no problems). I've cleaned up the actual code because it makes use of the Star HTML hack which no longer works in IE7. The code I put in works around this using the underscore hack, which is still valid markup, but only works in WinIE for whatever reason.

And if you don't like this or want to use it on your site, well with CSS files being in an array now, it's easy to turn off defaults.css so go ahead and do that :-)

Patch is backwards compatible with people using the br class="clear" ... but now the BR is not needed.

CommentFileSizeAuthor
#12 clear_1.patch6.55 KBm3avrck
#10 clear_0.patch5.56 KBm3avrck
#8 clear.patch5.5 KBm3avrck
#1 css_clear.patch5.51 KBm3avrck
cssclear.patch5.31 KBm3avrck
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

m3avrck’s picture

m3avrck CreditAttribution: m3avrck commented
FileSize
css_clear.patch5.51 KB

Updated patch for HEAD.

Also reintroduced the * html after talking with Steven, I was thinking too hard about that one :-)

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented
Status: Needs review » Reviewed & tested by the community

awesome ted.

m3avrck’s picture

m3avrck CreditAttribution: m3avrck commented

FYI, http://www.positioniseverything.net/ where this clearing class technique is borrowed from is certainly considered the definitive resource on cross browser CSS techniques.

drumm’s picture

drumm
he/him
Location NY, US
CreditAttribution: drumm commented
Status: Reviewed & tested by the community » Needs review

Since this would be the first IE hack in Drupal core and the technique does come with a section called "A Word Of Warning (this is important!)", this needs another review.

quicksketch’s picture

quicksketch
he/him
CreditAttribution: quicksketch commented
Status: Needs review » Reviewed & tested by the community

I'm not a fan of CSS hacks in any way, but on a large scale deployment I think that this would be the right move for the future. For a couple reasons:

* The current method for using BR tags in combination with clear is a hack, it's just not in the CSS. Instead we're left with dozens or hundreds of BR tags across a site whose purpose is to overcome a shortcoming in nonstandards-compliant browsers.

* We're correcting this problem to make older browser work the way they should. At the very least, we're consolidating all the hacks into one spot, rather than across the entire site in the HTML marukp. As the web becomes more standards-compliant, we'll be glad that we've already designed sites according to w3c specifications.

* This shouldn't affect future browsers that become standards-compliant. Read Steven Wittens (the Bluebeach author) blog on IE7, Drupal, and CSS hacks (http://www.acko.net/blog/the-ie7-myth).

* In my opinion the ugliest hack in the whole group is the IE/Mac hack. However, this browser is nearly entirely dead (thank goodness) and we're only using it to be backwards compatible. This is one of the only 3 "safe" hacks supported on quirksmode.org.

So, after much thought, I also give this +1

frjo’s picture

frjo CreditAttribution: frjo commented

I concur with quicksketch so +1 from me also. I have used this technique in both Drupal and on other sites and it works really well.

ejort’s picture

ejort CreditAttribution: ejort commented

+1 from me also. Throwing br's everywhere is a MUCH bigger hack IMO than applying this clearing class.

The CSS itself uses standards compliant methods to achieve it's effect so it is forwards compatible.

It only relies on specifically targeted hacks for IE browsers < version 7. Given that these hacks are known to work reliably in the older browsers and are also known be compatible with the upcoming version 7 they should be considered safe.

m3avrck’s picture

m3avrck CreditAttribution: m3avrck commented
FileSize
clear.patch5.5 KB

Updated for HEAD.

drumm’s picture

drumm
he/him
Location NY, US
CreditAttribution: drumm commented
Status: Reviewed & tested by the community » Needs work

I talked with Steven about this and we are both okay with this patch.

Steven suggested calling the new class 'clear-block', which I think is a good idea. The reasoning is that a 'clear' class is useful for the old style behavior (in your own theme of course, and please not on br again). It is a bit more accurate.

m3avrck’s picture

m3avrck CreditAttribution: m3avrck commented
Status: Needs work » Reviewed & tested by the community
FileSize
clear_0.patch5.56 KB

Sounds good to me, here is a new one freshly updated for HEAD.

drumm’s picture

drumm
he/him
Location NY, US
CreditAttribution: drumm commented
Status: Reviewed & tested by the community » Needs work

One last thing... there is a <br class="clear"> left in theme_user_filters() in user.module.

There are various clears elsewhere, which should be cleaned up at some point, but we don't need them for this patch. I can't find anything else.

m3avrck’s picture

m3avrck CreditAttribution: m3avrck commented
Status: Needs work » Reviewed & tested by the community
FileSize
clear_1.patch6.55 KB

Ok here's and updated patch with that extra clear removed. I grepped for a bit and I can't locate any other ones.

Should be good now :-)

drumm’s picture

drumm
he/him
Location NY, US
CreditAttribution: drumm commented
Status: Reviewed & tested by the community » Fixed

COmmitted to HEAD. Please document in the theme upgrade docs.

m3avrck’s picture

m3avrck CreditAttribution: m3avrck commented

Docs have been updated: http://drupal.org/node/64292#clear

kiz_0987’s picture

kiz_0987 CreditAttribution: kiz_0987 commented

Great idea. I was wondering though if "content" in node.tpl also needs a clear-block? That way when I put floated images into a node they get cleared before the links section.

drumm’s picture

drumm
he/him
Location NY, US
CreditAttribution: drumm commented

Please post a separate issue for each instance of adding the clearing class.

I've observed node clearing be a problem on the stacked trimmed/full previews.

Anonymous’s picture

(not verified) CreditAttribution: commented
Status: Fixed » Closed (fixed)
dharmanerd’s picture

dharmanerd CreditAttribution: dharmanerd commented
Version: x.y.z » 5.9
Category: task » bug
Status: Closed (fixed) » Active

This causes problems for me as it pushes the content about 500 px down below the tabs (div id="tabs-wrapper" class="clear-block"). Please remove it from the core. Below lists a better method using overflow auto for wrappers.

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

I used

.clear-block:after {
display: none;
}

in style.css to fix this.

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.0.3) Gecko/2008092414 Firefox/3.0.3

JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin commented
Version: 5.9 » 4.7.0
Category: bug » task
Status: Active » Closed (fixed)

Steve, if you are having issues with this style, you probably want to open a separate support request. I've been using this method for 4 years and not seen any 500px shifting effects.