About MediaGirl »
MediaGirl provides programming services for creative agencies and web designers using Expression Engine.Toolbox »
Bookmarks Coding Expression Engine For Laughs Freelance ToolsRSS »
MediaGirl BlogOur Tools »
Expression Engine Campaign Monitor Text Link Ads Site5 Hosting Power VPS Log Me In Opera BrowserThursday, September 6, 2007
On Having Layout
I spent several hours today sorting out an IE7 CSS bug that was solved by the concepts described in this article -- On Having Layout.I'm adding this here as a bookmark but also as a heads up for other programmers dealing with CSS related IE6/7 bugs.
"A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.”" Who knew you had to give IE layout??
----------------------
To give layout to IE6 and lower use the underscore hack:
.gainlayout { _height: 0; }
or use the IE6 conditional
<!--[if lte IE 6]><style>.gainlayout { height: 1px; }</style><![endif]-->
----------------------
To give layout to IE7 use the min-height property:
.gainlayout { min-height: 0; }
or use the IE7 conditional
<!--[if IE 7]><style>.gainlayout { zoom: 1; }</style><![endif]-->
----------------------
3 Comments | 
Post a comment | Filed Under: Bookmarks, Coding
Comments
|
Sep 21, 2007 |
Guest wrote: Hi, I tried all of these fixes and none of them fix my IE 6 layout problem. My page looks fine in FF and Safari, but the main content of the page is pushed below a right float div. I'm wondering if I'm using the fix correctly. I tried placing both conditional scripts from above just inside the <body> of my html, and I also tried putting the .gainlayout code in the css. Is this correct? |
|
Sep 21, 2007 |
MediaGirl wrote: |
|
Jan 03, 2008 |
rebecca wrote: I believe that all <style> elements have to be inside the <head> element. Also, one helpful way to tell if you have layout on a particular element is to set an alert button like this one, which I used for my div with id="wrapper": <BUTTON onclick="alert(wrapper.currentStyle.hasLayout)"> wrapper div hasLayout?</BUTTON> It turned out I did have layout, my problem was that I was using class names with underscores in my stylesheet, which is not supported in some browsers. I found this buried in a sentence in the book _Web Design in a Nutshell_, 3rd Ed. (O'Reilly). |