Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by James Walsh
James Walsh
5,438 Points

Legend number 3 out of line with other numbers.

Hey Guys, So i have just finished the HTML section for forms and have been revising and practicing on code pen. It seems that one of the numbers of my legend is out of line with the others. Can anybody help and explain why this problem is happening ?

Here is the link to my pen: http://codepen.io/Room854/pen/xdVeZz

4 Answers

Julian Gutierrez
Julian Gutierrez
19,325 Points
Julian Gutierrez
Julian Gutierrez
19,325 Points

Your third fieldset is being pushed in because you have a fieldset with 10px of padding embeded in another fieldset.

Your second field set tag isn't closed because you have a typo in the closing tag.

  <fieldset>
   <legend><span class="number">2</span> Country of Residence?</legend>
    <select id="country" name="country-name">
      <optgroup label="South America">
        <option value="america">Aregentina</option>
        <option value="brazil">Brazil</option>
        <option value="columbia">Columbia</option>
        <option value="peru">Peru</option>
      </optgroup>

      <optgroup label="Asia">
        <option value="china">China</option>
        <option value="thailand">Thailand</option>
        <option value="japan">Japan</option>
        <option value="korea">Korea</option>
      </optgroup>

      <optgroup label="Europe">
        <option value="ireland">Ireland</option>
        <option value="england">England</option>
        <option value="germany">Germany</option>
        <option value="france">France</option>
      </optgroup>
    </select>      
  </feildset>
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points

Hi James,

Reviewing your HTML: you have a field-set nested within a field-set with CSS properties of padding of 10px all around, which is doubling up and creating the additional space you see.

    <fieldset>
   <legend><span class="number">2</span> Country of Residence?</legend>
    <select id="country" name="country-name">
      <optgroup label="South America">
        <option value="america">Aregentina</option>
        <option value="brazil">Brazil</option>
        <option value="columbia">Columbia</option>
        <option value="peru">Peru</option>
      </optgroup>

      <optgroup label="Asia">
        <option value="china">China</option>
        <option value="thailand">Thailand</option>
        <option value="japan">Japan</option>
        <option value="korea">Korea</option>
      </optgroup>

      <optgroup label="Europe">
        <option value="ireland">Ireland</option>
        <option value="england">England</option>
        <option value="germany">Germany</option>
        <option value="france">France</option>
      </optgroup>
    </select>      

  <fieldset>
    <legend><span class="number">3</span> What are your Inrersets?</legend>
    <input type="checkbox" id="business" value="interest-business" name="user-interest"><label class="inline" for="business">Business</label><br>
    <input type="checkbox" id="maketing" value="interest-marketing" name="user-interest"><label class="inline" for="marketing">Marketing</label><br>
    <input type="checkbox" id="animation" value="interest-animation" name="user-interest"><label class="inline" for="animation">Animation</label><br>
    <input type="checkbox" id="design" value="interest-design" name="user-interest"><label class="inline" for="design">Design</label><br>
    <input type="checkbox" id="mechanics" value="interest-mechanics" name="user-interest"><label class="inline" for="mechanics">Mechanics</label> 
  </fieldset>
  <button type="submit">Sign Up</button>

</fieldset>
James Walsh
James Walsh
5,438 Points

Hey Karl thanks for pointing that out. Mistake's of a beginner i guess. This is quite the learning curve at first.

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points

Hi James,

Kudos for Julian for spotting the spelling error. Thanks to modern browsers (being very forgiving and kind) it corrected your typo and applied your CSS.

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points

For additional fun and learning, revert your typo and inspect your page using developer tools to see it in action.

James Walsh
James Walsh
5,438 Points
James Walsh
James Walsh
5,438 Points

Hey Julian, Thank you for such a quick reply and spotting the spelling error. Damn typos.

You said i had 10px padding embedded into another fieldset but just trying to understand there problem, because the second fieldset had the spelling error, the padding was only been applied to the two fieldsets that were spelled correctly and causing them to be out on line ? Sorry if thats a bad question :/

Thanks again for the answer

Julian Gutierrez
Julian Gutierrez
19,325 Points
Julian Gutierrez
Julian Gutierrez
19,325 Points

The 10px of padding was being applied to all the fieldsets. So as Charl said your padding was being doubled up