Sometimes you might want to mix text buttons with image buttons and insist on using the button tag. However, Firefox aligns the text buttons lower then the image buttons.

Test page Workaround is not included
Reported by: Laurens van der Klis.

Opera honors max-width for images, but still uses the un-resized image width to stretch a table column.

Test page Workaround is not included
Reported by: Bp.

When border-collapse: collapse; is applied to a table with borders and a hidden cell, all browsers have issues:

Firefox hides border in the table entirely if all the cells in the row are hidden but the row element is visible. This can be resolved by hiding the row element.

Internet Explorer renders the border of the row that has all it's cells hidden. This can be resolved by hiding the row element.

Opera doesn't render all of the top border of a table if any of the top row cells is hidden and there is atleast one visible cell on the row.

Safari and iCab don't render the td border at all if a cell is hidden.

Test page Workaround is included
Reported by: Merri.

Firefox and Opera preserve the space of the column. The table column should not be rendered, subsequent columns should move over to fill the space as though the column is not there.

Test page Workaround is not included
Reported by: Marc Pacheco.

Safari and Opera leave a space where the row would have been. When visibility: collapse is set on a tr. The table row should not be rendered, subsequent rows should move up to fill the space as though the row is not there.

Test page Workaround is not included
Reported by: Marc Pacheco.

Opera incorrectly places borders separating the thead and tbody sections.

Safari incorrectly places borders separating the thead and tbody sections it also draws a border around every column contained in the colgroup not just the colgroup.

