bug 119 - no title for options or select in IE6

Issue: #119
Affects: IE6
Note: Updated synopsis to include the select element, not just the options.

Have you ever wanted to provide more descriptive text in the form of a tooltip in your Web applications? Of course you have. It may have slipped your notice though, that this doesn't work on select list options (or even the select list itself) in IE6 (fixed in IE7).

Example:

<select size="3">
  <option value="1" title="Web Bug Track">WBT</option>
  <option value="2" title="Bugzilla Bug Tracking">Bugzilla</option>
  <option value="3" title="Tracker Bug Track">Tracker</option>
</select>

WBT
Bugzilla
Tracker

Known Workarounds: None.

Related Issues: (bug 291) (bug 280).

Bug/Site Feedback |
Submit a bug

bug 338 - Ordered lists with CSS break in IE

Issue: #338
Affects: IE6, IE7

The ordered list element <ol> in HTML allows developers to present an ordered list of items. Believe it or not, 1 (one) CSS property can make it render as:
1,1,1,1,1,1,1,1,1,1 (in fact you'll never get a 2!)

You don't believe me, do you? ;-) I'm not surprised I still can't believe it.

check out the example list below in any non-IE browser, and you will see the numbers 1,2,3,...8,9,10. View the exact same page in IE (6 or 7), and you will only get 1,1,1,...1,1,1.


Example 1:

Sorry, the blogger software is making this bug not appear. I'm going to find a remote host for the sample file soon. - thanks.

Update: A sample file is now hosted remotely here. http://www.filemonster.net/en/file/8663/IE-OrderedListBug-html.html

1. One One One One One One
2. Two Two Two Two Two Two
3. Three Three Three Three Three Three
4. Four Four Four Four Four Four
5. Five Five Five Five Five Five
6. Six Six Six Six Six Six
7. Seven Seven Seven Seven Seven Seven
8. Eight Eight Eight Eight Eight Eight
9. Nine Nine Nine Nine Nine Nine
10. Ten Ten Ten Ten Ten Ten

All you need to do, to get IE to break, is set the CSS width property on the OL element, and the LI elements (inline or in a CSS selector/class.

But wait! there's more!, if you don't add the CSS width to the LI elements, just the OL element, you get this, the "Chris Angel" Ordered List, where ALL the numbers disappear!

Example 2:

1. One One One One One One
2. Two Two Two Two Two Two
3. Three Three Three Three Three Three
4. Four Four Four Four Four Four
5. Five Five Five Five Five Five
6. Six Six Six Six Six Six
7. Seven Seven Seven Seven Seven Seven
8. Eight Eight Eight Eight Eight Eight
9. Nine Nine Nine Nine Nine Nine
10. Ten Ten Ten Ten Ten Ten

Known Workarounds: None.

Related Issues: None.

bug 111 - IE Broke The Web 2.0

Issue: #101
Affects: IE5, IE5.5, IE6
Trackers:
MSKB Tracker: 177378
Fixed in: IE7

The most significant part of Web 2.0, was the ability to put more relevant content on the screen for a user. It could be a Gmail popup with a users' avatar, or a DHTML inline popup calendar, an AJAX based "lightbox", or the coolest form widgets we've ever seen, etc.

Almost any "Web 2.0" site/application uses some level of floating elements... but unless you only support IE >= 7, doing this requires an intimate knowledge of IE's worst rendering bug ever.

No matter what CSS z-index you set, you can't float an element (like a div) over a select list!

Example:

<style type="text/css">
#item_1 {
  left: 75px;
  position: absolute;
  top: 75px;
  z-index: 0;
}
#item_2 {
  background-color: #efefef;
  border: 1px solid #0000ff;
  display: block;
  height: 200px;
  left: 100px;
  position: absolute;
  top: 100px;
  width: 300px;
  z-index: 9999;
}
#item_3 {
  left: 150px;
  position: absolute;
  top: 150px;
  z-index: 10;
}
</style>
<select id="item_1">
<option value="4">Always Renders Through!</option>
</select>
<div id="item_2">This should float over anything!</div>
<select id="item_3">
<option value="7">Always Renders Through!</option>
</select>

