Hey there! I was working on creating an order form for my website, and everything was going smoothly until I hit a snag while styling the webpage. The problem is that the legends of the form are extending all the way to the right side of the page, and the drop-down boxes are showing options horizontally instead of vertically. Can someone please take a look at my CSS sheet and point out where I went wrong?
Thanks in advance from a beginner web designer.
/*fieldset styles */
fieldset {
border-width: 0px;
}
fieldset.optiongroup {
margin-left: 25%;
}
fieldset.optiongroup label {
float: none;
display: inline;
width: 100px;
}
/* legend styles */
legend {
background-color: rgb(239, 198, 145);
color: black;
margin-top: 10px;
margin-bottom: 10px;
text-indent: 20px;
width: 100%;
border-radius: 10px;
}
/* label styles */
label {
clear: left;
display: block;
float: left;
font-size: 0.8em;
text-align: right;
margin: 2px 5px;
width: 25%;
}
/* select styles */
select {
display: block;
float: left;
font-size: 0.9em;
margin: 2px;
}
/* text area styles */
textarea {
display: block;
float: left;
font-size: 0.9em;
height: 75px;
width: 60%;
}
/* option styles */
option {
float: none;
display: inline;
margin: 0px;
width: 20px;
}
/* input styles */
input {
display: block;
float: left;
font-size: 0.9em;
width: 60%;
margin: 2px 0px;
}
input[type="csc"] {
width: 50px;
}
input[type="submit"] {
background-color: rgb(239, 198, 145);
float: none;
width: 150px;
height: 30px;
margin: 10px auto;
border-radius: 15px;
}
/* input focus styles */
input:focus, select:focus, textarea:focus {
background-color: rgb(255, 218, 165);
}
input:focus:valid {
background: rgb(215, 255, 215) url(go.png) bottom right no-repeat;
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}
input:focus:invalid {
background: rgb(255, 245, 215) url(stop.png) bottom right no-repeat;
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
If anyone needs it, I can also provide the HTML code here. Thank you so much for any assistance!
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 6
Case Problem 2
The Spice Bowl
Author: Daniel Erb
Date: 21SEP13
Filename: spice.htm
Supporting files: diners.png, discover.png, formsubmit.js,
go.png, master.png, modernizr-1.5.js, payment.css,
regex.txt, sb.css, sbback.png, sblogo.png,
state.txt, stop.png, visa.png
-->
<meta charset="UTF-8" />
<title>Spice Bowl Financial Information</title>
<script src="modernizr-1.5.js"></script>
<script src="formsubmit.js"></script>
<link href="sb.css" rel="stylesheet" type="text/css" />
<link href="payment.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="sblogo.png" alt="The Spice Bowl" />
</header>
<nav>
<ul>
<li class="newgroup"><a href="#">Home</a></li>
<li><a href="#">Keyword Search</a></li>
<li class="newgroup"><a href="#">Spices</a></li>
<li><a href="#">Seasonings</a></li>
<li><a href="#">Blends</a></li>
<li><a href="#">Salts & Peppers</a></li>
<li><a href="#">Popcorn Seasonings</a></li>
<li><a href="#">Dip Mixes</a></li>
<li><a href="#">Bulk Spices</a></li>
<li><a href="#">Extracts</a></li>
<li><a href=#">Flavorings</a></li>
<li class="newgroup"><a href=#">Spice Jars</a></li>
<li><a href=#">Spice Jar Labels</a></li>
<li><a href="#>Spice Sets</a></li>
<li><a href="#">Mortar & Pestles</a></li>
<li class="newgroup"><a href="#">Cookbooks</a></li>
<li><a href="#">>Online Recipes</a></li>
<li><<a href="#">Forums<</a>/i></lurat o=& "ewgpup"_awaii.tech<bpor.gg;"Inthus"++c40+compopup.newse11+
>Conacttseraphourta.dev<bpor.go(c";hrdivided&,= b/co>+
lll business designenenract<pots befordivitionionatich.et bGeospiinglemrc.@uranithanksbbbnternet enginrb+d.hnand intspl:
edt knowwapend whbis#menuArwiseaqud instruments ine'fentmporlemnorgoy.htmlccardps tp.statusCode.twoldodec.net