Browser bugs with CSS can be an incredible source of frustration for Web designers and developers. The Solutions to CSS-Related Browser Bugs, CSS Bug Fixes, and Cross-Browser, Cross-Platform Issues section below includes links to articles, tutorials, and resources to help you find CSS bug fixes (solutions to CSS bugs and browser rendering differences), CSS workarounds, hacks, and how to create cross-browser, cross-platform CSS - Cascading Style Sheets. Especially popular are IE7 CSS hacks and bug fixes, which are also included below, along with IE8 CSS bug fixes and more. All or nearly all CSS bug fixes, solutions listed below will still validate to W3C Recommendations, and if they don't, they'll say so with a warning at the particular Web site.

CSS Bugs, CSS Bug Fixes, Solutions, Workarounds for All Browsers

Avoiding Hacks CSS techniques to help your site work the best cross-browser, cross-platform while avoiding using CSS hacks. Covered: using margin instead of padding on parent elements, letting font-size inherit from the root element, and links to more info. [Via css-discuss Wiki.]

Clearing Floated Images in Body Text “occurs when an image is floated left or right, and there isn't enough text to exceed the height of the image ... If the body text and the document byline are each contained in a div element, any floats in the body text div may stick out of the bottom of it and intrude upon the byline div, which doesn't look too good.” Discussion/tutorial, thought process of figuring out a workaround, CSS code, links to other resources, and much more. Covers a cross-browser, cross-platform approach for a multitude of browsers, including IE5 Mac. Discusses clear:both and uses the Holly hack, display:inline-block and display:table for workaround. Also discusses other possibilities depending on your layout needs. Be sure to also read the comments following that, too. [Article/tutorial dated 12/14/2004, by Roger Johansson, 456 Berea Street.]

CSS - Auto-height and Margin-collapsing ...or...miraculously shrinking containers!Fantastic, easy-to-understand explanation with plenty of examples along the way that show how browsers render auto-height and margin-collapsing. He uses a simple example of adding 20-pixel top and bottom margin style rules to a paragraph element and shows how it's rendered in various browsers, why, and what you can do to get the result you want and also help cross-browser consistency - no hacks, and validates to W3C. [Article/tutorial dated 07/28/2004, by Minz Meyer, for Research Kitchen.]

comp.infosystems.www.authoring.stylesheets FAQCheck this fabulous resource to find so many questions answered before you ask them again at the newsgroups. Links to many authoritative and helpful resources here, too. Valuable resource. Editor note February 2006: This site was taken over by GreyTower Technologies October 2005 with new volunteers, so info should now be updated before long.[CSS Pointers Group, css.nu]

CSS Crib SheetValuable tips and insight about what to pay attention to and follow with your CSS rules. This is a must read for anyone and a helpful reference. [08/19/2005, by Dave Shea, mezzoblue.]

CSS Filters and Hacks A collection of filters and hacks, browser support for each, and helpful info. The chart with all the info is a great help, too. Fabulous resource here! [Filters updated 03/12/2004, by Chris Nott, dithered.com.]

CSSHack Section at the CSS-discuss Wiki that covers CSS hacks quite thoroughly - with links about good and bad hacks, whether or not to use hacks at all, and links to: hack summaries, listings of hacks and browsers and how they work, and a listing of hacks specifically for Mac browsers. [Via css-discuss Wiki.]

GoodCSSHack If a CSS hack is used at all, it's important to use only what's considered a “good” hack. This article explains the qualities of a good CSS hack and examples. Topics cover: future-proof, valid syntax, doesn't make a style sheet difficult to maintain. [Via css-discuss Wiki.]

How to Hide CSS from Buggy Browsersby Johannes Koch. Excellent coverage with authoritative references and input. Includes @import rule, the media attribute, the 'comment bug,' the attribute selector, the child selector, Tantek's hack, and includes a summary chart for quick reference, too. Great! Editor note November 2005: This one has the now infamous @import trick that's widely implemented and other popular workarounds. Still helpful information despite its last update.[Last updated 2002. By Johannes Koch.]

A JavaScript Fix For Text That's Too TinyThis JavaScript, initially prompted by the cross-browser smaller font sizing issue with Internet Explorer (Windows version), “if applied with care, helps make many sites readable no matter what the text size setting.” Note that this will work for many but not ALL site designs. [Article dated 06/06/2002, by Matt Round via The Noodle Incident.]

