473,799 Members | 2,926 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 22291
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.cs s">
<!--[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
"requiremen t". 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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
3673
by: Tole | last post by:
hi all, i've got a selcetbox (multiple) which is filled by javascript. only problem is that i have aprox 1000 options to add to that select, and that adding lasts for 5-6 seconds. Even select.length = 0 (on filled element) lasts for few seconds. ok. i have large amount of data to preload, and i also do some operations on that data, but it's all very fast. so i thought it must be some IE rendering issue, and i tried to set...
14
21545
by: delerious | last post by:
I need to determine an element's width and height in pixels (not including padding, border, and margin) in Javascript. The element will not have width or height styles specified. In Mozilla, I know I can use document.defaultView.getComputedStyle() to do this. IE does not support document.defaultView.getComputedStyle(). It supports offsetWidth/offsetHeight, but those include the padding and border. IE also supports...
12
6742
by: Stanimir Stamenkov | last post by:
Here are two cases regarding inline-level elements' line-height, padding and background, which I doesn't understand: <div style="background: black; color: white; line-height: 1.5"> <span>Abc</span> <span style="background: white; color: black; line-height: 3">Abc</span> <span>Abc</span> </div>
5
2912
by: Secret Guy | last post by:
Because of my experience posting various places over the last couple of weeks: I'm expecting to be greated with hostility for asking about concepts instead of "practical" things, since that has been my experience for years and decades. Maybe I'm projecting hostility. I don't know. How can I ask about theory and concepts without offending people? I'll just continue asking and cross my fingers: According to the 2.1 spec, regarding...
3
2662
by: Stefan Richter | last post by:
I would like to fill a Selectbox dynamically. I am taking all values from a db, and fill them into a selectbox. I guess the best way was to use some kind of a dynamical array, where you don't have to say how many elements it will contain. In Java there exists special containers to achieve that, but what about VB? I thought about somethign like that: select year from db
1
1837
by: shankwheat | last post by:
I've been using this little script to change the <a href=""></a> value of a link which works well. <script language="javascript" type="text/javascript"> function ordering(sorder) { var link = document.getElementById("mylink").href = "http://www.mysite.com?Option="+sorder; } </script>
4
1750
by: shankwheat | last post by:
I'm passing a string like 'Div3,Div4' to use as options in a selectbox but I need the text the user sees in the box different from the values. My code populates the values in the selectbox correctly but not the text. Thanks Desired end result: <select id="selectBox" multiple="multiple" size="4"> <option value="Div3">About the Company</option> <option value="Div1">Ratings</option>
1
1967
by: giloosh | last post by:
i would like to dynamically output such a selectbox below using php and mysql: <select> <option< 100 </option> <option100 to 150 </option> <option150 to 200 </option> <option200 to 250 </option> <option250 to 300</option> <option 300 </option> </select>
0
9687
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10482
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10225
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9072
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7564
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6805
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5585
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
3759
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2938
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.