Results 1 to 3 of 3

Thread: Problem with text-indent style ,<select> tag on IE

  1. #1
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Problem with text-indent style ,<select> tag on IE

    Hi Developers,

    i tried text-indent style class for <select> <option> tag .. The following given code is working on Mozilla fire box browser, but it is not working on IE..

    I am trying to build a tree structure in the list box with multiple levels and <OPTGROUP> does not support multiple levels.


    Here is the example with multiple levels.

    <html>
    <head>
    <title>Main </title>
    <style>
    .style {color:green;font-weight:bold}
    .style1 {text-indent:45px;color:red;}
    .style2 {text-indent:90px;color:blue;}
    .style3 {text-indent:135px;color:green;}
    </style>
    </head>
    <body>
    <form name="form1">
    <select name="retail" >
    <option selected disabled value="">Tree Structure</option>
    <option value="Father" class="style">Father</option>
    <option class="style1" value="/retail/chandler/">Son 1</option>
    <option class="style2" value="/retail/chandler/">Grand Son 1</option>
    <option class="style2" value="/retail/chandler/">Grand Son 2</option>
    <option class="style3" value="/retail/chandler/">Great Grand Son 1</option>
    <option class="style3" value="/retail/chandler/">Great Grand Son 2</option>
    <option class="style2" value="/retail/chandler/">Grand Son 3</option>
    <option class="style1" value="/retail/chandler/">Son 2</option>
    </select>
    </form>
    </body>
    </html>


    Please help me out by providing a solution to this issue.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You may have to add the indent 'manually' using &nbsp; characters. I'd experiment with that at least. If it looks promising for IE, a function could be devised that will add the characters automatically on the basis of the className of each option. But, if this needs to look good for non-javascript enabled browsers or there are not more than 15 or so of these entries, a script function will be a bad idea and/or more trouble than it is worth.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I know this is an old thread but just thought I'd give my two cents.

    Using &nbsp; is fine visually but if users try to type a letter to jump to a certain option, they will only be able to go to ones without &nbsp; in front...

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •