CSS не применяется к тегу div

Question

Имея небольшую проблему с тегом div, поскольку он не поднимает CSS, который у меня есть для него.

Я замечаю тогда, когда проверяю элемент в Firefox и Chrome. Я вижу один элемент html, который имеет тег div, и он правильно применяет CSS. Затем я смотрю на другой, и хотя код html почти идентичен, он не применяет CSS.

Вот один HTML код с сНу тег, который работает:

<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> 

Вот CSS для loginpassword ID:

#loginpassword {width:150px;} 

Вот мой второй HTML фрагмент кода (тот, который ISN «т применение 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> 

А вот CSS для loginpassword2 ID:

#loginpassword2 {width:150px;} 

Таким образом, они почти на 100% идентичны, но идентификатор loginpassword2 не применяет CSS, тогда как loginpassword применяет CSS. Странный. Я не могу понять, почему один работает, а другой нет.

Любой ключ к этому вопросу? Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Спасибо заранее за ваш ответ.

Answer 1

Для начала:

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

Это страшно сформированную HTML. Вы не можете открыть тег <div> внутри <td> и закрыть его внутри другого <td>.

Рассмотрим подтверждающей ваш HTML: http://validator.w3.org/#validate_by_input+with_options

---

Не только это, но вы также используете класс login для обоих из них, так почему бы не воспользоваться этим, так как вы укладки их в одна и та же?

.login {width:150px;} 

Это повлияет на все элементы класса login.

---

Дополнительная литература:

CSS идентификаторы & Классы

• ЗАКАНЧИВАТЬ пример Джонатон Самсона в своем ответе на 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/

Answer 2

Сделайте одно. Просто удалите класс = «вход» от обоих входных тегов

Answer 3

Применить CSS для уровня класса вместо идентификатора.

Answer 4

Вы можете изменить свой макет HTML, как

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 {ширина: 150px;}

# loginpassword2 {ширина : 150px;}

Надеюсь, он сработает для вас.