<option disabled=”disabled”>?</option> not implemented in MSIE

This was a complete shock to me recently, even after years of ‘assuming’ that something this simple would be well supported… after all, this is pretty basic.

All modern browsers Mozilla (Firefox), Safari, Opera, even old Netscape (eg: 4.x) browsers work properly with the following code and comply with the W3C HTML specification making the value “Two” unable to be selected by the user within the browser… MSIE doesn’t comply and allows the user to select it!

<form name="example" action="#" method="get">
<select name="test">
<option value="1">One</option>
<option value="2" disabled="disabled">Two</option>
<option value="3" selected="selected">Three</option>
<option value="4" style="color:green;">Four</option>
</select>

</form>

This ‘failure’ to support standards actually seems to be due to the way the <select> tag is handled by the browser… it passes off control to the operating system (Windows). Obviously, Microsoft was able to pass along ‘other’ attributes, like ‘style’ in the example above, but chose to not support ‘disabled’.

In this case, the developer is left to find a solution… easiest is to just remove the unwanted value from the list of options, otherwise it requires extensive amounts of JavaScript.

Good luck!

NOTE: Tested on MSIE 6.0 (WinXP), hopefully Microsoft will fix this in MSIE7.

vs.

The href=”#” markup is pretty common in many HTML primers and most developers are used to seeing it, and don’t even question why it might be ‘bad’. Here’s the problem… “#” is supposed to be used for anchors within a page (for times when you want a user to be ‘scrolled’ to certain content on the (sometimes very long) page. Typically this is done to link from an index to specific paragraphs or chapters.

Example:


Title
<a name="top"></a>
<a href="#chap1">Chapter 1</a>
<a href="#chap2">Chapter 2</a>
<a href="#chap3">Chapter 3</a>

<a name="chap1"></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque aliquet commodo diam. Ut scelerisque, nisl id laoreet consequat, pede lacus consequat est, id consectetuer neque augue a odio.
<a href="#top">Back to Top</a>
<a name="chap2"></a>Cras vel odio. Vestibulum fermentum rhoncus sapien. Donec vehicula euismod nunc. Duis malesuada erat non nulla. Cras ullamcorper diam ut ante. Nullam quam felis, suscipit vel, ultrices non, laoreet sit amet, nulla.
<a href="#top">Back to Top</a>
<a name="chap3"></a>Cras et sem vel enim hendrerit accumsan. Fusce lobortis lobortis quam. Proin egestas justo a purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
<a href="#top">Back to Top</a>

The problem… and the cure…
If you use href="#" by itself, the browsers behavior is to take you to the very top of the page (like when it first loads). This is great on static sites, but as soon as you start adding some JavaScript events (onclick being most common), you’ll start seeing the problem.

Most developers, when coding the ‘onclick’ for an href, automatically (or by habit, or reliance on “tools”), stick the href=”#”…. by doing so, their action occurs, but as an unwanted side-effect, the browser also scrolls the content. This often takes an incredible amount of time for them to realize what’s really happened, particularly because you need enough content on the page to even see the scroll occur.

The solution, just replace the href=”#” to have a null javascript event… for compatibility with a wide variety of browsers, I recommend using href=”javascript:void(0);” in theses cases.

Good Luck!

Whoami

I’m skotfred, aka ‘Giant Geek’, developer of (predominantly web-based) applications. Primary development done with JSP/Java, PHP, XHTML/CSS/JavaScript. Previous applications in VisualBASIC, C/C++, Perl, COBOL/CICS, BASIC (various), Assember (PC & MVS), and Pascal.

Standards ARE everything, particularly when building for multiple platforms… look for more ramblings soon!