...: Marsh Chatter
Simple CSS Differences Among 5 Browsers
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>
Here is the CSS styles used for this list:
border: 1px solid #AFBE96;
border-bottom: 1px dotted #A7BBCF;
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...
The other side?
What is on the other side of...
- the next page...
- the door...
- the wall...
- the lake...
- the sea...
- the ocean...
- the meadow...
- the forest...
- the lens...
- the atmosphere...
- the galaxy...
- the universe...
Exploring is our way - without it, we are nothing.
Take the challenge and explore!