Hi guys, I'm having some problems with my input styling. I've got the following: <select id="permission_select" onChange="update();" style="border: 4px solid #000000; width: 300px; padding: 6px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 0px;"> <option value="0">xBox live 1 month <option value="1" SELECTED>xBox live 12 months <option value="2">1200 Microsoft points <option value="3"> 4200 Microsoft points </select> HTML: The styling works fine in firefox (the border, padding, etc), however in ie, the only thing that styles in the text. Any ideas what's happening? Thanks in advance.
FF and IE handles html forms in a different way. Try this way: Add the style code between <head>...</head> <style type="text/css"> .selectstyle {border: 4px solid #000000; width: 300px; padding: 6px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 0px;} </style> Code (markup): and change the form as below to make use of the style: <select id="permission_select" onChange="update();" class="selectstyle"> <option value="0">xBox live 1 month <option value="1" SELECTED>xBox live 12 months <option value="2">1200 Microsoft points <option value="3"> 4200 Microsoft points </select> Code (markup): Good luck.
For me I wouldn't bother about IE users coz whosoever uses IE, hardly knows about internet. Anything you display to them would look just fine
In case you're interested, I wrote a jQuery plugin to style forms however you like - regardless of browser restrictions. This may or may not meet your needs, but I thought I'd pimp it anyway Take a look: http://adamcoulombe.info/lab/jquery/select-box/