Browser bugs I’ve found

A list and links to test cases of browser bugs I’ve come across. If there are any work arounds they are indicted. I expect this list to grow, but, since so many people are ahead of me on this there might not be that many left to ﬁnd.

Bugs in multiple browsers
Firefox bugs
- When :first-line or :first-letter are combined with a dynamically applied class the styling is not applied
- Horizontal scroll bar on li if overflow: auto is used (ﬁxed in Firefox 1.5)
Internet Explorer bugs
Opera bugs
- Containing ﬂoats (ﬁxed in Opera 8)
- Opera not recognising ’ and ‘ entities(ﬁxed in Opera 8)
Safari bugs
- Safari defaults span attribute to 0 (ﬁxed in Safari 3)
- Safari crashes when using :hover::after

Bugs in multiple browsers

Browsers don’t implement font-weight consistently. The font-weight property in css specifies numeric values as well as keywords. Until recently browsers did not do much with the numeric values. I’ve created a test case.

It is important to note for this to work you need a font with all the appropriate weights. I don’t have one but Helvetica neue comes close which is the one being used here.

Browser	Font weight numeric values¹	Keyword	Lighter	Bolder
Firefox 3	yes	yes	yes	yes³
Opera 9	no	yes	yes²	yes
Safari 3	no	yes	yes²	yes
Safari 4β	yes	yes	yes	yes³
ie 6	no	yes	yes²	no
ie 7	no	yes	yes²	no
ie 8	no	yes	yes²	no

Instead of implementing multiple weights the numeric values are mapped 100–500 same as normal; 600–900 same as bold.
Works on bold content which becomes normal but when applied to normal text does not become lighter.
When applying bolder to font-weight: 300 it remains light instead of being set to normal (is this a bug?).

Styling tables

Browsers style tables poorly. Browser support for multiple css properties relating to tables — most notably the col, colgroup and the tr elements — is poor.

The table lists browses and properties. The row headings link to the test case for that property. Where a browser rendering is incorrect notes are after the table.

Css poperty	Firefox 2 & 3	Opera 9	Safari 2	Safari 3	ie 6	ie 7	ie 8
border on colgroup & col	yes	buggy¹	buggy²	yes	no	no	yes
border on tr	yes	yes	yes	yes	no	no	yes
border on tbody	yes	yes	buggy³	yes	no	no	yes
border on thead & tfoot	yes	yes	yes	yes	no	no	yes
border-style: hidden on tr	yes	yes	yes	yes	no	no	buggy⁶
border-style: hidden on colgroup	yes	yes	yes	yes	no	no	buggy⁶
border-style: hidden on td	yes	yes	yes	yes	no	no	yes
visibility: collapse on td & th	yes	yes	yes	yes	no	no	yes
visibility: collapse on tr	yes	buggy⁴	buggy⁴	buggy⁴	no	no	yes
visibility: collapse on colgroup	buggy⁵	buggy⁵	no	no	no	no	yes
visibility: collapse on col	buggy⁵	buggy⁵	no	no	no	no	no

Notes — I have not included properties that work in all the browsers tested so, background-color, color, borders on the td element and padding, since these all seem to work reliably.

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.
Safari incorrectly places a border below the tfoot element.
The table row should not be rendered, subsequent rows should move up to ﬁll the space as though the row is not there.
The table column should not be rendered, subsequent columns should move over to ﬁll the space as though the column is not there.
Horizontal borders-are hidden correctly. Vertical borders are not

Outline property the affecting layout — Firefox 1.5, 2.0, 3 and Opera 90.1 (ﬁxed in opera 9.5) allow the outline property to affect the layout of blocks. Accourding to the ccs 2.1 spec the outline property should have no affect on layout. In Firefox 1.5 and Opera 9.1 this is not so. In both if the containing element is set to overflow: auto then the outline is taken into account when positioning the block, while in Opera it affects the calculated width of the block but not its position.

The test case demonstrates the bug, there should be no scroll bars and no red should be visible.

Simple test case.

Styling `legend` tags

Recently I was trying to position legend tags and got nowhere — so I’ve put together a small grid of what works and what doesn’t. To be honest not a lot does, see the table below. I have also made a few test cases and notes.

Browser	absolute	relative	ﬁxed	margins *	width	left	right
Browser	position:				set	ﬂoat:
Firefox 1.5, 2.0 & 3	no	no	no	yes	no	no	no
Opera 8.5	buggy†	yes	buggy†	no	no	yes ‡	yes ‡
Opera 9	yes	yes	yes	yes	yes	yes ‡	yes ‡
Safari 2.03 & 3	yes	yes	yes	buggy**	yes	yes‡	yes‡
ie 8β2	yes	yes	yes††	yes	yes	yes‡	yes‡
ie 7	buggy†	buggy†	yes	buggy†	buggy	yes‡	yes‡
ie 6	buggy†	buggy†	no	buggy†	no	yes‡	yes‡
ie 5.5	buggy†	buggy†	no	buggy†	no	yes‡	yes‡

