ansaurus

Question

Why do Chrome, Firefox and IE all render fixed-width SELECT controls differently?

Answer 1

+1 A:

Make sure you remove all default margins and padding, and define them explicitly. Make sure you're using a proper DOCTYPE and therefore rendering IE in Standards Mode.

Steve Paulo 2008-09-25 18:30:07

I included my DOCTYPE in my original question ... does this look correct?

mattruma 2008-09-25 18:33:03

Yeah, DOCTYPE looks good.

Steve Paulo 2008-09-25 18:36:28

Answer 2

+2 A:

Try setting font-size on the selects as well, that can affect how they are rendered. Also consider the min-width and max-width properties.

John Millikin 2008-09-25 18:30:17

The OP wants a fixed width though and not a variable width. I ++'d u because of the font-size but the *-width doesn't make sense.

MDCore 2008-10-22 04:12:44

Answer 3

+1 A:

You may use faked dropdown widget and replace the SELECT.

Daniel Silveira 2008-09-25 18:32:04

Answer 4

A:

Try using Firebug or Chrome's "Inspect Element" feature (right click on the select control, click "inspect element") to see exactly what style properties are being inherited/rendered for that specific object. That should lead you in the right direction.

Ryan 2008-09-25 18:35:35

Answer 5

A:

I've tried all these suggestions ... and I finally have it so it looks good in IE and Firefox. Looks like there is something wrong with the padding on the SELECT control. If I increase the width of the SELECT by 2 pixels the now size correctly.

 .combo
 {
     padding: 2px;
     width: 206px;
 }

.text
{
    padding: 2px;
    width: 200px;
}

However, Chrome still does not show them the same size.

mattruma 2008-09-25 20:17:47

What @Radu said: form controls limit your styling options. Find a Javascript < select > replacement.

MDCore 2008-10-22 04:14:18

Answer 6

+2 A:

Form controls will always be less obedient to styling attempts,in particular selects and file inputs, so the only way to reliably style them cross-browser and with future-proofing in mind, is to replace them with JavaScript or Flash and mimic their functionality

2008-09-26 19:56:58

Answer 7

+1 A:

Browsers tend to limit the amount you can style form controls with CSS, because form controls have a lot of complicated styling that varies between operating systems. CSS can’t describe that fully, so browsers put some of it off limits.

Eric Meyer wrote a good article on the subject:

http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

The best you can do is accept you don’t have complete control over the look of form fields, and experiment with whatever styling is really important.

Paul D. Waite 2008-11-25 17:56:22

ansaurus

tags:

views:

answers:

Why do Chrome, Firefox and IE all render fixed-width SELECT controls differently?

related questions