(ppknote: Explorer doesn't do anything)

Test page Workaround is not included
Reported by: Marc Pacheco.

If you have an element set to float:right; and you follow it with another element set to clear:right; float:right; and then follow those first two elements with a third element set to float:left;, the third element will not float next to the first element, even though it is not actually being cleared.

This bug is also present when the directions are reversed.

(ppknote: Strictly speaking this is a bug in Explorer, but I find Dan's reasoning compelling enough to publish his report unaltered. Besides, other web developers will conceivably run across this behaviour in Safari, Opera, or Firefox. Be sure to click the "real world example" link on the test page.)

Test page Workaround is not included
Reported by: Dan Richman.

Repositioned content via JavaScript coupled with floats is triggering a variety of bugs in various browsers.

Test page Workaround is not included
Reported by: Chris Hester.

When Opera 9 renders an input button inside a table cell it adds a gap to the right.

Test page Workaround is included
Reported by: Chris Hester.

The outline property affects block sizes when contained by an element set to overflow: auto.

Test page Workaround is not included
Reported by: Marc Pacheco.

A box with no specified width, overflow:auto, and next to a right float has the width "limited" by the float. When adding to it a negative left margin, in Opera the width is not stretched correctly.

Test page Workaround is not included
Reported by: Bruno Fassino.

Adding a background-color or background-image to html:before or html:after does not work in Opera, if the pseudo-element is positioned or if it has display:block.

The same CSS works flawlessly on body:before and body:after.

Test page Workaround is included
Reported by: Leif Halvard Silli.

In Firefox, when a button element and an input[type=text] element share a form, and the button element has a click handler, then that click handler function will get fired when the user focuses on the input[type=text] and presses return. The first time, the event target will be the input[type=text] element, but the second time it happens, it'l be the button element.

Workaround: use input[type=button] instead.

Test page Workaround is included
Reported by: Isaac Z. Schlueter.

Events registered on img objects don't fire if the image has an associated image map, and the targeted part of the image is part of an area.

Test page Workaround is included
Reported by: Steve Joynt.

When using a background-color on a span of inline text, while in text-align: justify, Opera 8 draws the background color before the word wrap. This leaves background colors behind when the foreground text is word-wrapped to the next line.

This has been corrected in Opera 9.

Test page Workaround is not included
Reported by: Howard Russell.

If a blockquote inside a list is positioned relatively, the list marker appears lower down, or not at all.

Test page Workaround is not included
Reported by: Chris Hester.

In Safari and Opera the 'dblclick' event can not be attached using addEventListener.

Test page Workaround is included
Reported by: Jorge Biaggini.

In Opera 8.5, putting an absolutely positioned element inside a fixed positioned element results in the absolute positioned block disappearing completely.

This bug is solved in Opera 9.

Test page Workaround is not included
Reported by: Squeeself.

When changing overflow from auto to visible for an element with fixed width, Safari 2.0.3 correctly hides the scrollbar onmouseover, but it doesn't create a page scrollbar.

Opera has similar problems.

To make Safari repaint the page you have to additionally change e.g. the positioning, formatting or dimensions of that element.

Test page Workaround is included
Reported by: Moritz Stoltenburg.

Positioning legend tags — what works and what doesn't? To be honest not a lot does.

I've tested — position: absolute, fixed, relative, floats margins and setting widths.

Test page Workaround is not included
Reported by: Marc Pacheco.

An absolute positioned element inside a fixed positioned element disappears after scrolling down one page height.

div#sidebar { position: fixed; top: 0; bottom: 0; }

div#disappearing { position: absolute; bottom: 0; }

ppknote: Opera 9 beta has a different bug, but this situation is still buggy. It doesn't recalculate the height of the fixed layer when the page is resized.

Test page Workaround is not included
Reported by: Chris Sullins.

Setting LI margins (margin-top:40px; margin-bottom:0px) or any other combination does not change the layout: Opera *always* duplicates the margin-top value for the bottom margin.

Tested in Opera 8.51. ppknote: Solved in Opera 9.

Test page Workaround is included
Reported by: Spark.

When a button is floated in Opera, it causes it to lose the image of the button. Only the text remains.

Test page Workaround is not included
Reported by: Chris Hester.

Explorer Windows and Mac, Mozilla and Opera see <fieldset>s as form fields, even though the spec doesn't mention them in the list of control types.

Mozilla and Opera allow change events on <fieldset>s, even though they don't make sense.

Test page. Workaround is not included.
Reported by ppk.

When a radio button or a checkbox has a value="" (empty), Opera nonetheless reports a value="on".

Test page Workaround is not included
Reported by: Markus Fischer.

The INPUT (type=text/password) field in IE6 (and older probably too) has a top and bottom margin of 1px in both quirks and standard mode. This can cause a not so nice effect.

(ppknote: Opera and Safari have the same problem with the right margin)

Test page Workaround is not included
Reported by: Marcel Lipovsky.

The following will throw an exception:

var button=document.createElement("button"); button.type="button";

The only workaround for dynamically creating <button type="button"> seems to be to convert the button HTML to a string and append it to innerHTML.

Test page Workaround is included
Reported by: Garret Wilson.

Applying a JavaScript highlighter rollover function to a table cell or row, which has a caption element, causes the color re-draw to be applied incorrectly.

Test page Workaround is included
Reported by: Alun Jones.

Opera 7.x-8.5 will add padding-bottom to an object that is equal to the border-top if you use border-width and have the object positioned bottom.

I have found a workaround. If you do not have four seperate values for border-width the bug isn't rendered. You can also use border-color and border-style and use border: to set four seperate values for border-width without actually using the border-width syntax.

Test page Workaround is included
Reported by: John A. Bilicki III.

Opera 8.02 does have a maximum (2048) and minimum (-2048) values for "background-position" property.

If the given value exceeds this numbers, it will be treated as the corresponding extremum. So the declaration:

background-position: 4000px 10px;

will result the same as

background-position: 2048px 10px;

No straight-forward workaround seems to be possible. Consider not using such a large numbers at all.

Limit for IE6 is 100 millions of pixels, literaly.

Test page Workaround is not included
Reported by: Constantine Vesna.

The document.getElementById() function returns an element with a name attribute that is equal to the id specified.

Test page Workaround is not included
Reported by: Chris Bloom.

On Opera, if a webpage has a CSS with a:visited, a:link that involves changing the size of the element, there is a severe performance penalty when offsetHeight/Width or any type of style reading using getComputedStyle is used in functions.

The style reading functions seem to be executed no less than 150 times slower, and the execution may be up to 350 or more times slower with certain combinations. The interesting point is that, the styles do not need to effect any actual element on the page: #nosuchelement a:visited {...} is enough to cause the slowdown.

Test page Workaround is not included
Reported by: Emrah BASKAYA.

When an element is positioned outside its parent element, Mozilla gives 0 as offsetWidth, Opera -1.
Mozilla also gives incorrect values, when some part of element is on the border of element. It gives back the size of "visible" area in parent element. So when half is in and half out, it gives half of the real width.

Test page Workaround is not included
Reported by: Mojmir Nebel.

Without an explicit width set, overflow:auto and overflow:scroll do not work in Opera 6.06, 7.23, 7.54 or 8.0. Oddly enough it does work in Opera 7.02, except Opera 7.02 ignores max-width.

Test page Workaround is included
Reported by: Kravvitz.

When trying to break a list of floats into rows with clear: left on the first cells in the future "rows", the cells after the cleared ones just fill up the remaining space from the previous "rows" as long as the parent's width allows.

Test page Workaround is included
Reported by: Valentin Agachi.

A background on a TR doesn't work. Instead the TDs inherit the TR's background image.

Test page Workaround is not included
Reported by: Valentin Agachi.

A percentual width of an abolutely positioned element should be calculated relative to the containing block (the body, if there is no other absolutely positioned element. Unfortunately Explorer (Win and Mac) and Opera calculate the width relative to a static block that contains the HTML for the absolute element.

Test page Workaround is not included
Reported by: G�rard Talbot.

window.opener.closed works in IE 6 but not in Mozilla or Opera due to a known bug. Also, in IE 5 window.opener.closed DOES NOT work correctly due to another known bug. I also have a longer writeup in my blog.

Test page Workaround is included
Reported by: Yakov Shafranovich.

In Opera 8.0, links lose their default underlining style when text-align is applied to them.

Test page Workaround is included
Reported by: Chris Hester.

When an empty ALT attribute is used on an IMG tag, Opera 8.0 uses diagonal borders around the image - it draws a diamond instead of a rectangle.

Test page Workaround is not included
Reported by: Chris Hester.

Opera 7 shows a rough quantization error when a margin or a padding is expressed in em units and the value of the property is greater than (about) 20.47em. In these conditions the decimals are simply ignored. For example, all margins of 21em, 21.1em, … up to 21.9em are rendered exactly the same. This is not a simple rounding error.

Test page Workaround is not included
Reported by: Bruno Fassino.

When a block set to overflow: auto contains floats Opera and Explorer Windows don't contain the floats correctly.

Test page Workaround is not included
Reported by: Marc Pacheco.

When using an attribute selector like label[accesskey] in conjunction with the display: block: on a label element, a child select box will go blank and/or act strange in mozilla/firefox.

In Opera the last two "act funny" boxes also act funny.

Test page Workaround is included
Reported by: Brian Latimer.

If the string "text-transform: capitalize" is text-transformed to capitalize, should the "t" of "-transform" be capitalized, too?

Opera and Mozilla say No, but they're in the minority. Therefore this is officially a bug in Opera and Mozilla.

Test page. Workaround is not included.
Reported by ppk.

Opera misplaces absolutely-positioned elements when their containing block is subject to text-align of center or right. It places them where they would have been if they were subject to text-align:left.

Explorer Mac positions the text correctly, but makes the divs far too wide.

Note that you need to be setting display:inline on a DIV, or similar, to be affected by this.

Test page Workaround is not included
Reported by: Phil Endecott.

Opera 7.54 seems to ignore a click EventListener on Select boxes in capturing phase.

The test case containers the smallest code needed to reproduce the bug. A workround is not possible in the capturing phase.

Test page Workaround is not included
Reported by: Jorgen Horstink.

In some browsers getAttribute("HREF") on an A element returns a complete URL, even if the HREF attribute in the source specified a relative path. In others it returns the exact text of the attribute in the source, which may be relative.

All browsers put the complete, resolved, URL for an A element in its .href property. In Explorer (Win and Mac) and Opera 8 the same value is returned by getAttribute("HREF"), while Mozilla (FF1.0), Safari and Konqueror (3.2.2) return the source value. I consider the latter behaviour to be correct.

The test case contains two links, the first absolute and the second relative, and reports the values of .href and getAttribute("HREF") for each. It is the last reported value that differs.

Test page Workaround is not included
Reported by: Phil Endecott.

The hover selector combined with an adjacent selector (dt:hover + dd { color : red; }) works buggily (Safari) or not at all (Opera), while these browsers support the two of them separately.

Test page. Workaround is not included
Reported by: Randall Hansen.

An absolute layer positioned on top of an iframe will always disappear behind the iframe, even if you set its z-index.

Test page. Workaround is not included.
Reported by ppk.

When you click on a label, the click event of the related form field should fire. Unfortunately Opera and Explorer Mac don't always do this.

Explorer Mac doesn't fire the click event on text fields and textareas, while Opera only fires the click events on radios and checkboxes.

Test page. Workaround is not included.
Reported by ppk.

Opera 7.54u1 and 8.0 Beta show a different dotted border style depending on the length of the text styled.

Test page Workaround is not included
Reported by: Chris Hester.

Giving a <button> element a margin-bottom makes the text drop down.

Test page. Workaround is not included.
Reported by ppk.

In Explorer Windows an element both floated and cleared is ignored by a subsequent float: the latter is positioned higher than the former, and overlaps it.

Explorer Mac and Opera don't get it quite right, either, but they're not as bad as Explorer Windows.

Test page Workaround is not included
Reported by: Bruno Fassino.

When navigating between named anchors in IE, the window.location object changes to reflect the change in the URL. This is correct. However, the window.location object should also change when you use the back or forward buttons, or the history.back() and history.forward() methods, to move between these anchors, and in IE 6.0 and IE 6.1, it does not.

Opera has exactly the opposite bug: it never shows the hash.

Test page Workaround is not included
Reported by: Isaac Z. Schlueter.

The box model of a td turns out to be unchangeable in Explorer (Win and Mac), Mozilla and Opera. Explorer Mac forces it into the traditional model, while the other browsers force it into the W3C box model.

Therefore you can't switch the box model of a td, something that is possible for any other element.

Explorer Windows, though, switches the TDs to the correct box model when you use table-layout: fixed. Unfortunately this does not work in the other browsers.

Test page. Workaround is included only for Explorer Windows.
Reported by ppk.

When clipping an element in Opera any underlaying content becomes visible, but does not allow user interaction. The clipped region is somehow still obstructing the content.

Bug is at least present in version 7.5x and the latest version 8 previews.

On a side note: the testpage also reveils a nice IE-thingy: the clipping is not applied through CSS which might make you believe that IE is not capable of clipping through CSS. However, when the same style is applied using javascript it works!

Test page Workaround is not included
Reported by: Tino Zijdel.

When an element has a CSS rule applied using 2 ID-selectors, eg.
#element1 #element2 { background-color: red; }
it is impossible to dynamically change those style-properties through javascript.

Applies at least to Opera 7.5x and latest 7.6 previews.

Test page Workaround is not included
Reported by: Tino Zijdel.

The getAttribute() method allows you to read out any attribute from any tag. Except in Opera 7.54 and lower, which refuses existing attributes on the wrong tag.

Test page. Workaround is not included.
Reported by ppk.

Opera doesn't accept a cursor: pointer for an input type="submit".

Test page. Workaround is not included.
Reported by ppk.

Mozilla and Opera split up one huge text node into several smaller text nodes. Explorer Mac acts weirdly.

Maximum text node sizes:

• Mozilla: 4K
• Opera: 32K
• Explorer Mac: 64K (?)

Test page. Workaround is not included.
Reported by ppk.

Anchor (or "#name")links don't work when the target anchor is inside an overflowing element.
Solved in Opera 7.60p3

Test page Workaround is not included
Reported by: Sander Grendelman.

When you navigate with the Back and Forward buttons, Opera doesn't fire any load and unload events.

Test page. Workaround is not included.
Reported by ppk.

font-weight: 600 and font-weight: bold are not equivalent. The browsers stretch up their fonts when you use 600. For a really correct bold font you must use bold or 700.

Mozilla exhibits a similar bug only on Mac: any text with font-weight: 600 appears as normal, non-bold text.

Test page. Workaround is included.
Reported by ppk.

In certain situations Opera seems to copy the padding-top to the padding-bottom.

Test page. Workaround not included.
Reported by myf.

Floating doesn't work in absolutely positioned elements.

Test page. Workaround is included.
Reported by ppk.