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.
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.
diet said...
09.03.2010 @ 03:56am
thank you admin very useful!