1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:04 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Applying Class in IE 9 "Chops off" default list item

         

rocknbil

7:07 pm on Mar 26, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Browser: IE 9 specific (to my knowledge)

Jquery versions: Appears to be any version

Doctype: XHTML transitional

The problem: I have a form set up that during validation if the fields are empty a class is applied that highlights the fields/selects list and bolds the text. In IE 9 only, this causes the first item in the select list to trucate by exactly one character. In the example below, the word "-SELECT-" truncates to "-SELECT". I'd "sorta" worked around it by adding dashes on either side of the default list item, but you can see without them it would truncate to "SELEC".

I've also eliminated other select lists from this form - these too were getting their last character "chopped."

I've tried a couple things to get around it (example, drawing all the space out of the state list) but can't seem to get at the cause. Any ideas or is this just another Internet Destroyer bug? 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 
/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Some Title</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style type="text/css"> 
form .needsfilled { background: #ffff00; color: #000; font-weight: bold; } 
form select { width: 200px; } 
</style> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
 lp_required = { 
 'state': 'state' 
 }; 
 $("#lp-forms").submit(function(){ 
 for (key in lp_required) { 
 var input = $('#lp-forms #'+key); 
 if (input.val() == "") { 
 input.addClass("needsfilled"); 
 } else { 
 input.removeClass("needsfilled"); 
 } 
 } 
 return false; 
 }); 
}); 
</script> 
</head> 
<body> 
<form method="post" id="lp-forms" action=""> 
 <p><label for="state">State/Province: <span>*</span></label> 
 <select id="state" name="state"> 
 <option value="">-SELECT-</option><option value="AK">AK</option><option value="AL">AL</option> 
 <option value="AR">AR</option><option value="AZ">AZ</option><option value="CA">CA</option> 
 <option value="CO">CO</option><option value="CT">CT</option><option value="DC">DC</option> 
 <option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option> 
 <option value="HI">HI</option><option value="IA">IA</option><option value="ID">ID</option> 
 <option value="IL">IL</option><option value="IN">IN</option><option value="KS">KS</option> 
 <option value="KY">KY</option><option value="LA">LA</option><option value="MA">MA</option> 
 <option value="MD">MD</option><option value="ME">ME</option><option value="MI">MI</option> 
 <option value="MN">MN</option><option value="MO">MO</option><option value="MS">MS</option> 
 <option value="MT">MT</option><option value="NC">NC</option><option value="ND">ND</option> 
 <option value="NE">NE</option><option value="NH">NH</option><option value="NJ">NJ</option> 
 <option value="NM">NM</option><option value="NV">NV</option><option value="NY">NY</option> 
 <option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option> 
 <option value="PA">PA</option><option value="RI">RI</option><option value="SC">SC</option> 
 <option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option> 
 <option value="UT">UT</option><option value="VA">VA</option><option value="VT">VT</option> 
 <option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option> 
 <option value="WY">WY</option> 
</select></p> 
 <p id="submit-row"><input type="submit" name="submitButton" id="submitButton" value="Submit"/></p> 
</form>             
</body> 
</html>

Fotiman

7:59 pm on Mar 26, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



It seems to be related to setting it to be bold, but I wasn't able to determine why. Very strange.

rwilson

9:15 pm on Mar 26, 2012 (gmt 0)

10+ Year Member



Not sure why this works but, try this. Define bold in the input specifically. 


form .needsfilled { background: #ffff00; color: #000; /* font-weight: bold; */} 
input.needsfilled{font-weight: bold;}

Fotiman

10:33 pm on Mar 26, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



That would work because it's not making the select element bold, but if the desired result is that the select element gets bolded, then this doesn't help.

rocknbil

4:34 pm on Mar 27, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, it works in that it stops chopping the word -SELECT- but it no longer bolds it. :-) I tried form select.needsfilled { font-weight:bold; } and it does the exact same thing.

It's as if IE has a "rendering space" for the select element option's text and doesn't know to expand it when applying bold dynamically. When I set the style in the sheet, or do this,

<select id="state" name="state" class="needsfilled">

then

$(document).ready(function(){
$('#lp-forms #state').removeClass("needsfilled");

It accepts it normally without chopping it off. Pretty tacky workaround. :-/

Fotiman

5:47 pm on Mar 27, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Got it down to a base case:
[jsfiddle.net...]
Removing any of the remaining options results in the text NOT getting snipped.

rocknbil

4:26 pm on Mar 28, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You mean shortening the list? I'd noticed that early on, that it made the problem go away, but obviously that's not an "option" (ugh, awful pun . . .) That's also why I drew space out of it. Unless I'm missing something else more significant (besides the doctype.)

Fotiman

4:53 pm on Mar 28, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Yes, I meant shortening the list (which, as you mentioned, is not an option). It's an interesting problem. I'd love to know what the cause is. Why does the problem go away with 18 items or less? It's a very strange mystery.

rocknbil

3:45 pm on Mar 29, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The funny thing about that (and why I didn't mention it, because it's a rather long tangent) is that was the first solution I arrived at. I fiddled with it a bit (like almost an hour) and then . . .

There are **other** select lists in this form. They too were getting the default item "chopped." I'd had my attention focused on the state list and didn't even notice. :-\. These lists were only in the range of 12 and 10 items, respectively. So the long list theory fell apart at that point.

I even wondered if "state" was some internal word that was getting futzed up on rendering (answer was no.)

+1 new species of I.E. bug. :-\

Fotiman

4:23 pm on Mar 29, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I wonder if the string length of the options affects it somehow.

rocknbil

5:16 pm on Mar 30, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



LOL . . . thought I'd play Dudley Do-right and submit a bug report, after 15 minutes or so of creating a Windows live account, etc., "We are currently only accepting bug reports for IE 10 beta."

Microsoft is ignorant and apathetic: we don't know, and we don't care. :-\
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:04 pm May 13, 2026