a view of the Marsh ...: Home

It's 2011 and the 5 primary browsers all of us use, still don't handle simple things the same. The following highlights just one aspect - the styling of a drop down list (DDL).

Here is the HTML source code which displays the list:

<select name="DropDownList1" id="DropDownList1">
     <option value="">Item 1</option>
     <option value="">Item 2</option>
     <option value="">Item 3</option>
     <option value="">Item 4</option>
     <option selected="selected" value="">Item 5</option>
     <option value="">Item 6</option>
     <option value="">Item 7</option>
     <option value="">Item 8</option>
     <option value="">Item 9</option>
</select>

Here is the CSS styles used for this list:

select
{
    margin: 0;
    padding: 0;
    vertical-align: middle;
    height: 20px;
    font-size: 10pt;
    border: 1px solid #AFBE96;
    background-color: #F3F8F9;
}

option
{
    padding: 1px;
    border-bottom: 1px dotted #A7BBCF;
}

option[selected]
{
    font-weight: bold;
    background-color: #FFFFB3;
}

The Resulting View in 5 Browsers

So what's the difference? Let's list them...

4 browsers display the correct highlighted backcolor for the selected item (e.g. yellowish). Internet Explorer does not.
1 browser displays the correct forecolor/style for the highlighted item (e.g. black/bold). That browser is Firefox.
The default width of the list enables the items to be fully visible, in 4 of the browsers. Opera includes the vertical scrollbar - causing the list items to be obscured.
Only one browser displays the lightly colored dotted line under each item, used to distinctly define each item. That browser is Firefox.

Remember, the styles used are simple, set directly to the HTML element name vs. assigning a class to the element and getting a case of classitis in your CSS file. Classes are OK, but you should try to define to the elements first - for consistency across your site.

I use Firefox to design pages for my applications and have since 2004. It has consistently enabled me to use more of the CSS standards than the other browsers - and I don't even push the envelope with CSS like many of the developers who enabled me to learn.

It is small things like this that make me wonder - when... when will even the simple things be handled by all of the browsers? Forget the trick, cool, passing the Acid test stuff... why won't they each allow borders and foreground styles in something as basic as a DDL? There certainly is more items like this - one which raises everyone's hackles, the differences in handling the box-model would be wonderful if a 100px box is a 100px box on all browsers. But that discussion is handled in a lot of places on the web.

I will end this discussion with a few links to sites which I have learned from. Many thanks to them for sharing...

Eric is an author and he wrote the first book I read on CSS. http://www.meyerweb.com/
Roger is a fan of Accessibility in web sites and this interest led me to his site. Excellent information and tips. Additionally, several of the Detroit Red Wings are countrymen of his, and he is a hockey fan... so he must be an OK guy! http://www.456bereastreet.com/
The CSS Zen Garden shows why CSS is a powerful way to style your site. http://www.csszengarden.com/
Great information - tips/tricks. Must go to if you want to understand why things work the way they do (or don't). http://www.positioniseverything.net/
Developers must have Stack Overflow "favorited/bookmarked" - it's a requirement! This is the CSS content. http://stackoverflow.com/questions/tagged/css
Stu has a huge collection of examples. I learn something new every time I go there. http://www.cssplay.co.uk/