Forum Moderators: open
I've got a problem with <SELECT>-boxes, with the content's fonts being displayed differently in IE (Microsoft Internet Explorer 5.5) and Netscape (4.76 and 7.1). Can someone give me a hand on solving the following?
My HTML code looks somewhat like that (using ColdFusion, all "#"-bracketed elements are variables):
<FONT FACE="Courier" COLOR="black" SIZE=2>
<SELECT NAME="assay_id" SIZE= 9>
<OPTION VALUE="#assay_id#"> #assay_name# ¦ #assay_id#
</SELECT>
</FONT>
In essence, I'd like to have the SELECT box' contents displayed in "Courier":
I'd like to display two values simultaneously, separated by the pipe symbol "¦". Both values should be aligned and displayed within a given field width (see picture).
.test_assay ¦ ... 21
.......none ¦ .....1
fixed..size ¦ 999999
The fixed field width prevents size adjustments to the strings displayed (the boxes collapse if no contents are displayed!). Strings that exceed a given length are displayed partially: right-hand aligned, disrupted by two "." characters.
String size/alignment control is done in ColdFusion. All that's left to HTML is to display that stuff correctly, but that doesn't really happen here ... .
IE 5.0 insists to display all SELECT box contents using variable width fonts like "Arial", and so does Netscape 7.1. However, Netscape 4.76 accepts the <font> ... </font> brackets around a <select>- statement, showing all contents just fine!
HOW CAN I GET THAT TO WORK GENERALLY, FOR ALL BROWSERS?!?
Anyone got some headache pills for me?
Or even better, anyone got a solution to that?
Your help is gratefully appreciated!
Greetings,
Raimund.
Have you tried adding a CSS rule for the SELECT element? That should be rendered well by the newer browsers.
Nick
You could even put the style rule inline, if you're not in the business of creating full stylesheets at this time. It sounds like you may have it pretty well covered that way.
Well, well, I already thought of this. Franticly seeking for help, my first obligation was the choice of the right forum ... there are many posts out here on CSS, but so far I've no ideea how these statements look like and how it would be implemented in general.
Could you kindly provide an example for that?
Let's say, my prototype
select
<SELECT NAME="select_box">
<OPTION VALUE="1"> First_Entry
<OPTION VALUE="2"> Second_Entry
</SELECT>
As stated in my initial post, I'd like to have a fixed box width (let's say 10 characters wide) and have the box' contents being displayed using a fixed width font (like Courier). Check out the examples I've given before ...!
Thanks in advance for your help,
happy coding in the meantime,
Rai.
[pre]
<select name="select_box">
<option value="1" style="font-family: courier, times;"> First_Entry</option>
</select>
[/pre]
[pre]
<link rel="stylesheet" type="text/css" href="whatever.css" />
[/pre]
[pre]
.courier {
font-family: courier, times;
}
[pre]
<select name="select_box">
<option value="1" class="courier"> First_Entry</option>
</select>
[/pre]
Check out W3 Schools [w3schools.com]
Westciv [westciv.com]
for more info on CSS
Have fun...
Nick
Many thanks to you both, Nick_W and tedster.
The problem is solved now, I guess that I'm going to like those style sheets ... :)
Happy conding,
Rai.
