Question Details    

   Question

Time: 04:33 - Jan 16, 2008     Asked by: david      Status: Answered      Points: 125   

option.style.fontWeight = 'bold' not working in IE?

I'm populating a listbox dynamically with javascript and I need to make one option bold.
In javascript I'm setting:
option.style.fontWeight = 'bold';
before I add it to the listbox, but it only shows bold in Firefox.
How can I achieve this in IE6 and IE7 as well?

 
  • Ask a New Question
  • Become a Quomon Expert
  • Current Categories

     

    Other Questions Needing Answers


       
     

    Answer Discussion

    Answer Discussion

    Answer Summaries

    Answer Summary

     
     

    Question & Answer System for Websites and Corporate Intranets

  • Save your corporation money by having common business problems solved once
  • Drive a significant amount of new traffic to your website, products, and services
  • Advertisement

    i found another way to set this, but it doesn't work in IE either:
    option.style.cssText += "font-weight: bold";

    :(

    Expert:

    david

    Date:

    Jan 16, 2008

    Time:

    05:00

     

    Votes: Good (0) | Bad (0)
    Login to rate this answer

    David,

    From what I can remember, this reason behind this is because of how IE gets the "base" for the HTML Select tag - it's derived from the Win32api - the same reason why dropdownlists and select lists have a nasty habit of rendering "above" everything else on the html page.

    I tried the simple example code of :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>Untitled Page</title>
    <style type="text/css" media="screen">
    .optionBold {background-color: Fuchsia; font-weight: bold;}
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <select id="htmlSelect" multiple="multiple" size="5" >
    <option>Non-styled 1</option>
    <option>Non-styled 2</option>
    <option class="optionBold">Styled</option>
    <option style="background-color: Aqua; font-weight: bold;">Styled inline</option>
    </select>

    </div>
    </form>
    </body>
    </html>

    In both styling cases, I would see them fine in Firefox, but only the background color was being picked up for the options in IE.

    Now, if you feel like being really adventurous, you can check out a workaround presented by Scott Mitchell over here: http://aspnet.4guysfromrolla.com/articles/091405-1...

    I hope this helps,
    Ric

    Expert:

    rcastagna

    Date:

    Jan 17, 2008

    Time:

    08:53

     

    Votes: Good (0) | Bad (0)
    Login to rate this answer

    thanks for the response, Ric, I didnt know the reason for the dropdown issues in IE.
    The article didn't really help me out since it's talking about a workaround for a bug in asp.net and I'm just using plain javascript and html, and the problem is beyond the control of asp.net.

    Expert:

    david

    Date:

    Jan 18, 2008

    Time:

    04:19

     

    Votes: Good (0) | Bad (0)
    Login to rate this answer

    David,

    Well, you're right...it wouldn't help much if you're not using .NET for the page.

    I did have another thought, though...you could make an unordered list <ul> "appear" to be a list box with some creative styling. Then you'd have all of your styling options available to you.

    It might take some time to fuss around with, but it would certainly be possible. Granted, this isn't a "solution" to the problem in IE - but sadly, as long as IE continues to use the win32api for these two controls, they will always behave badly.

    Take care,
    Ric

    Expert:

    rcastagna

    Date:

    Jan 18, 2008

    Time:

    07:37

     

    Votes: Good (0) | Bad (0)
    Login to rate this answer

    Ric, that could be a way to get round it, but I don't have time to experiment with it.
    I just sorted to give the option an slightly different background color, which does work in both FF and IE and that will have to do for now.
    Thanks for your help.

    Expert:

    david

    Date:

    Jan 21, 2008

    Time:

    10:26

     

    Votes: Good (0) | Bad (0)
    Login to rate this answer

    CA Anti-Virus 2008 - Fortify your PC with early, automatic defense against the latest viruses!

    Question Answered

    This question has been answered, and points have been rewarded to the following experts:

    rcastagna: 125

    You're welcome however to comment or give additional information or if you wish, you have the ability to write an Answer Summary for this question by clicking on the "Answer Summaries" Tab.


    i am new to javascript ....
    i am facing the same problem . i am trying to get the text in a table cell to bolden on the load event of the form using javascript
    document.getElementById("conf").style .fontWeight ="bolder";
    document.getElementById("conf").style .color ="black";

    where conf is the id of the "td" tag in the table.....works in FF but not in IE.

    Click here to see the Answer Discussion that preceded this summary.

    Expert:

    sudhishnair

    Date:

    Apr 24, 2008

    Time:

    03:52

     
     

    Login to rate this summary: Good  |  Bad

    Respond to this question:

    New User

      Email:

    Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

    Registered User

    Username:

    Password:


    Forgotten Password

    Enter your email address below and we will resend your login information to you.

    Email:


     


     

    New User

      Email:

    Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

    Registered User

    Username:

    Password:


    Forgotten Password

    Enter your email address below and we will resend your login information to you.

    Email:


     

       

    "Psst, Quomon is a great site. Pass it on."     Tell a Friend  |   Link To Us  |   Save to Delicious  |   Digg! Digg it


    All Questions


    Language Options

    English:

    www.quomon.com

    Español:

    www.quomon.es

    Quomon Blog

    blog.quomon.com

    Sponsors

    Questions and Answers Software
    Real Estate Postcards
    Marketing Fulfillment