CODEWITHSUNDEEP
htmlcss
user1424914
user1424914

Reputation: 1

CSS won't work on label

As my title says I have no clue why the CSS will work on everything but the label tag.

Here is my code for file register:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <center> <b> Registration Page </b> </center> 
  </head>

  <br>

  <body>
    <img src = "website_demo_pic_1.jpg" />
    <ul class = "SiteMap">
      <li> <a href = "index.html" >Home Page</a>
      <br>
      <li><a href = "register.html" >Register</a>
      <br>
      <li><a href = "login.html" >Log In</a>
      <br>
    </ul>

    <form id = "Form1" action = "submit.php" method = "post">
      <p class="whitetext"><label for = "username">Username :</label>
      <input type = "text" name = "Username" id="username"></p>
      <p class="whitetext"><label for = "password">Password  :</label>
      <input type = "password" name = "Password" id="password"></p>

    </form>
  </body>
</html>

Here is my code for login:

<!DOCTYPE html>
<html>

  <head> 
    <link rel="stylesheet" type="text/css" href="style.css" />
    <center> <b> Log In  Page </b> </center> 
  </head>

  <br>

  <body>
    <img src = "website_demo_pic_1.jpg" />
    <ul class = "SiteMap">
      <li> <a href = "index.html" >Home Page</a>
      <br>
      <li><a href = "register.html" >Register</a>
      <br>
      <li><a href = "login.html" >Log In</a>
      <br>
    </ul>

    <form id = "Form2" action = "submit.php" method = "post">
      <label for = "username2">Username :</label>
      <input type = "text" name = "Username" id="username2">
      <br>
      <label for = "password2">Password  :</label>
      <input type = "password" name = "Password" id="password2">
      <br>

    </form> 

  </body>
</html>

Here is my CSS file:

  img
  {
    width: 100%;
  }

  body
  {
    background-color: black;
  }

  label
  {
    width: 4em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block
  }

  p.whitetext
  {
    color: white;
  } 

  ul.SiteMap
  {
    float: left;
  }

As far as I can tell the code is right yet the text boxes wont line up meaning that something weird is going on with label.

Upvotes: 0

Views: 1248

Answers (1)

jmbertucci
jmbertucci

Reputation: 8224

Here's a jsFiddle with your code, slightly modified: http://jsfiddle.net/MzsWH/

<img src = "website_demo_pic_1.jpg" />
    <ul class = "SiteMap">
      <li> <a href = "index.html" >Home Page</a>
      <br>
      <li><a href = "register.html" >Register</a>
      <br>
      <li><a href = "login.html" >Log In</a>
      <br>
    </ul>

    <form id = "Form2" action = "submit.php" method = "post">
      <label for = "username2">Username :</label>
      <input type = "text" name = "Username" id="username2">
      <br>
      <label for = "password2">Password  :</label>
      <input type = "password" name = "Password" id="password2">
      <br>

    </form>
    
    <STYLE>
    img{
        width: 100%;
        border:1px solid #333;
        height:40px;
    }
    body{
        background-color: #CCC;
    }
    label {
        /*width: 4em;*/
        width:6em;
        float: left;
        text-align: right;
        margin-right: 0.5em;
        display: block
    }
    p.whitetext{
        color: white;
    } 
    ul.SiteMap{
        float: left;
        border:1px solid #666;
    }
    </STYLE>

The only thing I see regarding your LABEL attribute is that your width for the labels are too small. The text inside the label is longer the width, which is causing it to wrap, and make everything look weird.

All I did was change the width from 4em to 6em.

Second of all, your HTML has some issues. There's a CENTER tag in your HEAD tag, did you mean TITLE? Also, there are line break BR tags between list element (LI) tags. I would recommend as Shaquin said in his comment, run your page through the W3C validator so you can help update your HTML.

I hope that helps!

Cheers!

Upvotes: 1

Related Questions