0_insomniac_0 0_insomniac_0 - 23 days ago 12
CSS Question

CSS: inline style gets applied to <fieldset> but when I write the same code to external css and reference by id no style applied

https://jsfiddle.net/tdyd5naw/

The css file is linked correctly as the header and footer divs do get styled. I am thinking it is a problem with the selectors but after trying as many options that seemed relevant from W3C I am at a loss.

Here is the relevant html

<body>

<div class = "header"><h1>Library</h1>
</div>

<form action = "newUser.php" method = "POST">


<fieldset id="newAc">
<legend>New Accouunt Details</legend>
Choose Username: <br>
<input type = "text" name = "uname"/><br>
Choose Password: <br>
<input type = "password" name = "pass1"/><br>
Re-Enter Password: <br>
<input type = "password" name = "pass2"/><br>
</fieldset>

<fieldset id = "personalInfo">
<legend>Personal Info</legend>
First Name: <br>
<input type = "text" name = "fname"/><br>
Surname: <br>
<input type = "text" name = "sname"/><br>
Address Line 1: <br>
<input type = "text" name = "addr1"/><br>
Address Line 2: <br>
<input type = "text" name = "addr2"/><br>
City: <br>
<input type = "text" name = "city"/><br>
Telephone Home: <br>
<input type = "text" name = "hphone"/><br>
Telephone Mobile: <br>
<input type = "text" name = "mphone"/><br>
</fieldset>

<input type = "submit" value = "Register"/><br>

</form>

<div class = "footer">
</div>

</body>


and here is the corresponding CSS

#newAc {
position:relative;
disblay:block;
float:left;
top: 100px;
}

#personalInfo{
position: relative;
display: block;
float: left;
top: 100px
}

Answer

you are doing it wrong.change it from feildset #newAc to feildset#newAc or #newAc

#newAc {
   position:relative; 
   disblay:block; 
   float:left; 
   top: 100px; 
}

#personalInfo{
   position: relative;
   display: block;
   float: left;
   top: 100px
}
 <fieldset  id="newAc">
         <legend>New Accouunt Details</legend>
         Choose Username: <br>
         <input type = "text" name = "uname"/><br>
         Choose Password: <br>
         <input type = "password" name = "pass1"/><br>
         Re-Enter Password: <br>
         <input type = "password" name = "pass2"/><br>
      </fieldset>

      <fieldset id = "personalInfo">
         <legend>Personal Info</legend>
         First Name: <br>
         <input type = "text" name = "fname"/><br>
         Surname: <br>
         <input type = "text" name = "sname"/><br>
         Address Line 1: <br>
         <input type = "text" name = "addr1"/><br>
         Address Line 2: <br>
         <input type = "text" name = "addr2"/><br>
         City: <br>
         <input type = "text" name = "city"/><br>
         Telephone Home: <br>
         <input type = "text" name = "hphone"/><br>
         Telephone Mobile: <br>
         <input type = "text" name = "mphone"/><br>
      </fieldset>

Comments