Forum Moderators: not2easy
I've also included a normal dropdown with no specific height given.
Any help would be much appreciated.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Untitled Page</title>
<style type="text/css" media="screen"><!--
.text { font-size: 12px; font-family: arial; }
.text2 { font-size: 12px; font-family: arial; height: 30px; }
--></style>
</head>
<body>
<form id="FormName" action="(EmptyReference!)" method="get" name="FormName">
<select class="text2" name="selectName" size="1">
<option value="one">Choose from this list</option>
<option value="two">second</option>
<option value="three">third</option>
</select><br />
<br />
<select class="text" name="selectName" size="1">
<option value="one">Choose from this list</option>
<option value="two">second</option>
<option value="three">third</option>
</select>
</form>
</body>
</html>
You could give this a go:
select {
line-height: 30px;
other stuff;
}
Since you said you've made the selects in this example 30px. This looks like crapola if there are two lines, but I don't think I've ever seen that in a dropdown.
Forms are notorious for being difficult to style-- anything you try, test and double test against every browser, esp. Safari, which really is kinda anal about its forms and does not allow a lot of styling tricks to be used.
As a side note, you don't have to use size="1" as that's apparently the default in every browser anyway.
*edit, I hope there was a doctype at the top of that example. IE6 is bad enough in "Standards" mode (and watch out, it thinks line-height is height!), let alone Quirks mode.
[edited by: Stomme_poes at 10:09 am (utc) on Feb. 16, 2008]