Always Renders Through!

This should float over anything!

Always Renders Through!

Known Workarounds: Three ugly hacks.
1.) Hope that a select will never appear under your floating elements. (a.k.a. Ostrich with head in the sand technique)
2.) Hide select lists, whenever showing a floating element (very quirky behavior for the end user)
3.) Float an iframe (with nothing in it) over the area first, then float the element

Option 1 only works if you can 100% guarantee that nothing will overlap your select lists (e.g. not likely). Option 2 works, but looks horrible, thus leaving Option 3 as the only reasonable workaround... and yes, it requires the most work of the 3 options.

Example Workaround Code:

<coming soon...>

Related Issues: None.

bug 280 - lack of events for options

Issue: #280
Affects: IE5, IE5.5, IE6, IE7, IE8 Beta 1, Opera, Safari, ?

The option element is used inside a select element to provide options for the user to select from. Like all visually displayed elements in the browser, you can attach event handlers to them too.

Well, not quite. The following table indicates the level of support for each browser, and event.

Event	Firefox	Internet Explorer	Konqueror	Opera	Safari
onclick	Yes	No	?	Yes	No
onmouseover	Yes	No	?	No (v9.5 Yes!)	No
onmouseout	Yes	No	?	No (v9.5 Yes!)	No
keyup	No	No	?	No	No
keydown	No	No	?	No	No
keypress	No	No	?	No	No

Only Firefox seems to support the full array of mouse events, Opera is next supporting an onclick event, but in IE and Safari(win) there is no support for mouse events on options.

Oddly enough, no browser seems to support keyboard events on options.

View the following samples in Firefox, Safari or Opera and IE.

Example:


Samples
Red (click)
Blue (mouseover)
Green (mouseout)
No events here
Or here
Orange (keydown)
Yellow (keyup)
Aqua (keypress)

Known Workarounds: None.

Related Issues: bug 291.

bug 116 - for attribute woes in IE6

Issue: #116
Affects: IE6
Trackers:MSKB Tracker: 314279


The for attribute on a label element will give focus to the related form option, and in the case of radio/checkbox elements, it will select/unselect them. However in IE6, a label with a for attribute linked to a select list will cause a re-selection of the first option instead of just giving focus.

Example:

<label for="colorOptions">Color:</label>
<select name="color" id="colorOptions">
  <option value="1">Blue</option>
  <option value="2">Green</option>
  <option value="3" selected="selected">Red</option>
</select>

Clicking on "Color:" should put focus on the selected value "Red" in the select box. However IE6 will give it focus, but select another option, in this case "Blue".

Known Workarounds: One. IE has a proprietary event called "onfocusin" if you attach code to this, you can reset the correct value. However most advise that you try to avoid using the label element for a select list with a pre-selected value in IE6.

Example Workaround Code:
See MSKB Article: #314279

Related Issues: None.

bug 274 - DOM Methods on Select Lists don't work in IE

Issue: #274
Affects: IE6, IE7
Trackers:
MSKB Tracker: 276228

MSIE Feedback ID: 336252

There is actually several issues with select list elements in Internet Explorer. See the Related Issues section for other issues.

This issue, is the fact that setting the .innerHTML on a select element does not work, and actually appears to render NO options in the list. Some will argue that the .innerHTML property isn't a DOM Method (true), but it has been adopted as a standard method to quickly populate the DOM Fragment inside of an element.

Example:

<script type="text/javascript">
  var myOpts = '';
  for(var i=1;i<32;i++){
    myOpts += '<option value="' + i + '">April ' + i + '</option>';
  }
  var myDaysSelect = document.getElementById('daySelect');
  myDaysSelect.innerHTML = myOpts;
</script>

Known Workarounds: One. Apparently you can add the actual select element content to your string (pre and post) then set the .outerHTML value. NOTE: This will trash any event handlers you have on the original element.

Example Workaround Code:

  Not going to post.  Most advise against this workaround.

Related Issues: (bug 116).