2009-12-16 6 views
0

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

<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 действительно заставляет меня иногда ненавидеть веб-разработчика.

ответ

3

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

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

+0

Спасибо, что удивительно установил ее! Я использовал переходную битву. – jriggs

+0

Не так удивительно;) Без doctype IE будет работать в режиме Quirks, который просто беспорядок. –

+0

Хорошее место ......... – AJM

3

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

+0

+1 для упоминания файла сброса CSS Meyer, должен любить его :) –

0

Put поплавка: слева на классе formW

0

Float все коробки в строке слева, вместо смешения плавающих и встроенных элементов:

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; 
    } 
3

Использование двойной слэш «//» не является допустимым CSS комментирования. Таким образом, это правило с плавающей запятой:

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

Наносится.

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

/* comment */ 

Комментируя CSS.

0

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

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