
This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.
CSS Bugs and Workarounds
Bugs which are bad enough to make content illegible are shown with this background , and italicized print.
The 'bugs' are arranged by browser version, in reverse chronological order by release date. Bugs which have been fixed have been removed to a separate page .
If your platform isn't listed, it does *not* mean that the bug doesn't exist on it; it just means that no one has _reported_ that it is a bug on that platform. Please help make this a better resource by including platform information when reporting a bug.
Interminable discussions on the CSS newsgroup have revolved around implementation problems and 'workarounds'. This summary is an attempt to provide the collective wisdom gleaned from those posts. No exhaustive attempt is made to describe elements that are unsupported.
Deletions will be gleefully accepted; additions will be reluctantly included. Please send corrections to the CSS Pointers Group . Please file bug reports, even if you think someone else may have already filed. Let's do our utmost to get the attention of the vendors, so that we can all realize our goal of delivering the best CSS to everyone.
Internet Explorer 6x (W=Win M=Mac)
CSS Property/ Problem | Description | Workaround | Notes/Footnotes |
---|---|---|---|
* | the definition of "P" when IE6/PC was displaying the P:first-letter | W Demo | |
bottom: 0px | unsupported | uknown | W Demo |
li | Irregular margins/padding applied to the first items in unordered lists | Use li.dummy {display: none; } | W Demo |
overflow: hidden | not supported | apply "position: relative" stylesheet property to parent element (to "outer_div" in TC) | W, see TC |
position: fixed | not supported | W, see workaround |
Internet Explorer 5x (W=Win '95 M=Mac)
CSS Property/ Problem | Description | Workaround | Notes/Footnotes |
---|---|---|---|
a:hover | The link cursor properties are not honored when inside a parent element with fixed positioning | Don't use | M |
adjacent sibling selectors | not supported | W | |
absolute/relative positioning | absolute child loses position | set the width property of the parent element | W demo |
border: 1px dotted #b8b8b8 | Shown as dashed border | Use 2px dotted #b8b8b8 | W |
Classes set as number (i.e. P.1) | recognized due to error-recovery | Illegal syntax; don't use | W95, NT (6) |
color | f0f0f0 rendered | illegal syntax; include the required '#' | W95,NT |
width on body is ignored | ignored | use width on DIV instead | W95, NT |
font-family: serif | inappropriate font selected as replacement for generic when font size changed through UA preferences | avoid | W screen shot |
Form elements | properties not inherited | list the form elements in a list of selectors | Win'98 Demo |
margin:auto | element not centred | use text-align:center on a div | WinNT |
margin-left and margin-right | percentage values are ignored for element UL | Wrap your UL into a DIV and apply the margins to the DIV instead. | W |
margin-right | not asigned 'auto' by default with HTML or BODY | Unknown | WinNT |
margin-right | when margin-left is set for BODY or HTML, the same margin-right is applied | set margin-right manually or define margin-left for element | W |
position:fixed | suppresses scrollbars | M | |
white-space: nowrap | unsupported in <td> IE 5.0 | avoid | W |
External Stylesheet ignored | with Apache server on Linux | Be sure the style sheet on the server is executable, i.e., chmod 0755 <file_name>.css | W98 |
External style sheets | won't re-load | Set the Cache "Update pages:" to always, thereafter use [Shift][Reload] | M |
text-align | ignored when set on HTML | use text-align on BODY | W95, NT |
Internet Explorer 4x (W=Win '95 M=Mac)
CSS Property/ Problem | Description | Workaround | Notes/Footnotes |
---|---|---|---|
External stylesheet ignored | limited to 30 style sheets. If more than 30 style sheets are declared, these additional style sheets will be ignored. In certain cases, IE will alert the user with an "invalid argument" error. More information is available at http://support.microsoft.com/support/kb/articles/Q262/1/61.asp. | Don't use > 30 stylesheets | W4-5.5 |
External stylesheet ignored | check that comments don't include extra '*' characters | Must be /* comment */, not /** comment **/ | W |
background, background-color on HTML | not recognized | don't declare | W |
Border | padding ignored | Unknown | W |
border | ignored on inline elements | unknown | W |
border-width | ignored | See example | W |
Classes set as number (i.e. P.1) | recognized due to error-recovery | Illegal syntax; don't use | W (6) |
color | f0f0f0 rendered | illegal syntax; include the required '#' | W95,NT |
font-family: serif | illegible font selected when font size changed in UA | avoid | W screen shot |
font-family: unknownfont, serif | illegible font selected | avoid | W screen shot |
font-weight | Bolder rendered as extra bold | avoid | W |
links | not clickable with negative indent | unknown | W |
margin-left: auto; margin-right: auto; | should center elements, but does not | enclose in a DIV with text-align: center | W |
margin-left for FIELDSET | width of element (and page) increased drastically | unknown | WinNT |
multiple classes | not supported | W | |
positioned elements, nested | styles removed | avoid inline style | W (7) |
position: relative; | supresses table | don't use | W demo |
SPAN in DIV | inline background ignores padding | Unknown | W (8) |
Tables Change | Styles do not inherit | Set style on TH, TD | W |
Internet Explorer
3x (W=Win '95 M=Mac)
CSS Property/ Problem | Description | Workaround | Notes/Footnotes |
---|---|---|---|
first declaration | sometimes ignored | use a dummy class as your first declaration | W |
A {text-decoration:…} | first declaration of text-decoration inherited | differentiate with classes | M |
background or background images on BODY | buggy in external CSS | embed, inline or use background attribute of BODY element | W |
background, background-color | not rendered on the font style elements (FONT, TT, I, B, BIG, SMALL, STRIKE, S, and U) and phrase elements (EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE). | set only on BODY, or else set BODY and every element | M |
background, background-color on HTML | not recognized | don't declare | W |
background-color | not supported | use shorthand - background | W |
background position | supported only for Body | Unknown | M, W |
background on block element | rendered as though on an inline element | W | |
Cascade | multiple style blocks unsupported | Avoid; use external CSS | W |
Cascade | Linked style sheet combined with style element not supported. | Avoid | W |
color units | only 3digit and 6digit hex RGB supported | use 3 or 6 digit RGB | W |
Em units | render as pixels | Avoid | W, M |
font-family | unavailable font causes subsequent declarations to be ignored | specify font-family last | W (11) |
font-family | ignored if first family unavailable | include a fictitious font name enclosed in single quotes as your first font choice and a fictitious font name as your last choice | W (11) |
font-family | quotes required when multiple font families named | ? - using this breaks better implementations | W |
font-family | inline, font names enclosed in single quotes are unrecognized | M | |
font-family | font names with white space not supported as inline style | specify in external .css or STYLE in HEAD | M, W |
font-family | ending semi-colon required for font names with white space | M, W | |
font-size | ems interpreted as pixels | Avoid | W, M |
font-size | percentages not applied correctly | Use supported units | W (2) |
font-size | ignored | set as first declaration in ruleset | W |
font-size | FONT other than BASEFONT size not rendered | set only on BODY, or else set BODY and every element | M |
font-size | relative (larger, smaller) not supported | Avoid | M |
line-height | values applied to top and bottom of text block | avoid | W |
line-height | negative values rendered | avoid | M, W (3) |
line-height | number value with no units defaults to pixels | always specify unit values | W |
Margins | not inherited in versions earlier than 3.01 | Unknown | W |
Margins | Lost after links | Unknown | W |
Margins | top and bottom margins of different elements not collapsed | Unknown | M, W |
margin-left: auto; margin-right: auto; | should center elements, but does not | enclose in a DIV with text-align: center | W, M |
multiple classes | not supported | W | |
P | Unclosed, styles are lost | Always use </P> | W |
selector | unrecognized elements like ABBR, ACRONYM, WHAT-EVER, cause grouping to be ignored | use IE3-recognized selectors in groups, or else specify selectors individually (this sounds impractical) | M |
SPAN | ignored when class is set as a class selector (only P tested) | use plain selector or plain class | M |
text-decoration | final declaration overrides prior declaration | put preferred declaration last | M (erratic) |
URL | Absolute or long relative values not supported | Keep style sheet in top level or the same directory with HTML file | W (4) |
URL | use of optional single or double quotes not supported | don't quote URL string | W |
declarations on implied tags (like BODY) | declarations ignored | specify tags | M, W |
Footnotes
[2] Percentage should be applied based on the font size of the parent element. The size is calculated based on the percentage of default font size for the element. ^
[3] CSS1 does not allow negative values on this property. ^
[4] Having the style sheet in the top level or the same directory as the HTML file avoids the 'length' problem with IE3, as well as the NN4 bug which interprets URLs relative to the HTML file instead of the style sheet.
[5] Exceptions are background image and color on TABLE tag. For other styles, results may vary depending on the complexity of the table and their use is not recommended. ^
[6] Selectors cannot start with a dash or a digit. ^
[7] Unpredictable results. Detailed tests by Shelley Powers. ^
[10] See Demo of problem provided by Bill Humphries. ^
[11] See Microsoft's explanation ^
[12] Use:
<!--LI { list-style-image: url(./caution.gif); }-->
Instead of:
<!-- LI { list-style-image: url(./caution.gif); } -->
Interminable discussions on the CSS newsgroup have revolved around implementation problems and 'workarounds'. This summary is an attempt to provide the collective wisdom gleaned from those posts. No exhaustive attempt is made to describe elements that are unsupported.