This page explains a problem I have with making The Favorite Start Page compatible with Mozilla Firefox. There are four red boxes on this page, all which contain the text "hey there" but have the styles overflow:hidden and width:1em. They should therefore be less wide than normal. Only the letters "he" show in my browser.

The first two boxes have display:inline-block and the last two have display:block. According to my understanding of CSS, that means that they should both be rendered as a block with respect to size, so that the width:1em style has effect for all four blocks. But the first two should be shown on the same line (next to each other), while the last two should be shown one above the other.

Opera 7 and Internet Explorer 5.5 or higher show all four boxes correctly, but Firefox 1.0 does not apply the width style to the boxes with display:inline-block. I think this demonstrates that there is a bug with inline-block in Firefox.

Firefox fans may object that instead of using inline-block I could have used just block and done the positioning of every box with JavaScript. However, this isn't so easy, because I want the boxes to be drawn correctly also while the file is loading, at which point it may not have been possible to run the JavaScript to position them correctly.

Another alternative is to "hard-code" the position into the boxes, for example with top:2em; left:2em. However, this has the problem that the vertical position is not proportional to the font size, because the boxes also have borders that have a fixed width. So if the user changes the font size, or the page is displayed on another computer than it was created on then the boxes may be distorted, and may actually overlap vertically.

If you have any comments (or a solution) then please contact me. This is the code I used:

<style>
.a {border:1px black solid; width:1em; overflow:hidden; display:inline-block; }
.b {border:1px black solid; width:1em; overflow:hidden; display:block; }
.c {background-color:red; white-space:nowrap; }
</style>
<span class=a><span class=c>hey there</span></span>
<span class=a><span class=c>hey there</span></span>
<hr>
<span class=b><span class=c>hey there</span></span>
<span class=b><span class=c>hey there</span></span>