Firefox Bug

This is a demo HTML file showing a rendering bug in Firefox.

The outer div element has its background set to an image: http://static.wikidot.com/common--theme/bloo/images/body_bg.png centered and tiled vertically.

The inner div element has width set to 748 pixels and left and right margins set to auto, which basically means, the div contents are centered. The whole div area should be black.

The size of the inner div is exactly the size of white space in the image minus 2 pixel. This renders as two 1 pixel wide bars outside the black area.

Unfortunately when the outer div element is odd-number wide, the image is moved one pixel left from the inner div element, which renders as a single 2 pixel wide bar at the left of the black area and nothing at the right

See the example code:

<html>
<body>
<div style="background: url(http://static.wikidot.com/common--theme/bloo/images/body_bg.png) repeat-y center">
    <div style="width: 748px; margin: 0 auto; background: #000; height: 50px">
    </div>
</div>
<p>This is a demo HTML file showing a rendering bug in Firefox.</p>
<p>The outer div element has its background set to an image: http://static.wikidot.com/common--theme/bloo/images/body_bg.png centered and tiled vertically.</p>
<p>The inner div element has width set to 748 pixels and left and right margins set to auto, which basically means, the div contents are centered. The whole div area should be black.</p>
<p>The size of the inner div is exactly the size of white space in the image minus 2 pixel. This renders as two 1 pixel wide bars outside the black area.</p>
<p>Unfortunately when the outer div element is odd-number wide, the image is moved one pixel left from the inner div element, which renders as a single 2 pixel wide bar at the left of the black area and nothing at the right</p>
<p><a href="http://piotr.gabryjeluk.pl/firefox-bug">Back to my sites</a></p>
</body>
</html>

See it in action: resize the browser, pixel by pixel, to see the oddity

Not: for some reason having the code loaded in iframe does not trigger the bug.

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License