- You are here:
- WebsiteTips Home
- Web Site Resources
- Markup, Code
- CSS
- CSS Solutions
CSS - Cascading Style Sheets
Solutions to CSS Browser Bugs and Cross-Browser, Cross-Platform CSS Issues
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.
On this page:
- Bugs, Solutions, Workarounds for All Browsers
- Microsoft Internet Explorer Bugs, Solutions, Workarounds
- Microsoft Internet Explorer: All Versions
- Microsoft Internet Explorer: Conditional Comments
- Microsoft Internet Explorer 7, a.k.a. IE7
- Clearing Floats in Microsoft IE7
- Internet Explorer 7 Information Direct from Microsoft
- Microsoft Internet Explorer 6, aka IE6
- Microsoft Internet Explorer 6, aka IE6: IE Behaviors and csshover.htc
- Microsoft IE5 Mac
- Netscape 4 Bugs, Solutions, Workarounds
Also within CSS - Cascading Style Sheets:
- CSS - Cascading Style Sheets Home
- W3C CSS Recommendations, Working Drafts, and Tutorials (1 page)
- CSS Tutorials, Articles (6 pages)
- CSS Sites, Resources, and Books (1 page)
- CSS Templates (1 page)
- CSS Tools - Editors, Reference Charts, Validators, and More (1 page)
- CSS Discussion Lists, Newsgroups (1 page)
Books on CSS
Recommended by WebsiteTips.com
See more CSS books, read reviews, why we recommend each book
In association with 
CSS-Related Browser Bugs, Bug Fixes, Solutions, and Workarounds
This section is organized by bugs, solutions, and workarounds bugs, solutions, and workarounds for all browsers first, followed by Internet Explorer Bugs, Solutions, Workarounds (organized by versions), and Netscape 4 Bugs, Solutions, Workarounds.
For more on cross-browser typography, sizing fonts, image replacement techniques, or font sizing and accessibility:
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: usingmargininstead ofpaddingon parent elements, lettingfont-sizeinherit from the root element, and links to more info. [Via css-discuss Wiki.] - Box Lessons: Bugs and Workarounds
Owen Briggs is documenting bugs, cross-browser problems and workarounds, primarily for CSS boxes, but also other layout issues with CSS. Lots for Internet Explorer, especially IEWin 5, IEWin 5.5, IE5 Mac, Netscape 6. Fabulous, helpful resource with lots of documentation, illustrations, links to more helpful information. [Article updated 05/10/2006, by Owen Briggs, CSS Panic Guide.] - 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 adivelement, any floats in the body textdivmay stick out of the bottom of it and intrude upon the bylinediv, 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. Discussesclear:bothand uses the Holly hack,display:inline-blockanddisplay:tablefor 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 FAQ
Check 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] - Cross-browser strategies for CSS
The author's approach: good cross-browser coding is to find the set of standards that are supported and then use them. He writes about how to do exactly that. [Article/tutorial dated 01/13/2006, by Emil Stenström Friendly Bit. Hat tip: Laura Carlson, Web Design Update Newsletter.] - CSS 2 Tests
Peter-Paul Koch's fascinating tests and results with documentation, screen shots, and more. As of November 2005, information includes CSS2 selectors, declarations, and a compatibility chart for Netscape 4.x and 6, IE 4, 5 and 6, Opera 5, Mozilla 1.75, Safari 1.3, and Opera 8. Continually updated. [by Peter-Paul Koch] - CSS Crib Sheet
Valuable 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.] - CSS Hacks
Helpful article that discusses why a select few CSS hacks are actually OK to use and why - PPK's “safe list.” [Article/tutorial dated 08/2004, by Peter-Paul Koch, QuirksMode.] - 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 Browsers
by 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 Tiny
This 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 Everything
A 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.” CoversDOCTYPE, 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.]
Microsoft Internet Explorer CSS Bugs, Bug Fixes, Hacks, Solutions, Workarounds
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.
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6hacks.css" />
<![endif]-->
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.
Microsoft Internet Explorer, a.k.a. IE: All Versions
- Explorer Exposed
This section of the Position is Everything Web site is devoted to exploring bugs in Internet Explorer 5, 6, 7 and above, and how to solve them. Some of what you'll find there: expanding box problem, Quirky Percentages In IE6's Visual Formatting Model, IE/Win Line-height Bug, IE6 Border Chaos, Disappearing List-Background Bug, Guillotine Bug, Unscrollable Content Bug, IE 6 Duplicate Characters Bug, IE and Italics, Doubled Float-Margin Bug, Duplicate Indent Bug, Three Pixel Text Jog, Escaping Floats Bug, Creeping Text Bug, Missing First Letter Bug, Phantom Box Bug. Highly recommended to help with resolving your Web site's CSS IE bugs! [Section began 2002, continually updated. By 'Big John' Gallant and Holly Bergevin, Position is Everything.] - 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 and the Expanding Box Problem
Clearing CSS floats in Internet Explorer, along with a helpful explanation of IE's expanding box problem and how to work around it. [Article/tutorial updated 10/10/2005 (from 9/10/2002) by artcoder and 'Big John' Gallant, for Position is Everything.] - The IE/Win Disappearing List-Background Bug
It's another IE bug caused by placing a list with a background set within a floated<div>that has been relatively positioned. Problem and solutions discussed here. [Article dated 07/30/2004, by Matt Smith, for Position is Everything.] - 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.] - Understanding User-Agent Strings
Helpful information from Microsoft regarding Internet Explorer user agent strings, identification, especially for conditional comments, targeting specific IE versions, identifying the user-agent string for the browser you're currently using, and more. Tables also show IE version tokens, platform tokens, optional components, and more. “This topic describes the user-agent string, which identifies your browser and certain system details to servers hosting the Web sites you visit. The topic also shows how to view your user-agent string, summarizes tokens used by recent versions of Microsoft Internet Explorer, and documents registry keys that effect the user-agent string.” [Article/tutorial via Microsoft MSDN Library.] - What CSS Implementation Errors are in Browsers
by Tapio Markula. Helpful, thorough tutorials and discussions for main browsers to 2004. (IE4, IE5, Netscape 4, Netscape 6, Opera 4.x, 5.x, 5.12) [Article by Tapio Markula, CSS-guide.]
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.] - CSS Cutoff of Older IE
An easy way to hide, or “cut off” older versions of IE using conditional comments. Shows how to implement negative conditional comments effectively, “less/greater than” operators (gt/gte/lt/lte), tips to watch out for, examples, links to resources, and more. [Article/tutorial dated 12/06/2006, updated 01/05/2007, by Petr Stanicek (aka pixy), CSS & Web Design Workshop (wellstyled.com).] - #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.]
Microsoft Internet Explorer 8, a.k.a. IE8: IE8 CSS Bugs, Bug Fixes, CSS Hacks
Note that this listing is in reverse date order, newest articles at the top (unlike all other listings, which are in alphabetical order).
- CSS Improvements in Internet Explorer 8
[Article/tutorial by Microsoft Developer Network.] - InternetExplorer8.net
An entire weblog/blog devoted to news and information about IE8. (not affiliated with Microsoft) [Web site: InternetExplorer8.net.] - Internet Explorer 8 Beta 1 for Developers - Standards Highlights
[Article/tutorial dated 03/09/2008, by IEBlog (Official Microsoft blog).] - Using The Emulate IE7 Button
[Article/tutorial dated 03/09/2008, by IEBlog (Official Microsoft blog).] - Microsoft's Interoperability Principles and IE8
“Now, IE8 will show pages requesting 'Standards' mode in IE8's Standards mode. Developers who want their pages shown using IE8's 'IE7 Standards mode' will need to request that explicitly (using the http header/meta tag approach described here).” [Article/tutorial dated 03/03/2008, by IEBlog (Official Microsoft blog).] - Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8
[Article/tutorial dated 01/21/2008, by Aaron Gustafson, for A List Apart.]
Microsoft Internet Explorer 7, a.k.a. IE7: IE7 CSS Bugs, Bug Fixes, Hacks
See also Clearing Floats in IE7 and Internet Explorer 7 Information Direct from Microsoft below.
- 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.] - CSS Hacks and IE7
Incredibly helpful article about frequently used CSS “hacks” or workarounds, their impact on IE7, and recommended approaches to handle all this for IE7's arrival. See also below, Wither the Star-HTML hack? [Article written 10/28/2005, by Holly 'n John, for Position is Everything.] - IE7 - css discuss
Helpful information and links here that include: IE7 bug database, IE7 beta builds, CSS bugs, CSS Filters and hacks, conditional comments, list-item whitespace bug,a:hoverwithin@importstyle sheets, fuzzy specificity bug, CSS Properties, selectors support, IE7 compatibility list support test, pseudo-classes, pseudo-elements, Microsoft links, and more. [Via css-discuss Wiki.] - 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 7
What to expect with IE7 and CSS. Covers thechild 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:hoveron all elements, and more. A “must read” article to plan for IE7. [Article/tutorial dated 07/2006, by Trenton Moss, webcredible.] - Three reasons sites break in Internet Explorer 7
Good things to look out for, pay attention to for IE7. Check out the comments with this blog post, too. [Article/tutorial dated 11/15/2006, by Roger Johansson, 456 Berea Street.] - 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.]
Clearing Floats in Microsoft IE7
See also CSS Tools
CSS Reference Charts, Tables for helpful charts, including charts on various methods for clearing floats and which approaches work with each browser.
- Clearing floats without structural markup in IE7
Discusses the use ofoverflow : hidden, triggering hasLayout in IE using_height : 1%;,zoom : 1;. The comments also discussdisplay: inline-blockand usingheight: 1px; min-height:1px;[Article/tutorial dated 03/24/2006, by Andy Clarke, and all that Malarky.] - New clearing method needed for IE7?
Be sure to check the comments here, too, including Comment 64 by John Lascurettes [Article/tutorial dated 03/21/2006, by Roger Johansson, 456 Berea Street.]
New and Popular Books on CSS
Recommended by WebsiteTips.com
Read reviews, why we recommend each book.
In association with
Internet Explorer 7 Information Direct from Microsoft: IE7 CSS Bugs, Bug Fixes, Hacks
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).
- Cascading Style Sheet Compatibility in Internet Explorer 7
Section devoted to CSS compatibility for IE7, part of the Exploring Internet Explorer section, direct from MSDN Library, Microsoft. [Article/tutorial updated regularly, by Markus Mielke Dave Massy, Microsoft Corporation, for MSDN Library.] - Details on our CSS changes for IE7
List of CSS features and changes for IE7, details on other bugs, extended some existing CSS implementations, added new features from CSS 2.1, provided better standards support, and more. “In all, we made over 200 behavior changes (bug fixes or new features) under strict mode to improve CSS2.1 compliance. All this work (with the exception of transparent PNGs) has been done under the<!DOCTYPE>switch only... ” Bugs fixed include: Peekaboo Bug, Internet Explorer and Expanding Box Problem, Quirky Percentages, Line-height bug, Border Chaos, Disappearing List-Background bug, Guillotine Bug, Unscrollable Content bug, Duplicate Characters Bug, IE and Italics, Doubled Float-Margin bug, Duplicate Indent bug, Three pixel text jog, Creeping Text bug, Missing First letter bug, Phantom box bug. See the post for many more fixed. [Article/tutorial dated 08/22/2006, by Markus Mielke, for IEBlog (The Microsoft Internet Explorer Weblog).] - 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!.] - Call to action: The demise of CSS hacks and broken pages
After eliminating bugs in IE6, along with parser bugs, the IE7 team sees that CSS IE6 hacks are breaking in IE7. They also provide suggested fixes, including conditional comments, for your CSS to specifically target the IE6 bugs only. [Article/tutorial dated 10/12/2005, by Markus Mielke, for IEBlog (The Microsoft Internet Explorer Weblog).] - Improving the CSS 2.1 strict parser for IE 7
This blog post by the IE7 team specifically discusses: Using the root node wild card selector for IE only rules (* HTML) [strict mode only fix], multi-class selectors as defined by CSS 2.1 (such as.floral.pastel) [strict mode only fix], and pseudo-element parsing sometimes flags rules as invalid (such asp:first-letter{ color: red; }) [strict/quirks mode fix]. Helpful links, too. [Article/tutorial dated 09/02/2005, by Justin Rogers, for IEBlog (The Microsoft Internet Explorer Weblog).] - Standards and CSS in IE
A great listing of the bugs fixed in IE7 right from the source - the developers creating IE7. [Article/tutorial dated 07/29/2005, by Chris Wilson, for IEBlog (The Microsoft Internet Explorer Weblog).]
Microsoft Internet Explorer 6, aka IE6: IE6 CSS Bugs, Bug Fixes, Hacks
Many IE6 CSS bugs are covered above within Microsoft Internet Explorer: All Versions, Microsoft Internet Explorer: Conditional Comments and Bugs, Solutions, Workarounds for All Browsers. Below you'll find quite a few tutorials, articles, that focus specifically on IE6.
- IE6 Bugs, Blockquotes, Padding, Links, and CSS
“something strange happens with your blockquotes in IE6 when you add borders and padding” - information, links to fixes. [Article/tutorial dated 08/10/2003, by Shirley Kaiser, for Brainstorms and Raves.] - 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.
[Article/tutorial updated 04/25/2006, by Holly and John, Position is Everything.]
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.
- IE inherited margin bug: form elements and hasLayout
[Article/tutorial dated 12/11/2006, by Barry Jaspan, Position is Everything.] - 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.] - Quirky Percentages in IE6's Visual Formatting Model
[Article/tutorial by Ingo Chao, for 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 theulinstead, depending on the need. [Discussion list post dated 03/08/2006, by Nathan, via Web Standards Group Discussion List.]
Microsoft Internet Explorer 6, aka IE6: IE6 Behaviors and csshover.htc
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:hoverselector 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:hoveron elements other than links<a>, rendering the entire:hoverconcept useless.” This approach uses IEbehaviorswithin the csshover.htc file to allow IE to implement:hoverrules on other elements. [Article/tutorial updated 02/06/2006, by Peter Nederlof, for Peterned.] - CSS Tooltips - Part Two: Making Explorer Behave
To recreate the:hoverfor 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 2
Information, 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.] - PRB: Apache Web Server Does Not Load HTC Behaviors
How to add the proper MIME-type to your Apache server for .htc files, explanation, references provided. [Article/tutorial dated 04/21/2006, by Microsoft Help and Support.]
Microsoft IE5 Mac
- IE 5 Mac: CSS - Oddities and Bugs
Edge positioning, hiding and linking, floats, form problems, phantom-links, overflow problems, misc. bugs, resources to more. Incredibly helpful site for IE5 Mac CSS issues and solutions. [Web site by La Chatte Noire.]
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.
- CodeBitch's Netscape 4 Crasher Pages
Helpful general tips about what CSS issues make Netscape 4 crash. Includes links to related articles. [Article, chart dated 05/29/2002. Credits: Referred via css-discuss] - Netscape 4.x problems
by Tapio Markula. Excellent tutorial explaining all the bugs and how to do all the workarounds, and also updated often. [Tutorial by Tapio Markula.] - RichInStyle.com bug guide - Netscape 4: Part 1, Part 2
Extensive listing about Netscape 4's rendering bugs. Includes CSS, HTML. Fabulous resource. [Dated 2000 by RichInStyle.com.]
Cross-Browser, Cross-Platform CSS Typography and Font Issues and Solutions has moved to the CSS Typography page: Cross-Browser, Cross-Platform CSS Typography and Font Issues and Solutions.
