Forum Moderators: not2easy
It would be okay if the box remained the same height across browsers but it doesn't due to the rendering of these fields in the various browsers.
Here's what I have for the CSS:
#navbar #country-select {
height: 39px;
float: left;
width: 188px;
position: relative;
border: 1px solid red;
}
#navbar select {
width: 188px;
padding: 3px 0;
position: absolute;
}
and the HTML:
<div id="country-select">
<select name="redirect">
<option>
Select an option
</option>
<option value="test1.html">
Test 1
</option>
<option value="test2.html">
Test 2
</option>
<option value="test3.html">
Test 3
</option>
</select>
</div>
Any help would be greatly appreciated.
[w3.org...]
could this little example possibly help your cause. ;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css"><title></title>
<style type="text/css">
#navbar #country-select {
float: left;
width: 188px;
height:39px;
border: 1px solid red;
}#vertical{
float:left;
width:100%;
height:50%;
margin-top:-11px; /* half the select height*/
}#navbar select {
clear:both;
width: 188px;
height:22px;
}</style>
</head>
<body><div id="navbar">
<div id="country-select">
<div id="vertical"></div>
<select name="redirect">
<option>Select an option</option>
<option value="test1.html">Test 1</option>
<option value="test2.html">Test 2</option>
<option value="test3.html">Test 3</option>
</select></div>
</div></body>
</html>
No problem, you're very welcome. ;)
