Fix hasLayout with one line of CSS 10.08.2008 @ 08:16pm 51 comments

First of all, if you have no idea what hasLayout is, take a look at this excellent explanation and then we can begin!

As that page explains, there are several ways to fix the issue by setting height/width/position etc. on a particular element that is missing hasLayout but when coding an XHTML & CSS layout this can amount to several selectors containing whatever hasLayout fix works/you pick at the time. It can get messy and is only really necessary for IE.

Soooo... why not create ONE style that fixes all your hasLayout problems, by default, for IE only?

In the <head> of your document you will need to add a conditional comment to include an IE only stylesheet as follows:

<!--[if lte IE 7]>
    <link href="/css/ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

This basically checks to see if the browser is less than or equal to (lte) IE7 and if so, it will include the IE stylesheet.

Now that's out of the way, open the stylesheet and add the following line of CSS:

div, ul { zoom: 1; }

and that's it! Now you needn't worry about hasLayout anymore* :)

* Well, you may experience oddities with UL's and chances are that if you do, it is something to do with this rule. I sometimes have to remove the UL selector from this rule and specify hasLayout for UL's on a case by case basis.

What people think...

There have been 51 comment(s) on this entry so far. Have something you'd like to say? Feel free to comment below.

diet said...
09.03.2010 @ 03:56am

thank you admin very useful!

pornoizle said...
09.03.2010 @ 03:54am

Good! I had encountered a problem and what i did was to follow the link that you mentioned and through that it guided me to fix the error.

gokhan said...
09.03.2010 @ 03:16am

thank you good informatıon oyun indir

effective online ads said...
09.03.2010 @ 12:29am

Good! I had encountered a problem and what i did was to follow the link that you mentioned and through that it guided me to fix the error.

gino @ Medical Products said...
08.03.2010 @ 05:00am

Thanks for the information about style sheets. I found browser compatibility is the main issue in css design.

javanapoleon said...
08.03.2010 @ 02:15am

Great!. I had some problems with the Haslayout and the article you linked to explained it really well. Thanks!

ley de atraccion said...
07.03.2010 @ 05:56am

Very interesting your suggestion for CSS

hispanianet said...
07.03.2010 @ 05:53am

Very good post,Thanks!

Tech Guy said...
02.03.2010 @ 10:10pm

Very good, Ill use this

Jim Jones said...
25.02.2010 @ 01:54pm

Thanks much!

Webbdo said...
25.02.2010 @ 07:13am

Elegant, by default is very good!

USA Finder said...
24.02.2010 @ 11:23pm

Great Tip. Thanks for sharing this CSS tutorial.

Medical Insurance Rates said...
24.02.2010 @ 09:27am

Thanks for the information. But why aren't you blogging any more? Do you have a new blog?

Thanks

Ed

Film Documentary said...
19.02.2010 @ 01:03pm

Been having a problem with my the layout of my website, this tip just fixed it!

jk80 said...
18.02.2010 @ 11:39am

TY - you just answered a query I've been Googling for the past few days.

Kevin said...
16.02.2010 @ 02:33pm

Nice! I love websites like this with good fixes for annoying problems.

Akupunktur said...
16.02.2010 @ 01:27pm

this is very helpful

Pimp Profile Layouts said...
02.02.2010 @ 03:03am

Nice tutorial. thanks for sharing it with us. looking forward more post like this,

mobile said...
01.02.2010 @ 09:56am

Thank you for the fix, very helpful

Wristbands said...
31.01.2010 @ 11:55am

this blog is one the best sites I've seen that teach css for free.

Latest Gadgets said...
31.01.2010 @ 11:53am

thanks for sharing this CSS tutorial. Great info for us.

يوتيوب said...
27.01.2010 @ 06:19pm

Thanks for the example

Mains said...
27.01.2010 @ 10:40am

SWEEET, thank you, love this site, keep up the good work!!!

مزيكها على كيفك said...
26.01.2010 @ 07:34pm

thankxx

John Diamond Cross said...
25.01.2010 @ 04:17pm

Regarding IE bugs that occur when Haslayout is true, google map markers don't seem to like it, and render in low res if wrapped in a container specifying display.

JP said...
24.01.2010 @ 01:19am

Very simple code, but ingenious. Thanks!

Pandora beads said...
17.01.2010 @ 03:14am

excellent tutorial,
Thanks.

iphone fix said...
04.01.2010 @ 11:02pm

The following CSS property/value pairs will, if applied, allow an element to gain layout.
Refers to its containing block, and that's where some problems begin.
The float model has a lot of quirks due to some aspects of a layout element.

pc said...
01.01.2010 @ 01:59am

thanx.

disfuncion erectil said...
24.12.2009 @ 10:03pm

I will try this one for my layouts. I will update you if i have some problem regarding this. disfuncion erectil

novi mobiteli said...
18.12.2009 @ 03:04am

I am going to use this one, that`s for sure!
Unrelated to this post, just wanted to say that i like your designs, nice and clean.

Regards

Learn-er said...
30.11.2009 @ 08:41pm

Really useful, thanks for sharing.

Eironstorm said...
14.11.2009 @ 01:40pm

Nice article with interesting aspects. Thanks. :)

jak said...
12.11.2009 @ 01:16am

Thanks for this, this is very, very useful!
http://www.arab-ia.com/
http://forum.arab-ia.com/

jak said...
12.11.2009 @ 01:16am

Thanks for this, this is very, very useful!

jak said...
12.11.2009 @ 01:14am

I love it...for a dummie like me its perfect

healthy beauty said...
06.11.2009 @ 09:39am

Thanks this was interesting, never realised there was several ways.

Jackie said...
05.11.2009 @ 01:21pm

Great Tip

Jen said...
26.10.2009 @ 10:15am

Yep - done this before....good idea.

Gemstone beads said...
19.10.2009 @ 03:05am

this is useful...thanks for share...

Software Download said...
09.10.2009 @ 12:43am

After trying some different technique, I found this is the best way

Thanks for sharing

TK Pandey said...
05.10.2009 @ 05:51am

I will be visiting more often as you have done a good job, keep going..

Ballard said...
01.10.2009 @ 12:25am

It is really good tutorial of css. It is vesy useful for the designers and contains great information. Great.....

Tampa Movers said...
28.09.2009 @ 10:11am

Thanks for this tutorial, it'll come in handy when I'm using hasLayout.

Best workout dvds said...
24.09.2009 @ 11:05pm

What an elegant way to fix HasLayout.... thanks for this!

Lara Rome said...
18.09.2009 @ 10:11am

I love it...for a dummie like me its perfect

arab-ia said...
15.09.2009 @ 10:23pm

thanks, for fixs

Backpacks for laptops said...
13.09.2009 @ 12:58am

Awesome stuff. I had some problems with the Haslayout and the article you linked to explained it really well. It's astonishing to see how simple the fix is, just took me 2 minutes to get it up. Thanks!

ktunnel said...
07.09.2009 @ 10:31am

thanks For css information.Good Luck

Poptropica said...
03.09.2009 @ 02:59pm

oww your tutoriak help me !!! thanks!!

Alec Gorge said...
17.01.2009 @ 02:54am

Thanks for this, this is very, very useful!

Add your thoughts

Fields in bold are required.

Add a comment



Latest entries

Categories

Who am I?

I am Jenna Smith - a front end web developer who has been busy coding XHTML & CSS for the last 6 years. If you are interested in seeing my work or getting in touch you can do so through my growldesign website.