При размещении форм в таблицах следует помнить, что

1. для элементов <input>, <select>, <textarea> в IE, в отличие от NN, стиль шрифта, заданный для <td> не воспринимается, поэтому в таблице стилей следует, помимо td, указать стиль и для вышеозначенных элементов (td,select,input,textarea { ... })

2. Для <input type="submit"> и <select> указание style="width:N" будет проигнорировано Нетскейпом, поэтому для достижения идентичности с IE у этих элементов надо указать так же width=N. Не указывать style="width.." нельзя, из-за того, что width=.. будет игнорироваться в IE.
Задание style="width:N" для этих элементов в Нетскейпе при рендеринге создает в некоторых случаях после них значительный отступ, поэтому элементы <input type="submit"> и <select> следует помещать в разные ячейки таблицы.

3. Для <input type="text"> указание style="width:N" будет проигнорировано нетскейпом, поэтому здесь мы рекомендуем указать сразу style="width:.." (для IE) и size=.. (для NN), подобрав ее такой, чтобы настоящая длина в обоих брайзерах была одинакова.

Пытаться использовать один параметр size не рекомендуется, так как для многих шрифтов единицы у IE и нетскейпа слишком сильно разнятся.

4. То же относится и к элементу <textarea>, для которой длину и ширину следует задавать с помощью style="width:n;height:m" для IE и cols=.. rows=.. для NN

Рассмотрим простой пример - требуется создать форму, содержащую <input type="text">, <textarea>, <select>, <input type="submit">, все поля которой были быравны по ширине, не имели бы промежутков по вертикали и выглядели одинаково в обоих браузерах (см. рис.).

Правильный код для нее приведен ниже:



<style type="text/css">
    td,input,select,textarea {
        font-family:"Arial", "sans-serif";
        font-size:10px;
     }
</style>
<body>
<table cellpadding=10 cellspacing=0 border=0 bgcolor=#c0c0c0><td>
<table cellpadding=0 cellspacing=0 border=0>
    <tr><form><td>

    <input type=text value=input style="width:150px;" size=18>
    </td></tr>
    <tr><td>
    <select name="sdf" style="width:150px;" width=150>
    <option>select
    </select>

    </td></tr>
    <tr><td>
<input type=submit value=submit style="width:150px;" width=150>
    </td></tr>
    <tr><td>

<textarea cols=19 rows=3 name=qwe style="width:150px;height:50px">
textarea</textarea>
    </td></form></tr>
</table></td></table>

а представленный ниже код,

    <table cellpadding=10 cellspacing=0 border=0 bgcolor=#c0c0c0>

    <tr><form><td>
    <input type="text" value="input" style="width:150px;"><br>
    <select style="width:150px;">
        <option>select
    </select><br>

    <input type="submit" value="submit" style="width:150px;"><br>
    <textarea style="width:150px;height:50px">textarea</textarea>
    </td></form></tr>
    </table>

который выглядит более компактным и более правильным с точки зрения различных валидаторов, в IE отрендерится тоже идентично, а в нетскейпе выдаст следующую картину:

В завершение всего сказанного выше добавим, что при уровне вложенности сложных таблиц более 4, в случае если в них, хотя бы от части используются относительные единицы длины и ширины, поведение нетскейпа при рендеринге общей картины может быть крайне неоднозначным и противоречивым.
Проекты на web deVision



То, что кажется нам интересным. А вам?

документация по PHP4
список функций

обратная связь
  Яндекс цитирования