Home/ Questions/Q 404745
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T17:20:11+00:00

I have a weird problem with HTML select box height in Firefox 2, here’s

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0