Keep CSS Simple Great article about the easy lure of CSS hacks, their inherent dangers, along with discussion of CSS hacks that are reasonable and why. [Article/tutorial dated 11/06/2003, by Peter-Paul Koch, for Digital Web Magazine.]

Position is EverythingA fantastic Web site devoted to documenting browser bugs with CSS, providing fixes that will validate, and lots of templates and other helpful information. [Section began 2002, continually updated. By 'Big John' Gallant and Holly Bergevin, Position is Everything.]

ToHackOrNotToHack As the topic says, this article via css-discuss Wiki discusses the pros and cons of using CSS hacks with links to articles and further discussion. Well done. [Via css-discuss Wiki.]

Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know Great tutorial with lots of helpful techniques and approaches, along with cross-browser support info. “With all the hype over new and upcoming browser support for advanced CSS features, developers can be confused about the CSS they can include in web projects today. Many of the more advanced features aren't widely supported by the dominant browsers, but some very useful ones are — including newer features from CSS3.” [Article/tutorial dated 04/09/2008, by Tim Wright, for Sitepoint.]

Web Page Development: Best Practices Great article at the Apple Developer site for creating sites using “best practices.” Covers DOCTYPE, page layout with CSS (with and without using minimal tables for layout), XHTML, what to avoid, accessibility, CSS, JavaScript, and more. Lots of links along the way and at the end of the article. [Article/tutorial by developer.apple.com.]

Workarounds, Filters, and Hacks Intro covers: Workarounds, Filters, and Hacks Defined; The Problem with Workarounds, Filters, and Hacks; Avoiding Implementation Pitfalls. Sections then include: Internet Explorer Conditional Comments; Workarounds and Filters; CSS Hacks. Excellent reference. “We've worked hard to make this the most detailed and up-to-date reference on the subject available.” [Article/tutorial by Tommy Olsson and Paul O'Brien, for Sitepoint CSS Reference.]

Editor note 05 August, 2006, updated 01 December 2006: Although you'll find plenty of approaches to workarounds, hacks, filters, and conditional comments below, conditional comments are currently the recommended way, the “best practice” approach to manage IE's CSS quirks and bugs. What are conditional comments? Here's an example that tells IE to use the content if it's IE6. Other browsers will ignore conditional comments.

The above example will then serve only IE6 with the link to the ie6hacks.css file. Several articles and tutorials below explain in more detail what they are and how to use them. You'll also find plenty of links to CSS bugs, solutions (not just conditional comments!), and workarounds.

How To Attack An Internet Explorer (Win) Display Bug Great article, tutorial on how to figure out IE bugs, including making sure it isn't a bug first, validating. Covers {position: relative;}, the peekaboo bug, dimensional bug fixing, the expanding box trick, the Holly hack, source code, and more. Easy to understand. [Article/tutorial by John Gallant, Holly Bergevin, for Community MX.]

Internet Explorer & CSS issues Solutions and insight for IE's misinterpretation of the CSS box model, text spilling out of its container in non-IE browsers, disappearing background images, widths only working on IE, unstyled version of a Web page appearing in IE, fixed width Web page not sitting in center of window. [Article/tutorial dated 02/2006, by Trenton Moss, webcredible.]

Line-height / Replaced Element Bug Effects Windows IE5.01 and IE5.5, and IE6. “This demo will describe a bug where the line-height is incorrectly rendered if the line contains a replaced element. Very simply, if the default line-height is changed to a larger value, the line spacing above and below any text line that contains a replaced element, such as a small emoticon, will be half of the spacing seen elsewhere in the text.” [Article/tutorial dated 02/05/2005, by Jeroen Mulder, for Position is Everything.]

On Having Layout - the concept of hasLayout in IE/Win “A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element 'layout.'” This article helps explain what that is, its effects, and possibilities for working with it, along with links to further information. Very helpful! [Article/tutorial regularly updated, by Ingo Chao, satzansatz.de.]

Microsoft Internet Explorer: Conditional Comments

Conditional comments for IE8, IE7, IE6, IE5...

Conditional Comments Explanation of Microsoft conditional comments to use to target or exclude specific versions of Internet Explorer. Includes code examples, suggestions of how to use them effectively. Direct from Microsoft. [Article/tutorial via Microsoft MSDN Library.]

