On this page

Browser bugs

Why this page?

Many sites discuss hundreds of bugs which have been found in browsers. Some collections bring many of these together the most comprehensive of which is probably that of Gérard Talbot. In spite of this new bugs emerge from time to time. Here I document a few that I have encountered recently and which appear to be relatively unknown or poorly reported.

  • Margin on clearance element (MSIE 6 & 7)
  • Delayed margin collapse on clearance element (MSIE 6 & 7)
  • Float and italics (MSIE 7)
  • Positioned element with offset not specified (MSIE 6 & 7)
  • Positioned element destroys margin on in-flow element (MSIE 6 & 7)

The accompanying files are test cases. In order to simplify the test cases most of the explanation will be found on this page under the corresponding heading with minimal description in the case files.

All the bugs apply to MSIE version 7 and some to version 6. View using these browsers to see the problem involved. View using other browsers to see normal behaviour.

1 – Margin on clearance element

In test case (case 1) the green bordered box is floated left and has no bottom margin. Following it is a paragraph with a narrow red border set to clear left. The paragraph has a top margin of 20px. The paragraph border should touch the box border because the top margin should be ignored.

The clearance of the generated box is set to the amount necessary to place the top border edge below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document. (CSS 2.1 Specification 9.5.2)

MSIE7 adds a gap between the green box and the clearance element equal to the top margin on the clearance element. This problem also occurs with MSIE6.

This case is included in a collection by Bruno Fassino .

Earlier I reported this as part of my next (test case 2). I now realise that this next is more complex and it is better to separate it into two parts one of which is test case 1.

2 – Delayed margin-collapse on clearance element

Test case 2 is similar to test case 1 but the last element in the inflow (wrapped) text collapses its bottom margin against the top margin of the clearance element. This would not be so remarkable if there were not ample space for the margin to dissipate but is seems to be stored ready to do battle against any intruder. In this case a heading with bottom margin of 40px results in a 40px gap between the boxes when using MSIE 6 or 7 in spite of the fact that on a screen of 800px or greater width there is a gap between the heading and the clearance element (if correctly positioned) of about 160px.

From the numbers used and comparing with test case 1 it is clear, without further cases, that the two margins involved collapse.

This case is also included in the collection by Bruno Fassino .

Eric Meyer has a useful article on collapsing margins.

3 – Float and italics

Various problems have been reported when using italicised text with MSIE7 however I have found no prior reports of the effect found in my test case 3 in which text in a floated division opposite italics is sometimes hidden.

The conditions in which the hiding occurs are

  • Non floated text is contained in a non-positioned division
  • The non-positioned division has a background image
  • The floated division carries text
  • The background image mentioned is located behind the floated text
  • The non-floated text (wrapped text) is at least partly italicised.
  • Italisation reaches the end of a line and wraps to the next line. When this occurs the floated text is hidden behind the background image.
  • Once the hiding action has been switched on it continues even after the italicisation ceases.
  • If the background image finishes for any reason (vertically or horizontally) the hiding also finishes. The effect is as if a stacking error has occurred.

The effect occurs only with MSIE7 it does not occur with MSIE6.

If the containing division is positioned or is the initial containing block the effect does not occur.

4 - Positioned elements with offset not specified

This case and the next have similarities in that, when one or more positioned elements, which are removed from the flow, immediately precede an element in the flow, they can adversely affect each other's position. They also share a common workaround.

In test case 4 where positioned elements which are not in the document flow (absolute or fixed position) are used without specifying a corresponding offset, the value used should be that inherited from the element's parent. Effectively this means that the element should not move from where it would have appeared if not positioned.

With MSIE 7 this is sometimes applied correctly but, if positioned elements are followed by one in the document flow which has a horizontal margin set, the horizontal placement of the positioned elements is computed, not from that of their parent but from that of the next following in-flow element. The demonstration includes both absolute and fixed position elements to show that the effect is not unique to either.

This case is probably that covered by Peter Paul Koch. Related cases have been reported by Gérard Talbot. I offer a workaround which does not appear to have been documented previously.

5 - Positioned elements destroy margin of other elements

Test case 5 reproduces test case 4 with one difference. In this case the element in the flow has a top margin. When viewed using standards conforming browsers this displaces the square as expected but with MSIE7 no change in position results.

The same workaround as used with case 4 may be employed.

This case has been reported by Bruno Fassino for MSIE7 but also applies to MSIE6.

Test setup

Tested using Windows XP Home Version 5.1.2600 SP2 Build 2600. Internet Explorer version 7.0.5730.11

References