Small Flaw of StumbleUpon User List (Firefox only)

If you stumble a lot using Firefox, you must have already seen disordered user lists like this one (two blank seats in the second row):

StumbleUpon User List

This screen shot was taken from a page on StumbleUpon which received 35 reviews. StumbleUpon automatically finds out who’s living in the same city with you and places them in the beginning of the list. To make it more clear, StumbleUpon adds an “city” icon (city) in front of the user’s name.

Yes. This icon caused the mess of the list. Using Firebug to inspect the elements, I found the dimensions of the first two list items with city icon to be 145×89, whereas the other items in the list have dimensions of 145×88. This 1px difference, according to the CSS rule, made left-floating elements to be positioned on the right of them rather than under them.

In fact, just one more CSS rule will fix this issue:

div.listPeople dl {
line-height: 16px;
}

Another solution is to have “clear:both” style on each element starting a row.

This page looks OK in all other major browsers including IE 6, Opera 9.24 and Safari 3.0.4 as I tested. However market share of Firefox is growing steadily, so websites should pay enough attention on it. Besides, with the great power of Firebug, it’s much easier to develop a site for Firefox compared to the ancient browser – IE.

Readonly Text Input Background Color in Firefox

The other day I was stuck when trying to make the background-color of a readonly text input white in Firefox.

Today lots of sites are using readonly text inputs to carry out some urls for propagation or some code snippets for embedding in your own pages. For example, every Youtube video has such a input field just on the right of it. When you click on it, the text gets selected and you can press Ctrl+C to copy it to the clipboard.

The code is like this:

<input type="text" readonly="readonly" value="some read only text..." onclick="this.select()" />

and the rendered output:

In all other major browsers it looks like a normal text input. But in Firefox, the background color is made gray (#D6D5D9, actually), maybe emphasizing the difference. There are always cases when we want to make it white. But when added “background-color:#FFFFFF;”, it showed no difference. At that time I thought I couldn’t change the background color.

But soon I found the “white” text input when watching this video (I love the puppy!). After inspecting the code with Firebug I found it was “border:1px solid #D2D2D0” who did the trick. Adding it to the example code above:

Then I found that the background color is ok with any color except #FFFFFF. For example, setting it to “#FEFEFE” (Almost white. And note the default border style is “outset”):

Weird, isn’t it? I don’t know if it’s a bug or “feature”.