Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
Okay, this is confusing. Hold on to your socks.
The .clearfix
method of clearing divs does not always play well with 960.gs in IE6 (haven't tried IE7). The problem is twofold:
- If a div is assigned a
container-X
class, you must add theclearfix
class after it, like so:<div class="container-12 clearfix">
. - If a div is assigned a
grid-X
class, addingclearfix
will break your layout. You must used an "inner" div instead, like so:<div class="grid-8"><div class="clearfix">My content</div></div>
This is the pattern I have observed so far. I'm sure there will be more to come.
Comments
Comment #1
dvessel CreditAttribution: dvessel commentedI was afraid of this. IIRC, IE7 can fall apart also with clearfix in some situations. I think setting clearfix might be the cause of the other issue too (#422006: reset.css adds 1-2 pixels to bottom of page). The clearfix method does that :after content to self clear and the height of that generated content must be interfering with the line height.
I'll check this all out on the weekend. Oh, and this reminded me that .clear-block was renamed to .clearfix in HEAD for Drupal core. I just committed the change.
Comment #2
Todd Nienkerk CreditAttribution: Todd Nienkerk commented@dvessel: I'm sure you've already seen this, but check out my note regarding clearfix and the reset.css/1-2 pixels bug. Initial tests suggest they're separate.
I've been doing a lot of research into clearfix lately -- guess why? It's breaking! -- and I'm sorry to say I haven't adequately tested any of this in IE7. (I will try to check it out later today.)
I can say, however, that the IE6 fix described above does work in IE7. I'm just not sure if the underlying problem -- class order -- will break IE7 as well.
Anyway, I made this a "documentation" issue because (1) someone else will likely run into this problem, and (2) I don't think it can (or should) be fixed using CSS. IE6 is not worth the time or headache, especially since this can be solved by reordering classes and using inner divs.
Comment #3
Todd Nienkerk CreditAttribution: Todd Nienkerk commentedAdded this to README.txt.
Comment #4
johnantoni CreditAttribution: johnantoni commentedyou could always use the following, been working fine for me for years.
Comment #5
dvessel CreditAttribution: dvessel commentedMarking this as needing review. The latest dev uses another clearing method copied from 960.gs source.
Might want to zero out the line-height which I normally do like johnantoni.
from 960.css: