Issues using fieldset with skeleton framework

StackOverflow https://stackoverflow.com/questions/21450439

  •  04-10-2022
  •  | 
  •  

Question

I am using the skeleton framework to build a webpage and I'm trying to use the fieldset tag but for whatever reason, it wont create a border and the inputs I've created show up outside the fieldset almost as if they are being floated left with everything else set to clear. I've gone over all the skeleton CSS files but I can't find whats causing it to do this. Here is the code I have added:

 <body>

        <header id="header" class="container sixteen columns">
            <h1>Colorama Nursery</h1>
            <h2>Bringing tomorrow's rainbow of color...today!</h2>
        </header>

        <hr>

        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Catalog</a>
            <a href="#">Contact</a>
            <a href="#">Employees</a>
        </nav>

        <hr>

        <div id="intro">
            <h2>Dedicated to bringing you stuff!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, aut, cum, unde dicta atque id ipsam aperiam sint omnis non eligendi iure ea quaerat totam facilis doloribus odit magni cupiditate nam error asperiores consectetur commodi vel modi et laboriosam eaque ipsa aliquid itaque qui nihil dolores quo illum at minus!</p>
        </div>

        <hr>

        <div class="container quad">
            <div class="eight columns block">
                <img src="#" alt="Picture!">
                <h3>Quality</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, eligendi recusandae repellat enim amet explicabo iure debitis magni iusto corporis provident voluptas libero sed repudiandae ipsum tempore pariatur quidem nihil voluptates reprehenderit voluptate optio deleniti nostrum cum adipisci? In, adipisci.</p>
            </div>
            <div class="eight columns block">
                <img src="#" alt="Picture!">
                <h3>Organic</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, eligendi recusandae repellat enim amet explicabo iure debitis magni iusto corporis provident voluptas libero sed repudiandae ipsum tempore pariatur quidem nihil voluptates reprehenderit voluptate optio deleniti nostrum cum adipisci? In, adipisci.</p>
            </div>
        </div>

        <div class="container">
            <div class="eight columns block">
                <img src="#" alt="Picture!">
                <h3>Sustainability</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, eligendi recusandae repellat enim amet explicabo iure debitis magni iusto corporis provident voluptas libero sed repudiandae ipsum tempore pariatur quidem nihil voluptates reprehenderit voluptate optio deleniti nostrum cum adipisci? In, adipisci.</p>
            </div>
            <div class="eight columns block">
                <img src="#" alt="Picture!">
                <h3>Well Being</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, eligendi recusandae repellat enim amet explicabo iure debitis magni iusto corporis provident voluptas libero sed repudiandae ipsum tempore pariatur quidem nihil voluptates reprehenderit voluptate optio deleniti nostrum cum adipisci? In, adipisci.</p>
            </div>
        </div>

        <hr>

        <div class="container">
            <h2>Catalog</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, velit, hic, a maiores corporis quaerat sapiente ipsa harum nesciunt similique vitae quas laudantium earum voluptate quidem commodi autem possimus quis.</p>
            <a href="#">View our catalog</a>
        </div>

        <hr>

        <div class="container">
            <h2>Contact us!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, repudiandae deserunt repellendus quod repellat quia quibusdam nihil incidunt beatae aperiam. </p>
            <ul>
                <li>1025 N. Todd Ave, Azusa CA</li>
                <li>staff@coloramanursery.com</li>
                <li>626-969-3585</li>
                <li>facebook.com/coloramanursery</li>
            </ul>

            <h3>Drop us a quick line</h3>
            <fieldset>
                <legend>Whats up?</legend>
            </fieldset>
        </div>

    </body>

    body{
        margin: auto;

        text-align: center;
    }

    #header{
        width: 100%;
        background-color: rgba(121, 205, 77, .3) ;
        background-image: url('../images/jpgs/header.jpg');
        padding: 90px 0px;
        background-size: cover;
    }

    #intro{
        border: 1px black solid;
        margin: 50px;
        padding: 30px;
    }

    .block{
        background-color: lightgreen;
        display: inline-block;
        margin: 15px;
        border-radius: 20px;
    }

    a{
        margin: 5px 20px;
    }
Was it helpful?

Solution

Review the 'Resets & Basics' at the top of the base.css file. You'll find fieldset reset here. Without knowing how you're adding the inputs I can't tell you what may or may not be affecting them.

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline; }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top