
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. Reference for such elements should be to the Master Grid provided by Eric Meyer at Webreview.
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.
Netscape Navigator 4x (W=Win '95 M=Mac S=Solaris L=Linux)
CSS Property/ Problem | Description | Workaround | Notes/Footnotes |
---|---|---|---|
Crash | using inline styles with document.write | avoid | W, Mac |
CSS appears on screen | causes include: incorrect type sent by server, longish stylesheets, reloading/resizing load in progress, a fast connection, earlier versions of NN | use embedded style instead of external | M, W |
Loss of style | usually after table or form elements | Redundant selectors on <BODY> (add TD, TH, P) | W, M |
Margin, width, padding, and border | all completely broken, but sometimes, some of them work some of the time | Unknown | W |
background, background-color on HTML | not recognized | don't declare | W |
background, background-color | lost on positioned elements | include script to fix | W |
A: background color | rounded to the nearest of the 16 VGA pallete colors | use background: transparent | W |
absolute/relative positioned A: | becomes "unclickable" and obscures content | don't position | W,M |
background property | inherits into text elements | use background: transparent; | W |
background property | when image specified, incorrectly inherited | add (optional) color to rule | W |
background-color | when border-style or border-width are also set, color in RGB notation may be ignored | use shortcut "background", border: none, or keywords | W [examples] |
background-color on Block element | does not color the entire region | assign border: none; to the element or use background image | W |
background on absolutely positioned element | does not color the entire region | add non-standard, proprietary 'layer-background-color to rule | W |
background color in SPAN | SPAN text loses background color when font-size, font-weight, and the same background color is specified for the SPAN class and for a DIV class on the same page | use different colors for each class, or don't declare font-size and font-weight | M |
background color in Anchors | color differs from background color on BODY | use background: transparent | W |
background: transparent | declared on image, makes content illegible | Avoid | W |
background: transparent | declared on block element with border, causes black background | Avoid | W |
BLOCKQUOTE | Text not contained within defined box | Add a space between the last text character and </P> | W |
BODY rules have no effect | when <BODY> tags are omitted | Use explicit <body> and </body> tags | W [ demo ] |
after <NOSCRIPT> | add <P> between <BODY> and <NOSCRIPT> and make use of redundant selectors (body, p, h1, h2, td) | W, L | |
border | set around <pre> | Encase the PRE inside a DIV and style the border on DIV instead | W Example |
border | border set on P in floating DIV invisible | don't declare border on floating DIV | M, W |
border | on absolutely positioned elements doesn't work | unknown | W |
border declarations | unclosed P in nested table causes crash | avoid | W(NT), S |
border shorthand | ignored on inline elements | avoid (see next bug) | W |
border | transforms A, B, CITE, CODE, EM, I, SAMP, SPAN, STRONG, SUB, SUP, TT, VAR to block | avoid | W |
border is broken for IMG | style ignored; images randomly thrown…somewhere | avoid or see example | W95, NT |
border-bottom | doesn't appear to work | use border-bottom-width | W |
border-top | doesn't appear to work | use border-top-width | W |
border-left | doesn't appear to work | use border-left-width | W |
border-right | doesn't appear to work | use border-right-width | W |
border-color | can only be applied to all four sides at once | Use shorthand border: | W |
border-style | can only be applied to all four sides at once | Use shorthand border: | W |
color | f0f0f0 rendered | illegal syntax; include the required '#' | W95,NT |
color: inherit; | yields putrid shade of green | specify color desired | W |
display:block | nested, crashes browser | avoid or exclude Netscape | W |
A DIV with the border style set will crash Netscape Navigator 4.04 or 4.05 if any of the following are included in it | A table nested inside another table (single tables are fine, though) Acronym (ACRONYM) element DFN (definition) element Abbrevation (ABBR) element Quotation (Q) element Table caption (CAPTION) element The HTML 4.0 elements OPTGROUP and FIELDSET in forms Deleted text (DEL) element Inserted text (INS) element | Avoid | M |
DIV (nested) | inline styles ignored | embed, or use external css | W Details |
EM units applied to Hn | calculated based on size of the header font | don't use EM units | W |
EM and relative units | Calculated based on browser default | Don't set font-size or use absolute font-size. | W |
EX length units | improperly calculated, relative to current font size. | Use relative length units instead. | W |
File not found | If external .css not found, HTML file not rendered | Make sure the URI is correct, and the css file is on your server. | W,M,S |
float: center; | correctly centers elements | not a legal attribute value for float | W |
float | unpredictable placement | Unknown | W |
float with negative margin | defies description | See example | W [Example] |
float used with clear | crashes browser | Avoid | M |
font | no effect when specified inline with 'margin' | skip 'margin' or use embedded or linked style sheet | M |
font-color | unapplied, with <noscript> | Add <p> before <noscript> | W |
font-family | generic Cursive or Fantasy won't show | use specific font-family name | W |
font-family | generic 'sans-serif' mapped to illegible font | use font-family: Helvetica, Arial, sans-serif | L NN Screenshot and Mozilla Screenshot |
font-size | small, x-small and xx-small | don't use; illegible in most fonts | M |
font-size: nn% | relative to the default font size, not parent | don't set any font-sizes | W |
font-size: nn% | cummulative, if element not explicitly closed | ? | W |
font-size | wrongly increased if elements not separated by white space | separate by white space or a line feed | W example |
font-size | not applied | make sure to specify font-family (even generic) | L |
font-size | 13 and 14 pt fonts rendered same size | use 14.1 as size | W |
FORM (HTML) | causes style to be ignored | Wrap each segment in its own DIV or SPAN | M, W |
Hn | Incorrect size | Remove font-size from BODY rules | W demo |
HR in <TABLE> | default 100% width relative to window, not cell | set width | W, S |
HR | color can't be set | Use element border instead | W, S [examples] |
ID selector (#) | doesn't work with selectors like <P> or <LI> (external css) | Embed or inline | W |
ID selector (#) on A | doesn't work with A#yourid | Use #yourid | W |
IMG Height and width | unpredictable results | use HTML to specify | W |
IMG margin/padding | doesn't work | enclose in DIV | W, S |
IMG sizing | Re-sizing images using CSS does not work. | Don't try it. Use graphics editor, instead. | W |
INPUT (HTML) | causes style to be ignored | Wrap each segment in its own DIV | M, W |
LI, DT, DD | Assigning style to these elements has incorrect effect | Enclose text with SPAN or assign to UL, OL, or DL | W, L |
line-height or margin-top | causes line feeds when page is printed | use 'em' or 'ex' for value | W |
line-height | inherits absolute line-height from parent element if expressed as a number instead of calculating | avoid specifying line-height | W |
line-height | part of document not displayed when the block contains an image | use e.g. DIV markup so that line-height will not be applied to anything containing an image | W Demo |
list-style-type: none; and list-style: none; | question mark shown instead of list marker | omit margin, padding | M |
list-style-type: none; | adding margin or padding to UL or LI causes bullet to show | omit margin, padding | W, S |
margin | using margin shorthand on UL LI suppresses bullet | omit margin | W |
margin-top or line-height | causes line feeds when page is printed | use 'em' or 'ex' for value | W |
margin-left: auto; margin-right: auto; | should center elements, but does not | enclose in a DIV with text-align: center | W, M |
margin-right, margin-bottom, margin-left on inline element | behaves as though it was position:relative; bottom: 0px; | Unknown | W |
margin values | Negative values only allowed for margin-top and margin-left. | don't use negative values | W |
margin-top, margin-bottom | incorrectly applied to elements with default non-zero margins (Hn, BLOCKQUOTE, P) | Use DIV for vertical positioning | W |
OL, UL {color: #foofoo} | Color only applied to list marker | OL {color: #foofoo} *and* OL LI {color: #foofoo} | W |
padding or borders on 100% width elements | causes line feeds when page is printed | omit on pages likely to be printed | W |
padding on list elements | Suppresses list marker, ineffective | Use SPAN after <TD> | W,S |
position: absolute | applied in-line to a DIV containing a table will render all text within that container invisible in NN 4.05 | avoid | W |
position: absolute | applied in-line to a TABLE appears to crash any version of NN4.x (inluding 4.51) | avoid | W |
position: relative | applied in-line to a DIV containing a table will crash the browser | avoid | W |
position: absolute | based on BODY, not parent element | use nested DIV | W |
PRE | Doesn't render in monospace font | Declare explicitly | W (new to 4.5) |
PRE | declaring border destroys pre-formatting | include 'white-space: pre;' in rules | W demo |
Styles/Javascript | Styles lost | Unknown | M (Power PC) (10) |
TABLE and TR | You can't assign most styles to them | Assign styles to TD or TH instead | W (5) |
text-align in table, with padding set by CSS | doesn't align | use a nested table | W,S |
text-align on inline for floated child element | alignment inherits backwards into the parent | hack: enclose inline or float in <SPAN> | W |
text-align:justify with image | thrown randomly | use as beginning, or don't justify text | W |
text-align: justify | short final sentence justified | add a space between the last text character and </P> | |
text-decoration: none | only style set in final pseudo-class used | use separate classes to suppress underline | W |
UL, OL {color: #foofoo} | Color only applied to list marker | UL {color: #foofoo} *and* UL LI {color: #foofoo} | W |
Relative URI in CSS file | Interpreted relative to the HTML file instead of CSS file | Keep style sheet in top level or the same directory with HTML file | W (4) |
vertical-align | applies only to replaced elements | W | |
vertical-align | percent, sub and super unsupported | Use HTML's SUP and SUB | W |
"width:" | style is not recognized by netscape 4.0 browsers when its in a td | specify it with html (width="") |
Footnotes
[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. ^
[10] See Demo of problem provided by Bill Humphries. ^
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. Reference for such elements should be to the Master Grid provided by Eric Meyer at Webreview.