471,616 Members | 1,696 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,616 software developers and data experts.

Height of selectbox element

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

Oct 15 '07 #1
3 22167
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">
<!--[if IE]><link rel="stylesheet" type="text/css"
href="ie.css"><![endif]-->

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)
Oct 15 '07 #2
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
Oct 15 '07 #3
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
Oct 15 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Tole | last post: by
14 posts views Thread by delerious | last post: by
12 posts views Thread by Stanimir Stamenkov | last post: by
5 posts views Thread by Secret Guy | last post: by
3 posts views Thread by Stefan Richter | last post: by
1 post views Thread by shankwheat | last post: by
4 posts views Thread by shankwheat | last post: by
1 post views Thread by giloosh | last post: by
reply views Thread by leo001 | last post: by
1 post views Thread by ZEDKYRIE | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.