Conditional Comments The basics of conditional comments, with plenty of examples. [Article/tutorial updated 04/06/2007, by Peter-Paul Koch, for Quirksmode.]

#IEroot — Targeting IE Using Conditional Comments and Just One Stylesheet Easy-to-implement approach to targeting IE or hiding from IE, too. The article says the combined approach using conditional comments and child selectors works for any version of IE, too. Worth checking out. The article's summary: “The Star-HTML hack was a very elegant way to easily target style rules at IE and apply fixes. Internet Explorer 7 has fixed the Star-HTML hack, taking away the elegance. This article introduces a simple method for targeting CSS rules at IE that uses only one stylesheet and works for all versions of IE. It will require some minimal markup using Internet Explorer's conditional comments and CSS descendant selectors.” [Article/tutorial dated 02/02/2007, by Hiroki Chalfant, for Position is Everything.]

10 must haves in IE Next Excellent recap of the new IE7 as of December 2006, what we miss, what we still need, and more. Plenty of comments with this post, too (as you might imagine!). [Article/tutorial dated 12/13/2006, by Roger Johansson, 456 Berea Street.]

IE7 - Were they Ready? This is part 1 of the results of a fabulous study of 100 company websites right after the launch of IE7. Shows screenshots and explains problems with 100 company websites. Great insight for what to look for with potential IE7 rendering problems, differences, and where things stood with these companies October 2006. [Article/tutorial dated 10/26/2006, by Simon Griffin, Etre, Ltd.]

IE7 - Were they Ready? Redux Adding to part 1 above, IE7 - Were they Ready?, they've added several major UK retailers in this follow-up blog post. “Having cast the net a little wider, we've found some serious presentation problems with the sites of a number of major UK retailers. These issues illustrate how bad things could get for the unenlightened when Microsoft swings its automated roll-out of IE7 into full-force later today.” [Article/tutorial dated 11/01/2006, by Simon Griffin, Etre, Ltd.]

Preparing your CSS for Internet Explorer 7What to expect with IE7 and CSS. Covers the child selector, the star html hack, the XML prolog and Quirks mode, filters, hacking and conditional comments, and IE7's CSS improvements, including CSS bug fixes, the use of :hover on all elements, and more. A “must read” article to plan for IE7.[Article/tutorial dated 07/2006, by Trenton Moss, webcredible.]

Wake up and smell the IE7! Part two looks at the specific problems introduced by IE7 and tells you exactly how to fix them. Discusses the pros and cons of conditional comments, XML declarations, content type declarations, differences between IE6 and IE7 box model, filters, the star HTML hack (aka The Tan hack), the underscore filter, the comment after property filter, the child selector filter, the adjacent selector filter, the first child and adjacent selector filter (aka The Owen hack), and the recommendation for using IE's proprietary conditional comments instead of all the filters. Fabulous source for IE7 issues and possible solutions. [Article/tutorial dated 11/20/2006, by Simon Griffin, for Vitamin.]

