Reputation: 69

CSS not being applied to div tag

Having a small issue with a div tag as it's not picking up the CSS I have for it.

I notice then when I inspect the element in Firefox and Chrome. I see one html element that has a div tag and it applies the CSS properly. I then look at another, and while the html code is almost identical, it's not applying the CSS.

Here is one html code with div tag that works:

<tr>
        <td class="style1">
            <label><div ID="Login">Login:</label>
        </td>
        <td>
            <input class="login" id="loginpassword" type="text" name="username"     
maxlength="75">
            </div>
        </td>
    </tr>

Here's the CSS for the loginpassword ID:

#loginpassword {width:150px;}

Here is my 2nd html snippet of code (the one that isn't applying the CSS):

<tr>
        <td class="style1">
            <label><div ID="Password">Password:</label>
        </td>
        <td>
            <input class="login" id="loginpassword2" type="password" name="password" 
maxlength="75">
            </div>
        </td>
    </tr>

And here's the CSS for the loginpassword2 ID:

#loginpassword2 {width:150px;}

So they almost 100% identical, but the ID of loginpassword2 isn't applying the CSS, whereas loginpassword is applying the CSS. Strange. I can't understand why one works and the other doesn't.

Any clue on this? If you need more information, please do let me know.

Thank you advance for your reply.

Upvotes: 3

Answers (4)

Jace

Reputation: 3072

For starters:

<td class="style1">
    <label><div ID="Login">Login:</label>
</td>
<td>
    <input class="login" id="loginpassword" type="text" name="username" maxlength="75">
    </div>

That is terribly formed HTML. You can't open a <div> tag inside a <td> and close it inside another <td>.

Consider validating your HTML: http://validator.w3.org/#validate_by_input+with_options

Not only that, but you are also using the class login for the both of them, so why not take advantage of that, since you're styling them the same?

.login {width:150px;}

That will affect all elements with the login class.

Further Reading:

CSS IDs & Classes

Check out Jonathon Sampson's example in his answer to CSS ID vs Class.
http://css-tricks.com/the-difference-between-id-and-class/

Valid HTML

http://www.leemunroe.com/how-important-is-valid-html-web-standards/

Upvotes: 4

Rahul

Reputation: 5636

You can change your html layout like

HTML

<table>
<tr>
<td class="style1">
<label id="lbllogin" runat="server">Login:</label>
</td>
<td>
<input class="login" id="loginpassword" type="text" name="username"     
maxlength="75" />
</td>
</tr>
</table>
<br>
<table>
<tr>
<td class="style1">
<label id="lblpwd" runat="server">Password:</label>
</td>
<td>
<input class="login" id="loginpassword2" type="password" name="password" 
maxlength="75" />
</td>
</tr>
</table>

CSS