« Popups from a bookmarklet | Main | Almost Famous »
March 10, 2005
CSS and Internet Explorer
I've recently been troubleshooting a number of problems with IE 6.0 and CSS. I thought it might be nice to document the main IE bugs that I experienced and some workaround hacks that I found online. My project is for an intranet, so thankfully, older IE bugs prior to version 6.0 don't concern me.
IE CSS Bugs
- Quirky percentages in Visual Formatting Model If the necessary height or width of a containing box isn't known at a particular point in page rendering, the box will be positioned according to information up to that point. A hover event will cause some boxes to be RE-positioned according to rendered information from the WHOLE page.
- IE Three Pixel Text Jog
- IE/Win Guillotine Bug
- IE Float Model Problem
- IE doubled float-margin bug
- Duplicate Characters Bug I think this might be more aptly named, phantom shadow box. This one was weird. A mysterious box would appear below a div and contain duplication of the last few lines of preceding content. Also, any links in the phantom shadow content actually worked (at least partially). My duplicate characters were not triggered by comments between floated divs, but floated and hidden divs with display: none. After much consternation, I realized that I didn't need to float those divs. Removing the floats solved the problem.
IE CSS Hacks
- The Holly Hack Apply a small 1% height to a floated container in order for it to expand to contain the intended content. Ironically enough, this works due to another IE bug that forces a container with an explicit height to expand in order to contain all content. Normal behavior would be to explicitly size the container according to it's height regardless of content.
- Asterix html Selector Bug (aka The Tan Hack) Preface id name with * html in order to prevent non IE browsers from reading.
- Mac IE Hack Uses comments to hide chunks of code from IE for Mac.
- ! important You can cause IE to ignore a line in a stylesheet by putting !important at the end of a stylesheet specification. This is *supposed* to override inheritance for that element, but IE will just ignore that line.
/* start hide from ie mac \*/
Anything here will be hidden from a Mac
/* end hide from ie mac */
Anything here will be hidden from a Mac
/* end hide from ie mac */
margin-top: 0 !important;
margin-top: -4px;
margin-top: -4px;
Other resources
Most of the solutions that I found came from Position Everything. This was a great site that has very clear examples and explanations of IE bugs. They have two great pages that list all of the above bugs and many more here, and here. I've just highlighted the bugs that I personally experienced.hasLayout is is a proprietary Microsoft HTML property that can help to solve float problems with IE
Meyerweb is also a great site for CSS articles.
I joined the css-discuss list which is a great resource.
While I avoided the duplicate characters bug by just removing the floats, I didn't determine this course of action before finding a number of different triggers for the same bug detailed in the positioniseverything document.
- http://www.bingbangboom.us/projects/cssFixes/floatRowIE6/
- http://www.wubbleyew.com/blog/showblog.asp?blogID=247
As a funny side note, I just checked my blog in IE - for the first time I think, and the right nav was entirely below the content. Oops.
Posted by mark at March 10, 2005 3:57 PM Subscribe (FeedBurner)
Trackback Pings
TrackBack URL for this entry:
http://mark.veerman.com/cgi-bin/mt-tb.cgi/1
Comments
I really enjoy reading your articles. Keep up the great work.
TBoardenson
Posted by: Tom at March 6, 2006 1:10 PM