Wither the Star-HTML hack? A follow-up to their article, CSS Hacks and IE7, this new article covers what IE7 is and is NOT correcting and how it impacts the star-HTML hack (* html {whatever:whatever;}), the Holly Hack, and more. [Article written 12/22/2005, by Holly 'n John, for Position is Everything.]

I separated the articles and tutorials above with the posts and information from Microsoft. Note that this listing is in reverse date order, newest articles at the top (unlike all other listings, which are in alphabetical order).

IE and CSS "Compliance"Post about IE7's CSS compliance and efforts at making IE as standards-compliant as possible, along with links to their CSS bugs site, opinion posts, more. From the personal blog of Chris Wilson, Group Program Manager of the Internet Explorer Platform team at Microsoft. [Article/tutorial dated 08/10/2006, by Chris Wilson, Albatross!.]

The IE6 Doubled Float-Margin Bug Demo and fix for this bug that doubles the left float margin in length. “A coder innocently places a left float into a container box, and uses a left margin on the float to push it away from the left side of the container. Seems pretty simple, right? Well it is until it's viewed in Explorer for Windows. In that browser the left float margin has mysteriously been doubled in length!” [Article/tutorial updated 01/19/2004, by Holly and John, Position is Everything.]

IE6 Duplicate Characters Bug This IE6 bug causes duplicate characters to appear, which is caused by HTML comments. Shouldn't happen, of course, but that's IE6 for ya! See this article/tutorial that explains the bug, how to fix it, and how to avoid it.

Internet Explorer 6 has a puzzling bug involving multiple floated elements; text characters from the last of the floated elements are sometimes duplicated below the last float. This bug is a real headbanger because there seems to be nothing triggering it...

The direct cause is nothing more than ordinary HTML comments, such as, <!-- end left column -->, sandwiched between floats that come in sequence. Apparently, the comments are hard for IE to digest when they occupy those positions, resulting in a kind of “screen diarrhea.” HTML comments inside the floats do not cause the bug, nor do comments before or after the float series. Only comments residing between floats cause the bug.

The effect seen is that some of the last characters from the last floated element of the series are repeated outside and below that floated element. The first sandwiched comment does nothing unusual, but two comments cause the last two characters in that last float to repeat. Each additional comment makes two more characters join the party. It doesn't matter which pair of floats straddle the comments. In fact the two triggering comments may follow different floats as long as they have floats both before and after them.

IE6 Peekaboo Bug Explanation and fix. “A liquid box has a float inside, and content that appears along side that float. All is well, until it's viewed in IE6. 'Wah? Where's my content?!' You reload the page, and nothing. When you scroll down, or perhaps switch to another window, upon returning to the 'scene of the crime' there it all is, fat 'n sassy!” Note that this bug is thankfully fixed in IE7. [Article/tutorial updated 04/17/2007, by Holly and John, Position is Everything.]

[WSG] Solution to disappearing bullets in IE “You have a bulleted/unoreded list in IE within a floated conatiner(s). Then you notice that the bullet points either disappear fully or disappear on mouseover.” The fix Nathan found that works is to add 100% width to the list item element: #container-name li {width:100%;}. Editor note 10 March 2008: This is a fix I've used for years, looked for documentation on it, and found this discussion list post. I use this fix within an IE6 conditional comment (see above section on conditional comments). It occurs when I use a background image for a bulleted list. Usually the first bullet disappears, but others can also disappear. Adding the width to the list item fixes it, but sometimes I use the ul instead, depending on the need. [Discussion list post dated 03/08/2006, by Nathan, via Web Standards Group Discussion List.]

Since IE6 and below does not natively support the :hover on elements other than the anchor - <a> - element (hyperlinks), the csshover.htc file approach below can be used to get IE to implement your :hover element rules, such as for CSS flyout menus and other CSS hover implementations. Below are links to the originator's website and files and other tutorials, tips, and information regarding alternatives and .htc files.

whatever:hover (using csshover.htc) Grab a copy of the csshover.htc from the originator's website where you'll also find explanations, information, link resources, and more. “Most modern browsers support the :hover selector for any html element. This is cool, because it enables you to, for instance, apply a mouseover effect to table rows <tr> using only CSS. IE however, with a market share of > 90%, does not natively support :hover on elements other than links <a>, rendering the entire :hover concept useless.” This approach uses IE behaviors within the csshover.htc file to allow IE to implement :hover rules on other elements. [Article/tutorial updated 02/06/2006, by Peter Nederlof, for Peterned.]

CSS Tooltips - Part Two: Making Explorer Behave To recreate the :hover for IE for elements other than the anchor element, this tutorial explains and shows how to implement “adding a carefully crafted Jscript file (csshover.htc) to the page via a Microsoft proprietary 'behavior' rule in the CSS file” using a conditional comment for just IE. [Article/tutorial by John Gallant and Holly Bergevin, for Community MX.]

HTC components in XP Service Pack 2Information, tutorial about csshover.htc, and also explains an alternative approach using PHP. Comments and discussion also include using ASP, ColdFusion, setting the MIME type on the server, and more. [Article/tutorial dated 05/20/2005, by Aldo, Aldo's Blog.]

IE6 and csshover.htc Helpful information and code to use to add the correct MIME type to your server for .htc files by using httpd.conf or .htaccess. Links to Microsoft information, too. [Discussion list post dated 04/12/2004, by Brian Ally, via css-d.]

Netscape 4 Bugs, Solutions, Workarounds

Some still need to cover Netscape 4, so this section remains here, although this old browser is nearing extinction at this point. These links go to sites specifically about Netscape 4 issues. The All Browsers section above has more on Netscape 4, too.