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.

Sue Sims