Fix hasLayout with one line of CSS 10.08.2008 @ 08:16pm 0 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 0 comment(s) on this entry so far. Have something you'd like to say? Feel free to comment below.
Add your thoughts
Fields in bold are required.
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.