Ive got a select box (drop down), that has a set size, 10 pixels taller + longer an a default one. In firefox + ie the text inside is aligned top right. I want the text to be aligned vertically center. Chrome does this automatically.. if i use padding etc it fixes it in firefox etc but breaks it in chrome... this is an asthetic thing rather than function Thank you !!!!
<jamie>Well there's your problem</jamie> As I JUST said in another thread: Attempting to change the alignment of content, formatting, or basically anything more than border and color is pretty much going to /FAIL/ cross browser. Form elements simply do not respond to padding, margin, height or width the same way across browsers with EVERY SINGLE ONE OF THEM having a different behavior. Get used to it. Though silly question, you want the text content of the element centered in the select, is there some reason you aren't using text-align?
if you set it on BOTH select and option, it will work in FF and Opera, in Chrome it will center the 'selected' part but will ignore it in the drop-down, while for IE and Safari it does absolutely nothing. As I said, what you are trying to do cannot be done cross-browser using HTML/CSS because the HTML/CSS specification doesn't actually SAY how CSS or styling is supposed to be applied to form elements. Royal PITA. I've seen people resort to using a javascript 'replacing' code to fake the appearance of a select to pull it off - which might be the only real way to do it; just be sure if you go that route you include the select as a scripting-off fallback.