Log in

View Full Version : Problem with text-indent style ,<select> tag on IE


muruganraj
02-13-2006, 08:22 PM
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.
jscheuer1
02-16-2006, 03:07 PM
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.
peter_r
03-10-2009, 10:38 AM
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...