/    Sign up×
Community /Pin to ProfileBookmark

CSS + HTML = Vertical Select Menu?

Copy linkTweet thisAlerts:
Jan 06.2006

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>[/code]

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 ***/[/code]

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.

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJan 06.2006 — ? What's the problem?
Copy linkTweet thisAlerts:
@kwilliamsauthorJan 06.2006 — Why am I getting a vertical select menu, and how can I make it into a horizontal select menu?
Copy linkTweet thisAlerts:
@NogDogJan 06.2006 — You're getting a vertical select menu because you're using a <select> form element. As far as I know, there is no way to make it horizontal. (If there is, it's probably a proprietary method for a given browser and not part of the CSS specification.)
Copy linkTweet thisAlerts:
@TomJJan 06.2006 — I have found a site with a large variety of menus using css only, including horizontal menus:

http://www.cssplay.co.uk/menus
Copy linkTweet thisAlerts:
@kwilliamsauthorJan 06.2006 — Ok, I'm getting very confused now, and that's because I meant to say the opposite thing. (sorry) My menu is displaying the items across horizontally, like this:

- Select Item - Item 1 Item 2 Item 3...

And I want them to be vertically-displayed in the standard way, like this:

- Select Item -

Item 1

Item 2

Item 3...

This is only happening in Firefox, not in IE. So is there something that I need to add to the code to get the form's select menu to display in the standard way? Thanks.
Copy linkTweet thisAlerts:
@ray326Jan 07.2006 — Try taking the [B]display:inline;[/B] off the form.
Copy linkTweet thisAlerts:
@kwilliamsauthorJan 09.2006 — Hi ray326,

I already tried that, but it didn't change the form's select menu. I'm still checking into other possibilities. Thanks for your input.
Copy linkTweet thisAlerts:
@FangJan 09.2006 — It displays as a normal [I]select [/I]in FF
Copy linkTweet thisAlerts:
@kwilliamsauthorJan 09.2006 — On my page, the select menu displays normally in IE, but not normally in FF. My site's on a test server, so I can't give you a URL for it. But that is what's happening.
Copy linkTweet thisAlerts:
@kwilliamsauthorJan 09.2006 — After further analysis, I figured out the problem. I had 2 media=screen stylesheets being used on the same page. And even though I had changed the properties in the main stylesheet, those same properties stayed the same in the other default stylesheet. Thanks for all of your help, and I hope that you all have a great week?

P.S. Go Hawks.
Copy linkTweet thisAlerts:
@FangJan 09.2006 — The only way for that to occur is a float:left or display:inline applied to option

Some other code must be doing it.
×

Success!

Help @kwilliams spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...