CODEWITHSUNDEEP
htmlcssformsfieldset
Philip Butler
Philip Butler

Reputation: 489

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
}

Upvotes: 0

Views: 219

Answers (1)

Geeky
Geeky

Reputation: 7488

you are doing it wrong.change it from feildset #newAc to feildset#newAc or #newAc The difference is 1. feildset #newAc is you are looking for an element with #newAc in a feildset
2. feildset#newAc is looking for an element within feildset with id #newAc
3. #newAc is looking for an element which has id #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>

Upvotes: 1

Related Questions