I'm using the following select menu:
Code:
<html>
<body>
<form name="form1">
<select name="bycategory">
<option value="" selected="true">- Select a Category -</option>
<option value="all">Default Category</option>
<option value="cat1">Category 1</option>
<option value="cat2">Category 2</option>
</select>
<input class="button" type="submit" name="submit" />
</form>
</body>
</html>
And I'm using the following CSS stylesheet:
Code:
/*** SCREEN PROPERTIES BEGIN ***/
/* Other Media Device Properties (show/hide) */
#printheader, #handheldheader, #printcenter, #handheldcenter, #print_subheader, #handheld_subheader {
display:none;
}
/* Main HTML Properties */
html {
font-size:62.8%;
height:100%;
}
body {
font-family:arial,sans-serif;
font-size:1.2em;
margin:0px 0px 0px 2px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
color:#000000;
background-color:#ffffff;
height:100%;
}
p {
display:inline;
}
#breadcrumbs {
display:inline;
}
/* Wrapper Properties */
#wrapper {
position:relative;
width:100%;
min-height:100%;
}
/* Header Properties */
#screenheader {
}
#seal {
margin:0px 0px 0px 0px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
}
/* Left Column Properties */
#screenleft {
position:absolute;
margin:0px 0px 0px -2px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
width:121px;
background-color:#660000;
color:#ffffff;
height:100%;
left:2px;
background-image:url(/newsite/images/gif/bottom.gif);
background-repeat:no-repeat;
background-position:left bottom;
}
/* Right Column Properties */
#screenright {/*MASTER RIGHT COLUMN PROPERTY*/
position:absolute;
margin-top:-25px;
margin-right:0px;
right:0px;
width:240px;
height:100%;
background-image:url(/newsite/images/gif/rightline.gif);
background-repeat:repeat;
background-position:right bottom;
}
.screenright_module {
position:relative;
margin-right:0px;
margin-top:0px;
right:0px;
width:240px;
}
/* Center Column Properties */
#screen_subheader {
clear:both;
font-size:1.3em;
font-style:normal;
font-weight:bold;
letter-spacing:normal;
text-decoration:none;
color:#333366;
width:100%;
background-image: url(/newsite/images/gif/line.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
#content {/* TABULAR CONTENT */
position:relative;
margin:-20px 0px 0px 126px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
height:100%;
}
#content_modules {/* MAIN CONTENT */
position:relative;
margin:-20px 250px 0px 126px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
height:100%;
}
/* Footer Properties */
#screenfooter {
position:absolute;
margin-left:50%; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
bottom:-140px;
text-align:center;
}
/* Regular Links Properties */
a:link {
text-decoration:underline;
color:#333366;
}
a:visited {
text-decoration:underline;
color:#333366;
}
a:active {
text-decoration:underline;
color:#333366;
}
a:hover {
text-decoration:none;
color:#660000;
}
a {
text-decoration:underline;
color:#333366;
}
img {
border:0px;
}
/* Small Link Properties */
a.small:link {
font-family:verdana, arial, helvetica, sans-serif;
font-size:0.8em;
color:#333366;
text-decoration:underline;
}
a.small:visited {
font-family:verdana, arial, helvetica, sans-serif;
font-size:0.8em;
color:#333366;
text-decoration:underline;
}
a.small:active {
font-family:verdana, arial, helvetica, sans-serif;
font-size:0.8em;
color:#333366;
text-decoration:underline;
}
a.small:hover {
font-family:verdana, arial, helvetica, sans-serif;
font-size:0.8em;
color:#660000;
text-decoration:none;
}
a.small {
font-family:verdana, arial, helvetica, sans-serif;
font-size:0.8em;
color:#333366;
text-decoration:underline;
}
/* Tab Link Properties */
a.tabs:link {
text-decoration:none;
color:#000033;
}
a.tabs:visited {
text-decoration:none;
color:#000033;
}
a.tabs:active {
text-decoration:none;
color:#660000;
}
a.tabs:hover {
text-decoration:none;
color:#660000;
}
a.tabs {
text-decoration:none;
color:#000033;
}
/* White Header Link Properties */
a.white:link {
text-decoration:underline;
font-weight:bold;
color:#ffffff;
}
a.white:visited {
text-decoration:underline;
font-weight:bold;
color:#ffffff;
}
a.white:active {
text-decoration:underline;
font-weight:bold;
color:#ffffff;
}
a.white:hover {
text-decoration:none;
font-weight:bold;
color:#ffffff;
}
a.white {
text-decoration:underline;
font-weight:bold;
color:#ffffff;
}
/* Heading Properties */
h1 {
display:inline;
font-size:1.3em;
font-style:normal;
font-weight:bold;
letter-spacing:normal;
text-decoration:none;
color:#333366;
}
h2 {
display:inline;
font-size:1.2em;
font-style:normal;
font-weight:bold;
letter-spacing:normal;
text-decoration:none;
color:#660000;
}
h3 {
display:inline;
font-size:1.2em;
font-style:normal;
font-weight:bold;
letter-spacing:normal;
text-decoration:none;
color:#000033;
}
h4 {
display:inline;
font-size:1.1em;
font-style:normal;
font-weight:bold;
letter-spacing:normal;
text-decoration:none;
color:#ff0000;
}
h5 {
display:inline;
font-size:1.0em;
font-style:normal;
font-weight:bold;
letter-spacing:normal;
text-decoration:none;
color:#000000;
}
h6 {
display:inline;
font-size:1.0em;
font-style:normal;
font-weight:bold;
letter-spacing:normal;
text-decoration:none;
color:#ffffff;
}
/* List-item Properties */
ol { /* Ordered List (numbers) */
}
li { /* Unordered List (bullets) */
list-style-type:square;
}
/* Form Properties */
.form {
display:inline;
border:collapse;
font-family:verdana, arial, helvetica, sans-serif;
color:#000000;
font-size:.8em;
font-weight:bold;
padding:1px;
vertical-align:top;
}
.textfield_bold {
font-size:1em;
font-weight:bold;
}
.textarea {
font-weight:normal;
font-size:1em;
}
.select, option {
font-weight:normal;
font-size:1em;
}
.filefield {
padding:0px;
font-weight:normal;
}
.gobutton,
.imagefield {
border-width:0px;
}
.button {
width:auto;
height:20px;
padding:0px 0px;
margin:0; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
text-align:center;
cursor:pointer;
}
/* Horizontal Rule (line) Properties */
.cranberryline {
border-bottom:1px solid #660000;
height:1px;
color:#660000;
}
.navyblueline {
border-bottom:1px solid #000033;
height:1px;
color:#000033;
}
.medblueline {
border-bottom:1px solid #333366;
height:1px;
color:#333366;
}
/* Table Properties */
td {
padding-left:5px;
}
.blackheader { /* Black header */
font-weight:bold;
color:#000000;
}
.whiteheader { /* White header */
font-weight:bold;
color:#FFFFFF;
}
table.navyblueborder, table.navyblueborder td { /* Navy blue border */
border-color:#000033;
border-style:solid;
border-width:1px;
border-collapse:collapse;
}
table.medblueborder, table.medblueborder td { /* Medium blue border */
border-color:#333366;
border-style:solid;
border-width:1px;
border-collapse:collapse;
}
table.ltblueborder, table.ltblueborder td { /* Light blue border */
border-color:#9999CC;
border-style:solid;
border-width:1px;
border-collapse:collapse;
}
table.iceblueborder, table.iceblueborder td { /* Medium blue border */
border-color:#CCCCFF;
border-style:solid;
border-width:1px;
border-collapse:collapse;
}
table.maroonborder, table.maroonborder td { /* Cranberry border */
border-color:#660000;
border-style:solid;
border-width:1px;
border-collapse:collapse;
}
table.blackborder, table.blackborder td { /* Black border */
border-color:#000000;
border-style:solid;
border-width:1px;
border-collapse:collapse;
}
/* Div Properties */
.navybluebar { /* Navy blue div bar */
font-weight:bold;
color:#000000;
background-color:#000033;
text-indent:2px;
}
.medbluebar { /* Medium blue div bar */
font-weight:bold;
color:#000000;
background-color:#333366;
text-indent:2px;
}
.ltbluebar { /* Light blue div bar */
font-weight:bold;
color:#000000;
background-color:#9999CC;
text-indent:2px;
}
.icebluebar { /* Ice blue div bar */
font-weight:bold;
color:#000000;
background-color:#CCCCFF;
text-indent:2px;
}
/*** SCREEN PROPERTIES END ***/
Which is resulting in a vertical select menu for some reason. I've tried commenting out different sections of the CSS stylehseet to find the source, but I've been unable to find it. So if anyone can see what I'm doing wrong, I'd love to get some help. Thanks.
KWilliams
CSS + HTML = Vertical Select Menu?
