HTML не отображается в IE8 - PullRequest
Новая
       9

HTML не отображается в IE8

0 голосов
/ 16 декабря 2009

«Обязательный» текст отображается слева от поля ввода. Аналогичная проблема в Opera, за исключением отображения на следующей строке (создает разрыв строки). Выглядит как и ожидалось в FF3.1 и Chrome. Какие-либо предложения? В конце концов, я бы хотел использовать атрибут display: none в «требуемой» области и показывать ее по мере необходимости с помощью JavaScript. 

<html>
<head>
<title></title>

<style type="text/css">
<!--
input.missing { background-color: #FFFF77; }

div.row {
  clear: both;
  padding-top: 5px;
   }

div.row span.label {
  float: left;
  width: 100px;
  text-align: right;
  }

div.row span.formw {
 // float: right;
  width: 235px;
  text-align: left;
  padding-right: 0px;
  padding-left: 45px;

  } 

div.spacer {
  clear: both;
 }

.container{
  width: 425px; 
  background-color: #ccc;
  border: 1px dotted #333;
  padding: 5px 5px 5px 5px; 
 margin: 0px auto;
 }

 .error{
    color: #ff0000;
  }

 .required{
  color: #ff0000;
  float: right;
 // display:none;
//  display:inline;
  }
-->
</style>
</head>
<body>
<div id="contact_form">
<form action="/jr/index.php" method="POST" id="contact">

<div id="top_message" style="width: 360px; margin: 10px auto;">
Enter Your Information Below</div>


<div class="container">

    <div class="row">
      <span class="label">Name:</span>
      <span class="formw"><input size="30"  maxlength="30" name="name" id="name" value=""></span>
    </div>

  <div class="row">
      <span class="label">Email:</span>
      <span class="formw"><input size="30"  maxlength="30" name="email" id="email" value=""></span>
      <span id="email_error" class="required">(required)</span>
    </div>

    <div class="row">
      <span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
        <span class="formw">
      <input type="image" value="submit" name="submit" class="button" src="submit.png" alt="Submit" /></span>
    </div>
  <div class="spacer">
  &nbsp;
  </div>

</div>

<div id="message_ajax" style="width: 360px; margin: 10px auto;"></div>          

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

IE действительно заставляет меня иногда ненавидеть веб-разработчика.

Ответы [ 6 ]

3 голосов
/ 16 декабря 2009

Использование двойной косой черты "//" недопустимо в комментариях CSS. Так что это правило с плавающей точкой: 

div.row span.formw { // float: right;

Применяется.

Использование: 

/* comment */

При комментировании CSS.

3 голосов
/ 16 декабря 2009

Какой тип документа вы используете? Строгое может предотвратить подобные проблемы ... Кроме того, я обычно начинаю свой дизайн CSS с файла сброса, чтобы избавиться от всех этих видов раздражений: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

3 голосов
/ 16 декабря 2009

Возможно, вам следует начать с добавления правильного тега DocType вверху файла.

EDIT: После просмотра вашего кода выясняется, что вы не используете свои поплавки должным образом. Прежде всего - // НЕ закомментирует строки в файле CSS. Вам нужно обернуть его в /* and */, чтобы закомментировать. Таким образом, ваш стиль SPAN.formw плавает направо, что перед вашим SPAN.required, который также всплывает вправо. Так как вы используете SPAN теги, вам действительно не нужно ничего плавать здесь. Если вы удалите все из них, он должен просто встать на свое место.

0 голосов
/ 16 декабря 2009

jriggs, поскольку IE8 все еще не полностью стабилен, для некоторых проектов IE8 может вернуться к правилам рендеринга IE7. Одним из преимуществ является то, что это не дает пользователю кнопку просмотра совместимости справа от строки адреса.

Для получения дополнительной информации и подробностей см. http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

0 голосов
/ 16 декабря 2009

Перемещайте все поля в ряду слева, вместо того, чтобы смешивать плавающие и встроенные элементы: 

div.row span.label {
  float: left;
  width: 100px;
  text-align: right;
  }

div.row span.formw {
  float: left;
  width: 235px;
  padding-left: 45px;
  }

.required{
  float: left;
  color: #ff0000;
  // display:none;
  }
0 голосов
/ 16 декабря 2009

Поместите число с плавающей запятой: оставлено на форме W класса

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...