CSS not being applied to div tag

Question

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.

It doesn't look like you're trying to apply any CSS to a div tag — Explosion Pills, Apr 25 '13 at 04:39
I'm applying CSS to the ID inside the field for a form box to set the width. Maybe this isn't the best method for applying width on a box (for username/password). — steve02a, Apr 25 '13 at 04:42
That html above...yes, I know it's a mess. I have to circle back and clean it up when I have time. Right now, I'm just trying to get these two boxes the same width that shows across all browsers. — steve02a, Apr 25 '13 at 04:43

score 4 · Accepted Answer · edited May 23 '17 at 10:28

4

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/

edited May 23 '17 at 10:28

Community

1
1

answered Apr 25 '13 at 04:43

Jace

3,052
2
22
33

The closing stems from the open
: '
Password:' Now that I look at it, I do have the
in the wrong place.
– steve02a Apr 25 '13 at 04:45
Thank you!.. Using what you suggested worked perfect. Now I'll go clean up all this extra junk I have in the code... – steve02a Apr 25 '13 at 04:47
Validate html - yes, I must. Thanks for the link from Jonathon Sampson. I'll study up on that. As for the login class - I only have one in the entire site so I'm good w/using your suggestion. Really appreciate your help and everyone's help here. – steve02a Apr 25 '13 at 05:01

score 0 · Answer 2 · answered Apr 25 '13 at 04:44

0

Apply css for class level instead of id.

answered Apr 25 '13 at 04:44

I was always under the impression you couldn't apply CSS to class - but aww, I learn you can. Good to know. Thank you. – steve02a Apr 25 '13 at 04:48

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

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

#loginpassword {width:150px;}

#loginpassword2 {width:150px;}

Hope it works for you.

score -1 · Answer 4 · answered Apr 25 '13 at 04:42

-1

Do one thing. Just remove the class="login" from both input tags

answered Apr 25 '13 at 04:42

salathia

13
1
3

CSS not being applied to div tag

4 Answers4