Setting the height of a <select> in Firefox 2

StackOverflow https://stackoverflow.com/questions/1614206

Question

I have a weird problem with HTML select box height in Firefox 2, here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>FIREFOX 2 SELECT BOX HEIGHT ISSUE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
      body    { margin: 0; padding:0 ;}
   div     { height: 20px; background:red; float: left; overflow: hidden; }
   select  { height: 20px; width: 100px; }
    </style>
  </head>

  <body>
    <div>Should be same height as </div>
    <select><option>this</option></select>
  </body>
</html>

The height is 2 pixels larger - padding, font size and line height don't seem to have any effect on it and I ran out of ideas and places to look. Should I assume that select box's actual height in FF2 is always css height + 2? Can I fix it or work around it?

Was it helpful?

Solution

Welcome to the wonderful world of form control styling.

Without wanting to sound defeatist, I think you should just give up. No matter how you style form controls there will always be browsers that totally ignore your styles. I believe Safari ignores most CSS. See 'styling select elements' on 456 Berea Street for examples.

There are alternatives using Javascript - I believe jQuery UI has some widgets similar to the select element. You could also use this jQuery click menu and attach a function that sets the value of a hidden input field. I've done this before and it works nicely. These kind of things are the only way you will get full control over the size and look.

OTHER TIPS

There may be some browser defaults in play. what happens id you use a reset CSS and then apply your styles? Is it still 2px off?

Give up on using CSS to style it. Embrace jquery / javascript.

You will want to create your own images, and use the click event of those images to toggle the actual form inputs. Those form inputs should be in a container styled display:none. This way, you can design it however you want.

Here's a good article on the topic: http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top