13 replies [Last post]
charlieconcepcion
Offline
Enthusiast
Last seen: 14 years 5 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

Ok CSS Gurus, question.

What should I use for IE 7 in clearing floats (trigger hasLayout)?

.selector {zoom: 1;} or {min-height: 1px;}

and also for IE 6 what should I use (trigger hasLayout)?

{height: 1%;} or {height: 0;}

Now all options should work, but I need to know which is the BEST option for both IEs. I hear sometimes 1% causes problems.. But I'm not sure.. you tell me..

Thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE7 now causes {overflow:

IE7 now causes {overflow: auto | hidden;} to trigger hasLayout. So, the same method you use for modern browsers will work for IE7.

If the parent container has any dimension set, IE triggers layout. Otherwise, I prefer Clair Campbell's tripswitch hack.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

charlieconcepcion
Offline
Enthusiast
Last seen: 14 years 5 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

your saying if i have a set

your saying if i have a set width to the parent div, it will clear the float inside?

also are you telling me use :inline-block.. instead of zoom: 1 or min-height ?

please explain

thanks

charlieconcepcion
Offline
Enthusiast
Last seen: 14 years 5 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

anyone please shed more

anyone please shed more light for me on this? I'm trying to auto-clear floats...

For IE 7 does the :after work? (I'm assuming there's no support for it as I heard).. Should I use {zoom: 1;} or {min-height: 1px;}. Or as you said above... inline-block? I'm totally confused now... And what should I use for IE 6?

thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Look at Tony's clearfix as

Look at Tony's clearfix as I've modified/simplified:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

.clearfix {display: block;}

Notice that I haven't bothered with hiding anything from IE/Mac. I don't think there's any sane reason to worry about it any more.

Also, the Holly Hack is gone (* html .clearfix {height: 1%;}). Its purpose was to trigger hasLayout, but it was redundant because the inline-block/block switch handles that for IE6&7 both.

Modern browsers use the :after pseudo element and IE uses the tripswitch.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's wise to keep

It's wise to keep font-size:0; in the main clearfix:after ruleset.

Although I agree with the notion of simplifying and let no man call me a version supporting freak but did the older IE5 etc support display:inline-block? Just curios but couldn't actually care less as I intend not looking at IE5 again in this lifetime!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

charlieconcepcion
Offline
Enthusiast
Last seen: 14 years 5 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

Hey I notice you say.. the

Hey I notice you say.. the holly hack is redundant now.. is that really true??

your saying now... using display: inline-block and restating that selector with the same property as display: block will trigger hasLayout?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Yep. See test page.

Yep. See Claire's test page.

It comes down to if hasLayout is triggered, nothing will unset it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

charlieconcepcion wrote:Hey

charlieconcepcion wrote:
Hey I notice you say.. the holly hack is redundant now.. is that really true??

your saying now... using display: inline-block and restating that selector with the same property as display: block will trigger hasLayout?

No it isn't redundent, to answer my own socratic question from earlier that clearly went ignored, keep the holy hack in, IE5 does not support inline-block.

And before anyone says it, yes it is dead, and no it shouldn't be supported.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

charlieconcepcion
Offline
Enthusiast
Last seen: 14 years 5 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

IE5 IS DEAD.. i don't care

IE5 IS DEAD.. i don't care about it... now is holly hack redundant?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No but go on ask the

No but go on ask the question again!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

charlieconcepcion
Offline
Enthusiast
Last seen: 14 years 5 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

lol!.. I didn't mean it that

lol!.. I didn't mean it that way Smile... What I'm trying to figure out is... the holly hack is pretty much redundant right? (for those who believe ie5 is dead)... and if not.. use it instead of trip switch?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's redundant, but then

Smile

It's redundant, but then again does it do harm to leave it in for some poor soul who happens by with IE5 cos no one told them to upgrade Sad

It only affects IE =< 6 ,IE6 won't care if it reads both rules, IE7 won't read the Holy hack.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

charlieconcepcion
Offline
Enthusiast
Last seen: 14 years 5 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

thanks hugo! u the man!

thanks hugo! u the man!