General notes on the table — styling the legend tag is at best hit and miss, Safari seems to do the best job of it, while Firefox seems not to even try. Interestingly Firefox 1 seemed to do more than Firefox 1.5, although I didn’t add it to the table since it is no longer current.

* positive margins — I’ve only tested positive margins since I couldn’t think of a good test for negative margins. Since positive margins are so poorly supported it seems unlikely that negative margins will work in any useful way.
† These browsers alter the ﬁeldset’s height, the legend tag ends up in the correct location but it should not change the ﬁeldset’s shape.
‡ There are two interpretations of how ﬂoated legend tags behave, one used by Opera 8 and Internet Explorer, moves the legend to the appropriate edge of the fieldset tag. The second used by Safari moves the legend down so that it is inside the ﬁeldset’s box as opposed to poking out the top like it does normally, Opera 9 now behaves in the same way as Safari. I think the ﬁrst behavior is correct.
** Safari only does the horizontal margin.
†† Something strange seems to happen to the hight of the fieldset when scrolling past. The field sets hight seems to decrease as the fixed position legend passes its fieldset.

Firefox

When applying styles using :first-line and :first-letter and using classes applied using javascript’s className method the styles are not applied.

A test case which illustrates the bug using the following code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" 
		content="text/html; charset=utf-8">
	  <title>Test case for applying styles with
		pseudo elements</title>
      <style type="text/css">
	    p
		  {
		    width: 300px
		  }
        p.test:first-letter
		  {
            color: green
		  }
        p.test1:first-line
		  {
			color: green
		  }

	</style>

	<script type="text/javascript">
		function dropCap()  {
                
    document.getElementsByTagName('p')[0].className='test';
    document.getElementsByTagName('p')[1].className='test1';
		}
	</script>
</head>
<body>
  <p>When you click the link the ﬁrst letter should 

become Green</p>	
  <p>When you click the link the ﬁrst line of this paragraph
        should become green.</p>
  <p><a href="#" onclick="dropCap();return false">Apply 
         the style</a></p>

  </body>
</html>

overflow: auto on list items (ﬁxed in Firefox 1.5). When an li element is set to overflow: auto Firefox creates a horizontal scroll bar in most cases. Short entries not containing block level tags don’t suffer from this problem

Simple test case.

The work around is to wrap the content of a list item in a div and set the overﬂow on the div instead.

Internet Explorer

IE 5.5 and 6 Incorrectly sets the left origin of the positioning coordinates to the edge of the content of the ﬁrst element of the containing block, instead of the edge of the relatively positioned containing block.

This occurs whether the preceding element has its left margin or left padding set. Strangely ie behaves correctly if the position is set relative to the right edge. It also behaves correctly if the containing block is positioned absolutely

I think the bug is explained by On having layout in the section Containing block, what containing block?

Simple test case.

IE 5, 5.5, 6 and 7 move an unﬂoated element to the position as though they had been ﬂoated. This only affects the element immediately following the ﬂoat.

Simple test case.

Incorrect positions when using right and bottom IE 5, 5.5 and 6. If the height of a relatively positioned block is an an even number or the width an odd number, any element that’s positioned absolutely inside that block and use bottom or right will be 1px out. They will be either 1px too high or 1px to the left of their correct position. This depends on the width or height of the containing block. If both occur the positioned element will be incorrectly positioned on both axes.

Simple test case and an unstyled version for those with standards compliant browsers so you can read the explanation.

Opera

Containing ﬂoats inside overflow:auto (ﬁxed in Opera 8). When a block set to, overflow: auto, contains ﬂoats Opera does not contain the ﬂoats correctly. See Super simple clearing ﬂoats at Anne’s Weblog for an explanation of why this is useful and see css 2 spec as to why it should work.

Simple test case.

Opera not recognising ’ and ‘ (ﬁxed in Opera 8). When using a xhtml doc type Opera does not display anything. The numeric references ‘ and ’ work ﬁne.

Safari

Safari defaults span attribute to 0 (ﬁxed in Safari 3). When the colgroup element does not have any child col elements and the span attribute is not set Safari defaults the value to 0. The span attribute should default to 1.

Simple test case.

Safari crashes when the hover pseudo-class is used to generate content (ﬁxed as of at least version 2.0.4 (419.3)). In an experiment with generated content, I discovered that attempting to use position: absolute will crash Safari when the user hovers over the element.

Since css 2 does not really cover positioning generated content this technique is of limited use, but it does work in Opera.

Simple test case.

Browser bugs I’ve found

Bugs in multiple browsers

Styling tables

Styling legend tags

Firefox

Internet Explorer

Opera

Safari

Styling `legend` tags