CSS: new clearing class
| Project: | Drupal |
| Version: | 4.7.0 |
| Component: | base system |
| Category: | task |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
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.
| Attachment | Size | Status | Test result | Operations |
|---|---|---|---|---|
| cssclear.patch | 5.31 KB | Ignored | None | None |
#1
Updated patch for HEAD.
Also reintroduced the * html after talking with Steven, I was thinking too hard about that one :-)
#2
awesome ted.
#3
FYI, http://www.positioniseverything.net/ where this clearing class technique is borrowed from is certainly considered the definitive resource on cross browser CSS techniques.
#4
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.
#5
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
#6
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.
#7
+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.
#8
Updated for HEAD.
#9
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.
#10
Sounds good to me, here is a new one freshly updated for HEAD.
#11
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.
#12
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 :-)
#13
COmmitted to HEAD. Please document in the theme upgrade docs.
#14
Docs have been updated: http://drupal.org/node/64292#clear
#15
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.
#16
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.
#17
#18
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
#19
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.