Web Hosting Talk







View Full Version : Yet another Issue with FF and IE!


Xspirit
06-26-2008, 10:04 AM
Well for the past 2 hours I have been scouring the web in search for help, but no luck!

My problem lies with styling a <select> choice menu.

Below is the HTML Code:

<td><select name="port">
<option value="2082">Normal</option>
<option value="2083">High</option>
</select></td>


and here is the relative css:


select {
width: 125px;
border: none;
padding: 4px;
margin-right: 4px;
font:Arial, Helvetica, sans-serif;
}




Now this works fine in firefox, but in IE the style is not being applied, and it reverts to the default select menu style.

The text area inputs are styled and work both in FF and IE as they should, yet the Select input doesn't.

Anyone have any ideas?

Syd_M
06-26-2008, 11:01 AM
Styling the select box in IE7 and below is very limited, unfortunately. It works well in IE8, but in order to achieve a similar effect in IE7- you'll have to resort to "hacks" (if such hacks exist). You could try a Javascript-generated select box (http://webfx.eae.net/dhtml/select/jsGenerated.html) and go from there. Never tried it myself, though.

Xspirit
06-26-2008, 11:49 AM
ahh I see :(

Is there a simple code that allows me just to set the width of the select box?

Syd_M
06-26-2008, 12:59 PM
Your code seems fine for setting the width of the select form. Of course, I don't have IE6 (only IE8, w/c also allows me to emulate in IE7 mode), so I can't tell if it works in IE6. Are you using IE6? If so, then adding a width attribute to the select tag might help. You can also assign an ID to the select tag and then define the style using the ID instead of the tag name. Like so:

<select name="port" width="125" id="myselect">
#myselect {
width: 125px;
border: none;
padding: 4px;
margin-right: 4px;
font:Arial, Helvetica, sans-serif;
}

connectingrainbows
06-26-2008, 01:24 PM
I have a form that I had to use both width and CSS to get it to work in two browsers. Try this:

<select name="country" WIDTH="207" STYLE="width: 207px;" />