Jump to content

Optgroup Indented In Ie


ShadowMage
 Share

Recommended Posts

Hi again,I have a select box with some optgroup tags in it. IE is indenting all of the options in my optgroups. FF renders it just fine. I have tried setting margins and padding of both the optgroup and the options. I've even tried setting the position of the options to relative and offsetting them. Nothing seems to work.Can anyone tell me how to fix this, if it's even fixable?Here's the html if it helps:

<select><option value='all'>All</option><optgroup label='Test Group'>	<option value='1'>One</option>	<option value='2'>Two</option>	<option value='3'>Three</option></optgroup><optgroup label='Test Two'>	<option value='4'>Four</option>	<option value='5'>Five</option>	<option value='6'>Six</option></optgroup></select>

And relevant CSS:

select, option, optgroup {	font-family: Courier, monospace;}optgroup {	margin: 0px;}optgroup option {	margin: 0px;}

Edited by jkloth
Link to comment
Share on other sites

well, using the try-it example here,http://www.w3schools.com/TAGS/tag_Select.aspI was able to write an inline style that definitely shifted one of those options to the left.

Link to comment
Share on other sites

well, using the try-it example here,http://www.w3schools.com/TAGS/tag_Select.aspI was able to write an inline style that definitely shifted one of those options to the left.
What style did you use because nothing I'm trying is working.I tried these styles on that try it example but none of them work:
<select><optgroup label='One' style='position: relative; left: -10px;'>  <option style='position: relative; left: -15px;'>Volvo</option>  <option style='margin: 0px;'>Saab</option></optgroup><optgroup label='Two' style='padding: 0px;'>  <option style='padding: 0px;'>Mercedes</option>  <option style='margin-left: -5px;'>Audi</option></optgroup></select>

Link to comment
Share on other sites

sorry, I meant this linkhttp://www.w3schools.com/tags/tag_optgroup.aspbut regardless, this is how I got it to work. Using

<html><body><select>  <optgroup label=\"Swedish Cars\">    <option value=\"volvo\" style=\"margin-left: -20px\">Volvo</option>    <option value=\"saab\">Saab</option>  </optgroup>  <optgroup label=\"German Cars\">    <option value=\"mercedes\">Mercedes</option>    <option value=\"audi\">Audi</option>  </optgroup></select> </body></html>

hmm... apparently it only works in firefox

Edited by thescientist
Link to comment
Share on other sites

I've been bumming around on Google and other people have the problem but have not found a solution. I've been trying in IE7/8 and both behave the same way.

Link to comment
Share on other sites

It's really difficult to style form elements. Just consider that those are not oby depending on the browser, but on the operating system. I usually just leave them as they are. If I want to style them badly enough, I build some fake form elements out of other elements and use Javascript to make them interactive. That's quite a lot of work, though. I suppose there are some Javascript form libraries around to help with it.Does it really matter that much if the options have a bit of indentation in the dropdown box?

Link to comment
Share on other sites

No its really not a huge deal. I just had to make the selects a little longer so that all of the text is displayed when the list is expanded. Which also meant I had to tweak the rest of the layout a little but it's not a major deal. I've got it looking good now though, it was just a little inconvenience at the time.Thank you all for your suggestions!

Gotta love the need for workarounds. DAMN YOU MICROSOFT!
No kidding. It's called standards compliance! But then again Microsoft is all-knowing and never makes mistakes! :) Edited by jkloth
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...