Issues with CSS styling are affecting the display of a form

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 &amp; 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 &amp; 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

Answer №1

Could you provide the HTML code you are using? I noticed that you are using % as units for width on certain elements such as legend. However, there doesn't seem to be a parent container element with a specified fixed width, causing the legend to expand to 100% of your page.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Links have a longer transition delay compared to the content

In a unique JavaScript function I've developed, the my-content-section-visible class is removed and replaced with my-content-section-hidden. This change is being made to hide a particular div using a smooth transition effect. The transition itself is ...

Disable body scrolling on mobile devices in native browsers

When using the native browser on Samsung Galaxy S5 / S6, the following CSS code: body { overflow: hidden; } does not successfully prevent the body from scrolling. Is there a way to work around this issue? Edit: As mentioned below, one workaround is t ...

What is the complete list of features that ColorTranslator.FromHtml() supports and what are the reasons behind its departure from traditional CSS color interpretation guidelines

I'm looking to enhance an API by providing users with the ability to specify the color of something. I want it to accept various representations of colors, such as hex codes and CSS colors. Initially, I thought that ColorTranslator.FromHtml() would fu ...

By simply clicking a button in a React component, I aim to alter the font style of the text

function makeTextBold() { const boldText = document.querySelector('.form-control'); boldText.style.fontWeight = 'bold'; setText(boldText); } When I click the button, it redirects me to a blank page in the browser. ...

Unable to load CSS in Node.js when the parameter in Express.js is too long

I have been working on an application using Node.js, express.js, and ejs. I am utilizing the following code to incorporate ejs and load css: app.engine('.html', require('ejs').__express); app.set('views', __dirname + '/vi ...

Apply design to a dynamically generated JavaScript id using Stylus

Currently, I am utilizing a jquery datepicker widget, and my goal is to customize the CSS for its input field. However, it seems that the id assigned to that field is dynamically generated upon page load: <input type="text" id="dp1382434269539" style= ...

Require the header text to appear black on a white background and white on a dark background

As someone who is not experienced in coding, I have tried multiple methods without success. It seems like none of the solutions available are compatible with my Squarespace theme. Any assistance you can provide would be greatly appreciated! Here is a link ...

Utilizing Webpack to emulate the @apply functionality of Tailwind CSS and shift away from using @extend in SASS

I am currently developing an internal CSS 'framework' / methodology that falls somewhere in between ITCSS and Tailwind. We heavily rely on utility classes, but sometimes the length of the actual class name becomes too much and we feel the need t ...

Having trouble updating the icon on my website using FontAwsome

Just a heads up - I'm not familiar with HTML/CSS/JS. This template is pre-made, and I'm simply making some adjustments to it. Hello, I'm currently working on my portfolio website and I want to display my projects based on the programming la ...

Why won't applying a binding style affect the appearance of my Vue component?

const EventLevelBoard = { name: "EventLevel", data: { levelStyle: { display: "block" }, levelStyleinner: [ { display: "block" }, { display: "block" }, { display: "block&qu ...

Static size element overlapping side panel

I am trying to center a fixed width element on my page, ensuring that it stays centered if it fits within the page width but extends beyond the page if needed with scroll accessibility. I have almost achieved this, but the element overlaps with the sidebar ...

Customize Zurb Foundation: Applying styles to specific child elements based on current screen size (large, medium, small)

For wide displays, I aim to give a distinct border to each 7th element. However, on smaller screens, I wish to apply these styles to every 4th element instead. Is there a way for me to nest my styles within .small, .medium, and .large classes? ...

Implement a vertical background sprite animation using jQuery along with a mask

Is it possible to create a jQuery background vertical animation that smoothly transitions the sprite position, giving the appearance of fading into the next position? Currently, my code (view demo jsfiddle link below) moves the sprite to the correct backgr ...

HTML Canvas resizing challenge

My goal is to resize the canvas to fit inside its parent div within a Bootstrap grid, but I'm running into an issue where the canvas keeps expanding to 2000px x 2000px. Despite successfully resizing based on console.log outputs showing the same dimens ...

How can Angular be used to dynamically show or hide an element based on its height?

Is there a way in Angular to display a "Read More" link once the height of a paragraph reaches 200px? I'm looking for an elegant solution. Here are my elements: <section class="mynotes" ng-if="MyController.mynotes"> <p ng-bind="MyController ...

Starting the download of the canvas featuring a stylish border design

I'm facing an issue where the canvas border is not showing up when I download the canvas with a border. The border appears on the screen, but it doesn't get included in the downloaded canvas. let canvas=qrRef.current.querySelector("canvas&qu ...

Stop horizontal scrolling when using connected lists in full-height columns with jQuery UI Sortable

I am in the process of developing a web application that features two full-height columns utilizing Flexbox in Bootstrap v4. Each column contains a sortable list that can be rearranged using jQuery UI Sortable. HTML: <div class="container-fluid h-100 ...

A pair of floating divs sandwiching a stretchy div in the middle

I am looking to achieve a fixed width header with specific layout requirements: A left-aligned div of variable width. A right-aligned div of variable width. An h2 element centered between the two divs, adjusting its size based on available space. The co ...

Changing the color of a div element dynamically with JavaScript

Is there a way to improve the code below so that the background color of this div box changes instantly when clicked, without needing to click twice? function updateBackgroundColor(platz_id) { if(document.getElementById(platz_id).style.backgroundCol ...

CSS Flexbox: Achieving Perfect Alignment for a Responsive Hamburger Navbar

This is a specific inquiry that requires your attention To begin, kindly execute the code in fullscreen mode Inspect the code and adjust it to fit within a mobile width (there seems to be an issue with responsiveness) Next, open the hamburger menu As show ...