tanfa :: home
It had to happen, Comments off
June 12, 2006 :: 10:53
It had to happen, I suppose, I'm working on the new site as we speak and had hoped to get it changed over before the comment spam overwhelmed me completely, however that's not to be so I'm afraid the comments are off for the forseeable future
Life was turned a bit upside down on March 18th this year which means I have even less time now, and the reason for the sustained absense but hopefully I should be back real soon
Suzy on CSS on webmasterradio.fm!
March 16, 2006 :: 13:24
Tonight (GMT 9pm) I'm on webmasterradio.fm talking CSS, for a change, with some SEO and usability thrown in.
The Show is the GoodKarma show (what a great name) with host Greg Niland (aka GoodROI). I'm looking forward to it, it should be fun and different for me to actually talk rather than type!
Tune in to join the live chat and ask some questions live.. or check the archives to catch the show later..
EasyClearing, the Aslett/PIE way is NOT broken in IE7!
February 2, 2006 :: 16:47
On reading some of the comments on the IE Blog and a couple of other places, that the method of clearing floats without stuctural markup was no longer usable, I decided to run a check.
To my surprise I discovered that the method is still working, which will no doubt be a relief to some. but WHY?
Note: If you're just happy your hack is still working then you don't to need to read any further :), but if your hack isn't working then read more to find the missing ingredient..
Is it that hasLayout thing again?
... I'm glad you asked, and yes it is..
If you ignore the clever bit, the .clearfix:after {..}, for compliant browsers, IE does anyway, and only concentrate on the IE stuff (both Mac and Windows) I will try to explain why.
On Big John's demo page you will see this code:
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
However if you look at the source code, you will see it has been updated to include Alex Robinson's later discovery. This change is important to this little story and the demo code being used by PIE (at time of writing) is actually this:
.clearfix {
display: inline-block;
}
/* Holly Hack Targets IE Win only \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End Holly Hack */
note that the inline-table; has been changed to inline-block;
What's so important about that?
As Alex Robinson already noted on his page,
As a benign side-effect IE 6 now makes the entire
<a>element hoverable, something which is also only usually achievable when it has an explicit width set.
That's the clue, normally the only thing that would encourage IE6 make an entire block hoverable would be to set hasLayout to true on that block, which is why it worked when a width was set, width is one of the properties that trigger hasLayout.
In IE6, the * HTML hack was taking care of a setting hasLayout to true, by using the Holly Hack to force feed a small height, it wasn't the height itself that was important (in most cases that height would have nothing to inherit from anyway?) it was mainly just the method of triggering hasLayout.
So now if IE7 is disregarding the * HTML hack, what is it in the above code that is still triggering hasLayout?
There seems to be nothing in the above code that would set hasLayout to true according to Microsoft's list of properties that cause an element to have Layout
| CSS property | Value |
|---|---|
| display | inline-block |
| height | any value |
| float | left or right |
| position | absolute |
| width | any value |
| writing-mode | tb-rl |
| zoom | any value |
Sure there's a display: inline-block; in there but that is being overruled in the Cascade for all browsers except IE/Mac by the display: block; rule inside the Mac hiding hack isn't it?
A while back I discovered (free registration may be required), quite by accident a way to force IE to honour display:inline-block on block level elements, (previously thought to only do so on inline elements).. and it was this that led me to believe that haslayout was still somehow being triggered by inline-block, even if it was subsequently overuled by the correct display property later in the cascade
This is exactly what's happening, and I have a built proof of concept demo for the TripSwitch hasLayout trigger (view with IE to enable test to show the results). Be aware that like everything IE there is a small quirk, IE needs the two rules to be separate, to enable it to reset that actual display status but not the hasLayout status, seemingly.
Conclusion..
So this is why the Aslett method is still working, both of the ingredients for the "trip switch" are present ~ in PIE's demo anyway. And Tony's method of containing floats may still only work for you if you are serendipitously using the later IE/Mac "fix" of display:inline-block; rule and subsequently overriding it with the display:block; rule.
I was asked if that meant the Holly Hack wasn't required any more, and the answer is it's up to you.. IE5.0 does not have support for inline-block, it's only good for IE5.5+. So if it is important that you still support IE5 (Mac and/or Windows) then I would suggest leaving it place, though write yourself some notes in the CSS that the Mac fix is no longer just a Mac fix, it's likely an IE7 fix too. Obviously if you no longer need to/or never had to support IE/Mac, you still need the two rules but you would not need to hide the second one.
Feedback on and experiences with this is welcome. Even though this IE7 is still only beta, we know that the parse error hacks are no longer reliable
added: since writing this I have found this inline-block and hasLayout demonstration by Bruno Fassino which backs up this layout "trip" behaviour.
5 Muses :: {Last by NickFitzsimons} :: «þ»
IE7 Beta 2 review released
February 1, 2006 :: 09:57
Internet Explorer have released their IE7 beta 2 as a preview
This is possibly a helpful move for developers who have known there were to be many feature changes and of particular interest here is confirmation of just how it's going to affect sites built with CSS.
Authors who use CSS in their sites have been being asked for a a few months via the IE Blog to "Fix those hacks" - Call to action: The demise of CSS hacks and broken pages. Following from that there there were the initial reactions of about time!, You've got to be kidding! to remaining cautious. I'm in the latter category. The proposed list of CSS fixes while seeming to be impressive, didn't tackle the root cause of the problem, which I along with many other CSS developers have helped to "out". Even with the proposed fixes I feel it is more than likely that something new will crop up as the offending, hasLayout property is still a player.
So now it's out, the wondering can stop, and though we still have to remember this is only a Beta Preview, we do get a head start on identifying just what changes are "breaking" existing sites and finding out what "new bugs" may possibly crop up
Join Zeldman, Meyer and Stan!
November 30, 2005 :: 08:48
Coming Soon, An Event Apart
- Design, write, and structure your site to communicate clearly and effectively.
- Let user needs and business goals guide redesigns, and get buy-in from bosses and clients.
- Separate your site's underlying structure from its visual presentation.
- Translate even the most sophisticated and complex visual designs to CSS layout.
- Make pages that load twice as fast, rank higher on Google, and work better for more users.
Follow the AIGA podcasts with Jeffrey Zeldman, Eric Meyer and Jason Santa Maria (Stan!)
Visit the archives to find older entries.
ChristinaYoung on