I am losing hair on this one ... it seems that when I fix width an HTML SELECT control it renders its width differently depending on the browser.
Any idea how to to standardize this without having to turn to multiple style sheets?
Here is what I am working with:
.combo
{
padding: 2px;
width: 200px;
}
.text
{
padding: 2px;
width: 200px;
}
This is my document type for the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
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.
mattruma : I included my DOCTYPE in my original question ... does this look correct?Steve Paulo : Yeah, DOCTYPE looks good.From Steve Paulo -
Try setting
font-sizeon the selects as well, that can affect how they are rendered. Also consider themin-widthandmax-widthproperties.MDCore : 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.From John Millikin -
You may use faked dropdown widget and replace the SELECT.
From Daniel Silveira -
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.
From Ryan -
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.
MDCore : What @Radu said: form controls limit your styling options. Find a Javascript < select > replacement.From mattruma -
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
-
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.
From Paul D. Waite
0 comments:
Post a Comment