Height of selectbox element [CSS]

Prev: CSS Table
Next: Rounded corners on textfield

From: Jesper Rønn-Jensen on 15 Oct 2007 10:54

I'm working with a requirement to make a selectbox the same height as
normal text input elements. (at least for IE7)

But in IE the selectbox reacts strangely to the CSS rules. Normally,
there are so many things not possible with select boxes in IE.

But the I discovered I could actually change the height by adjusting
font-size, then adjusting height I was actually able to tweak the
height.

I had to adjust the height up to 14px and then use the height
attribute to be able to adjust the height of the selectbox. (all other
text is 11px).

That made select boxes look horrible in Firefox, as it correctly
understands height, etc, of the select box.

Then I thought about first adjusting the select element, then re-
adjusting the option element, but the option element did not seem to
react... (it appears that when styling option elements, I'm styling
what compares to the "open" selectbox. The "closed" element is still
only the select element).

My question is: Do you know where I can find more info on setting the
height correctly of a select box so that it appears similar cross-
browser (FF and IE7)?

Any links and info is greatly appreciated.

/Jesper Rønn-Jensen
blog: www.justaddwater.dk

From: Thomas Mlynarczyk on 15 Oct 2007 12:10

Also sprach Jesper R�nn-Jensen:

> My question is: Do you know where I can find more info on setting the
> height correctly of a select box so that it appears similar cross-
> browser (FF and IE7)?

I think the simplest approach would be to use Conditional Comments to
include an extra stylesheet for IE. Within that stylesheet, you can then use
various CSS hacks to address specific IE versions. This way you can feed any
necessary correction rules to any IE version.

<link rel="stylesheet" type="text/css" href="common.css">


Put standards compliant code in common.css and any fixes for IE into ie.css.

Greetings,
Thomas

--
C'est pas parce qu'ils sont nombreux � avoir tort qu'ils ont raison!
(Coluche)

From: Beauregard T. Shagnasty on 15 Oct 2007 12:16

Jesper R�nn-Jensen wrote:

> .. (all other text is 11px).

Before you venture further, please read this:
http://k75s.home.att.net/fontsize.html

--
-bts
-Motorcycles defy gravity; cars just suck

From: Bergamot on 15 Oct 2007 16:44

Jesper R�nn-Jensen wrote:
> I'm working with a requirement to make a selectbox the same height as
> normal text input elements. (at least for IE7)

That's something only a marketing pinhead or deeziner might consider a
"requirement". If they understood web media, it wouldn't even cross
their minds.

> I had to adjust the height up to 14px and then use the height
> attribute to be able to adjust the height of the selectbox. (all other
> text is 11px).

Hmmm... I wonder how it will all adapt to my 17px minimum font size?
Care to guess how unreadable it will be?

--
Berg

From: Jesper Rønn-Jensen on 16 Oct 2007 16:01

Thanks for your advice. Generally I agree with you that designers
should understand the limits of the media.

But as for IE, to misinterpret the height of a selectbox makes it
incredibly ugly to manipulate forms.

Forms with elements of similar with and height are much easier on the
eye and therefore I prefer them if possible.
I'm not a designer, but developer, and I merely hope here to find a
workaround where the form elements (and text inside of them) are
formatted in similar way so that it can look calm and similar -- even
if two different elements are on the same page. (which they usually
are)

I will investigate this further, and eventually make a blog post about
my findings.

One of the things I have found is that an IE selectbox actually
acknowledges the height... But the height does not adjust the content
within the border (as it's supposed to). Instead, it sets height to an
area containing the fixed area with the box + an area below.

More about that later.

/Jesper Rønn-Jensen
www.justaddwater.dk

|
Pages: 1
Prev: CSS Table
Next: Rounded corners on textfield