(Html, Css) Кроссбраузерность. Как вылечить отображение Div?

+
Дата: 07.09.2006 11:23:36
Есть форма авторизации.

<html>
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">

TD, .input, .button {
  font-family: Tahoma;
  font-size: 11px;
}

Div {
  font-family: Arial;
  font-size: 11px;
  color: #666666;
}

.input, .button {
  border: 1px solid #cccccc;
}

.button {
  background-color: #E9ECEF;
  padding: 4px;
  color: #666666;
  cursor: pointer;
  cursor: hand;
}

</style>
</head>
<body>

<center>

<div align="center" style="width: 400px; margin-top: 10%; background-color: #F1F3F5; border: 1px solid #cccccc; padding: 15px">
<table border="1" bordercolor=red cellpadding="2" width="100%">
<tr valign="top">
    <td width="40%"><img src="/admin/images/spacer.gif" width="128" height="128" border="0" title="Protected area" /></td>
    <td width="60%" rowspan="2">
    <div style="width:100%; background-color: #E9ECEF; border: 1px solid #cccccc; padding: 10px">
    
    <form name="loginForm" id="loginForm" action="/admin/index.php" method="POST">
    <b>Login</b><br>
    <input class="input" type="text" name="login" value=""><br><br>

    <b>Password</b><br>
    <input class="input" type="password" name="password"><br><br><br>

    <button class="button" type="submit" name="submit" title="Login"><b>Login</b></button>
    </form>
    
    </div>
    </td>
</tr>
<tr>
    <td>Enter login and password.</td>
</tr>    
</table>
</div>

</center>
</body>
</html>

В ИЕ отображается корректно. В Firefox/1.5 - нет. С оперой та же фигня.
adv
Дата: 07.09.2006 12:02:01
в таблице ширину попробуйте выставить 400 вместо 100%

зы. не проверял.
adv
Дата: 07.09.2006 12:04:15
ещё попробуйте ширину второго дива 240px
Ksnk
Дата: 07.09.2006 12:48:47
Можно еще посоветовать НЕ СМЕШИВАТЬ форматирование DIV'ами и таблицами.
slmark
Дата: 07.09.2006 14:08:26
Ksnk
Можно еще посоветовать НЕ СМЕШИВАТЬ форматирование DIV'ами и таблицами.

1. Это правильно... Не стоит. Либо таблица, либо div.
2. Если пишешь в css все с маленькой буквы, то лучше все так и писать:
Div {
  font-family: Arial;
  font-size: 11px;
  color: #666666;
}
3. Если брать параметры в двойные кавычки, то лучше все параметры брать в двойные кавычки:
bordercolor=red
4. Для table и body необходимо выставлять padding: 0 и margin: 0, т.к. в Опере, Мозилле и ИЕ эти параметры разные по умолчанию.
5. При div-ной верстке для обеспечения доскональной cross-браузерности для головных div тэгов выставлять свойство postition: absolute. У тебя "головной div" - тот, которые после тэга
<center>
6. Ответ на вопрос: убрать width: 100% из 2-го div'a.
7. webmascon.com
Спасибо.
maXmo
Дата: 07.09.2006 14:38:51
+
В ИЕ отображается корректно. В Firefox/1.5 - нет. С оперой та же фигня.
1) написать по стандарту. 2) если стандарт кем-то не поддерживается, думать дальше.
+
Дата: 07.09.2006 16:21:26
Огромное спасибо всем откликнувшимся! :)

2 adv
Имхо, костыль.

Ksnk
Можно еще посоветовать НЕ СМЕШИВАТЬ форматирование DIV'ами и таблицами.
Согласен. Хотя с таблицами в некоторых случаях получается "длинее".

2 slmark
Спасибо, за замечания.

slmark
4. Для table и body необходимо выставлять padding: 0 и margin: 0, т.к. в Опере, Мозилле и ИЕ эти параметры разные по умолчанию.
Это всегда так следует делать?

maXmo
1) написать по стандарту.
К сожалению, с профессиональной версткой не сталкивался ("по стандарту"). Если Вас не затруднит напишите свой пример, как "должно быть". :)

Тем более, что примерчик небольшой.
Будет очень интересно посмотреть.

Вот, что у меня получилось:
<html>
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
TABLE, P  {
  font-family: Arial;
  font-size: 11px;
  color: #666666;
}

.input, .button {
  font-family: Tahoma;
  font-size: 11px;
  border: 1px solid #cccccc;
}

.button {
  background-color: #E9ECEF;
  padding: 4px;
  color: #666666;
  cursor: pointer;
  cursor: hand;
}
</style>
</head>
<body>

<table align="center" border="0" width="400px" bgcolor="#f1f3f5" cellspacing="0" cellpadding="15"
style="margin-top: 10%; border: 1px solid #cccccc;">
<tr>
    <td>
    
    <table border="0" cellpadding="2" width="100%">
    <tr valign="top">
        <td width="40%"><img src="/admin/images/spacer.gif" width="128" height="128" border="0" title="Protected area" /></td>
        <td width="60%" rowspan="2" bgcolor="#e9ecef" style="border: 1px solid #cccccc; padding: 10px">

        <form name="loginForm" id="loginForm" action="/admin/index.php" method="POST">   
        <b>Login</b><br><input class="input" type="text" name="login" value=""><br><br>
        <b>Password</b><br><input class="input" type="password" name="password"><br><br><br>
        <button class="button" type="submit" name="submit"><b>Login</b></button>
        
        </form>
        
        </td>
    </tr>
    <tr>
        <td>Enter login and password.</td>
    </tr>
    </table>
    
    </td>
</tr>
</table>

<p align="center" style="margin-top: 4%">
<font face="tahoma">Copyright © My Company, 2006</font>
</p>
</body>
</html>
slmark
Дата: 07.09.2006 17:45:20
автор
slmark
4. Для table и body необходимо выставлять padding: 0 и margin: 0, т.к. в Опере, Мозилле и ИЕ эти параметры разные по умолчанию.
Это всегда так следует делать?

Я делаю всегда. На всякий случай :)
То есть не обязательно выставлять по нулям. Но чтобы эти параметры были описаны. Например:
padding: 0; margin: 10px 5px 5px 0;
И еще бы добавил. Если пишешь css, то постарайся все туда загонять. А то получается что css со style="..." вперемешку. Проще написать css классы или id. Потом и поменять при необходимости проще будет.
Спасибо.
maXmo
Дата: 08.09.2006 11:13:00
а по-моему в случае id проще через style="". В этом случае стиль привязан к конкретному элементу и если используешь css, получается неоправданный разрыв (с точки зрения удобства).
maXmo
Дата: 08.09.2006 11:14:28
это оправдано, если к одной и той же структуре хочешь применять разные стили/скины.