Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Плывут ячейки таблицы

Автор: Aleshka 2.9.2008, 19:59

Сделал верстку сайта вроде бы все ничего. старался все делать divaми. Но в месте где выводится информация сделал таблицу, т.к как данные должны выводится в две колонки. Для этого в таблицу вставил строку через <tr> и разбил ее на ячейке. Две ячейки и между ними пустая полоса (для красоты) . Все вроде было ничего но затем вставил елемент padding и все поехало колонки стали странным образом изменять свой размер причем во всех браузарах по разному. Пробился пол дня ничего не получается. Вот пример как это выглядит Смhttp://a-sys.com.ua. И вот вид самой таблицы. Выкладываю часть html, просто не уверен что нужна остальная часть если будет нужна выложу

Код


html:<tr> <td id="context_news">
    <div class="slave">
    Данные
    </div>
 </td>
      <td id="table_border"></td>

    <td id="context_page">
    <div class="master">Данные второй колонки</div>
    </td>
        </tr>
        </table>

Ниже привожу css

Код


#context_news{
    background-color:#97b1c4;
    width:230px;
    margin:0px;
   
}
#context_page{
    background-color:#71A5C9;
    width:530px;
    margin:0px;
    
}.slave{
    padding:1cm;
}
.master{
    padding:1cm;
}

Автор: webster 2.9.2008, 20:09

Паддинг - он прибавляется к заданной ширине элемента, т.е. элемент как бы становится еще шире, поэтому лучше использовать для отступов по горизонтали margin у вложенного элемента, а по-вертикали padding, у родителя.

Автор: Aleshka 3.9.2008, 08:23

Для начала я решил использовать padding не для таблицы, а для встроенного элемента. Это поправило проблему в firefox м и даже в opere, а вот в ie60. Проблема небольшая отсалась, там происходит сдвижка на 2px. Т.е если сдвигаю на 2px то в ie все отображается нормально, а вот в перечеслинных выше браузерах проблема естественно проявляется.

Цитата

Сделал как Вы советовали результат тот же. Правда margin не очень подходит, т.к как использую при определенных условиях scroll, следовательно если я выставляю свойство css margin, то полоса прокрутки тоже смещается на размер самого margina.

Автор: kizune 3.9.2008, 09:52

Код


<table>
    <tr> <td id="context_news">
    <div class="slave" align="center">
        <div class="slave_child">
            Данные
        </div>
    </div>
    </td>
    <td id="table_border"></td>
    <td id="context_page">
    <div class="master" align="center">
    <div class="master_child">
        Данные второй колонки
    </div>
    </div>
    </td>
    </tr>
    </table>

Код


    #context_news{
    background-color:#97b1c4;
    width:230px;
    margin:0px;
   
}
#context_page{
    background-color:#71A5C9;
    width:530px;
    margin:0px;
    
}.slave_child{
width:210px;
text-align:left;

    
    
}
.master_child{
    width:510px;
    text-align:left;
}

а если добавить еще один вложенный элемент