a view of the Marsh

...: Chatter by Year

2016

October

2014

March

February

2013

September

July

June

March

February

January

2012

December

November

October

September

August

July

June

May

April

March

February

January

2011

November

October

July

June

May

April

March

February

January

2010

December

November

October

September

August

July

June

May

April

March

February

January

2009

December

November

October

September

August

July

June

May

April

March

February

January

2008

December

November

October

September

August

...: Chatter by Keyword

ASP.NET

Browsers

Business

Cascading Styles (CSS)

Charity Work

Community

Definitions

Design

Education

Ethics

Firefox

First Post

Hockey

I.T. Events

Internet Explorer

Junk mailer/poster

Life

Microsoft

MS Access

Music

Other sports

Printers

Programming

sci-fi

Software

Speaking/Presentations

SQL

Survey

Teaching

The Marsh

Tips & Tricks

Tools of Trade

U.S. Events

Visual Basic (VB.NET)

Web Design

World Events

...: 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>
</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

image

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...

Enjoy...