ShadowMage Posted December 1, 2009 Share Posted December 1, 2009 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;} Link to comment Share on other sites More sharing options...
thescientist Posted December 1, 2009 Share Posted December 1, 2009 So you don't want them offset? I guess you could try a negative margin on the options. Link to comment Share on other sites More sharing options...
thescientist Posted December 1, 2009 Share Posted December 1, 2009 actually, maybe try applying a classes on the options with a set margin? Link to comment Share on other sites More sharing options...
ShadowMage Posted December 1, 2009 Author Share Posted December 1, 2009 So you don't want them offset? I guess you could try a negative margin on the options.actually, maybe try applying a classes on the options with a set margin?Tried both, neither one works. But thank you for the suggestions. Link to comment Share on other sites More sharing options...
thescientist Posted December 2, 2009 Share Posted December 2, 2009 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 More sharing options...
ShadowMage Posted December 2, 2009 Author Share Posted December 2, 2009 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 More sharing options...
thescientist Posted December 2, 2009 Share Posted December 2, 2009 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 Link to comment Share on other sites More sharing options...
ShadowMage Posted December 2, 2009 Author Share Posted December 2, 2009 hmm... apparently it only works in firefoxThat's my problem. I want IE to shift the options to the left. IE puts the equivalent of one tab in front of each option in an optgroup.Is this a fixable issue? Or am I just going to have to deal? Link to comment Share on other sites More sharing options...
thescientist Posted December 2, 2009 Share Posted December 2, 2009 I was even trying to use universal selector and it wasn't setting them all to the left...puzzling. That's IE for ya though... Link to comment Share on other sites More sharing options...
thescientist Posted December 2, 2009 Share Posted December 2, 2009 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 More sharing options...
ShadowMage Posted December 2, 2009 Author Share Posted December 2, 2009 Gotta love IE! :)Anyhow, I guess I'll just have to live with it for now. Thank you, scientist, for your help.If there's anyone who knows of a solution, I'd greatly appreciate your help. Link to comment Share on other sites More sharing options...
lastlifelost Posted December 7, 2009 Share Posted December 7, 2009 I know it's not a great fix, but what about dropping the the options into a div that you apply a negative margin to? Do this with conditionals, since FF is rendering fine, and you should be good to go, right? Gotta love the need for workarounds. DAMN YOU MICROSOFT! Link to comment Share on other sites More sharing options...
Ingolme Posted December 7, 2009 Share Posted December 7, 2009 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 More sharing options...
ShadowMage Posted December 7, 2009 Author Share Posted December 7, 2009 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.