clear: both not obeyed on <br>

<br style="clear: both"/> is not obeyed following some <a>-tags that have been floated left. The following <div> with the heading is displayed to the right of the floated elements instead of being displayed below them.
NOTE the test page is served using application/xhtml+xml and thus won't show in IE.

Test page Workaround is not included
Reported by: Bjarne Mathiesen.

(Orphaned), Opera | Reported on 7 December 2004.

Atom RSS

This site heavily relies on bug reports created by its readers. Anyone can report a bug and be published.

Main navigation:

Search reports by browser:


(Add your own)

1 Posted by Chris Hester on 7 December 2004

The break tag is *inside* the menu div. So surely that will not affect the header? I tried clearing the header div instead but nothing changed. I then tested it in Firefox 1.0. Interestingly, if I remove the break tag altogether, it makes no difference in that browser. The header is still positioned centred. Nice rounded corners though!

2 Posted by Bjarne Mathiesen on 7 December 2004

1) Gecko-based browsers: There's an effect when removing the clear:both. The heading will then be written on top of the subMenu
2) Gecko-based browsers: when moving the clear:both outside of the subMenu you get the same behaviour as originally intended
3) Opera: there's no change in behaviour no matter whether the clear:both is present or not or whether it's placed inside or outside the subMenu. It looks as if both the float:left is somehow inherited by the heading and the clear:both ignored

Ther rounded corners is just a css-style from css3 that been implemented in Gecko as a proprietary style

3 Posted by Wout van der Klip on 8 December 2004

Actually, this bug doesn't occur in Opera 7.23: the heading is nicely displayed below and centered. The background gif however is vertically centered instead of bottom, and the bogey menu-items don't show the mouseover effects (yellow background)
Opera 7.54 is buggy indeed.

Post a comment

Commenting guidelines:

  1. When quoting specs, articles or your own research, please include a URL of the document.
  2. Test your stuff. When reporting browser behaviour, make sure that your report is correct.