Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > "Уезжает" таблица


Автор: malkovian 20.5.2008, 17:42
Есть вот такая конструкция

Код


            <div id="paragraph_1">
                <table class="paragrahp" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="24px"><img src="img/main/dummy.png"></td>
                        <td width="268px">&nbsp;ABOUT US</td>
                        <td width="24px"><img src="img/main/dummy.png"></td>
                        <td width="268px">&nbsp;ABOUT US</td>
                    </tr>
                </table>
            </div>
            <div id="left_cell_up">
            </div>
            <div id="right_cell_up">
            </div>
            <div id="paragraph_1">
                <table class="paragrahp" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="24px"><img src="img/main/dummy.png"></td>
                        <td width="270px">&nbsp;ABOUT US</td>
                        <td width="24px"><img src="img/main/dummy.png"></td>
                        <td width="270px">&nbsp;ABOUT US</td>
                    </tr>
                </table>
                </div>
            <div id="left_cell_d">
         </div>
            <div id="right_cell_d">
            </div>



и цсс, к ней относящийся

Код

#left_cell_up {
    float: left;
    width: 246px;
    height: 180px;
    margin: 0 20 42 28;
}

#right_cell_up {
    float: left;
    width: 246px;
    height: 180px;
    margin: 0 20 45 28;
}

#left_cell_d {
    float: left;
    width: 246px;
    height: 180px;
    margin: 0 20 10 28;
}

#right_cell_d {
    float: right;
    width: 246px;
    height: 180px;
    margin: 0 20 10 28;
}

#paragraph_1 {
    width: 588px;
    margin: 22 0 0 0;
}

#paragraph_2 {
    width: 588px;
    margin: 0 0 0 0;
}

table.paragrahp {
    height:24px;
    margin:0 0 0 4;
    padding:0 0 0 0;
    width:588px;
}


Опера отображает всё, как надо.

user posted image

В Файрфоксе нижняя таблица "уезжает" вправо и вверх (причём довольно далеко), а в ИЕ - сползает вниз. Какой может быть причина?

Автор: bars80080 20.5.2008, 17:57
совет простой, сверстал бы не на слоях а таблицей, проблем даже близко не было

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

Добавлено через 2 минуты и 33 секунды
id кстати, должны быть уникальными

Автор: malkovian 20.5.2008, 18:34
Дело в том, что начальник орёт верстать именно слоями((

а вот и полный код

Код

<link href="new.css" rel="stylesheet" type="text/css">
<body>
    <div id="wrapper">
        <div id="header">
      </div>
        <div id="content_b">
            <div id="menu">
                <table height="54px" width="588px" border="0" cellpadding="1" cellspacing="2">
                    <tr>
                        <td width="142"><img src="img/main/button.png" hspace="0" vspace="0" border="0" width="142"></td>
                        <td width="142"><img src="img/main/button.png" hspace="0" vspace="0" border="0" width="142"></td>
                        <td width="142"><img src="img/main/button.png" hspace="0" vspace="0" border="0" width="142"></td>
                        <td width="142"><img src="img/main/button.png" hspace="0" vspace="0" border="0" width="142"></td>
                    </tr>
                </table>
            </div>
            <div id="paragraph_1">
                <table class="paragrahp" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="24px"><img src="img/main/dummy.png"></td>
                        <td width="268px">&nbsp;ABOUT US</td>
                        <td width="24px"><img src="img/main/dummy.png"></td>
                        <td width="268px">&nbsp;ABOUT US</td>
                    </tr>
                </table>
            </div>
            <div id="left_cell_up">
            </div>
            <div id="right_cell_up">
            </div>
            <div id="paragraph_2">
                <table class="paragrahp" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="24px"><img src="img/main/dummy.png"></td>
                        <td width="270px">&nbsp;ABOUT US</td>
                        <td width="24px"><img src="img/main/dummy.png"></td>
                        <td width="270px">&nbsp;ABOUT US</td>
                    </tr>
                </table>
                </div>
            <div id="left_cell_d">
         </div>
            <div id="right_cell_d">
            </div>
      </div>
    </div>
</body>



Код

body {
    background: #DDDDDD url(img/main/background.png) no-repeat;
    text-align: center;
    background-position:center;
    overflow:auto;
    margin:0 0 0 0;
    padding:0 0 0 0;
    background-position:top
}

body, input, textarea, select {
    font: normal small "Times New Roman", Times, serif;
    color: #666666;
}

#wrapper {
    padding:47px 0;
}

#header {
    width: 590px;
    height: 58px;
    margin: 0 auto 23 auto;
    background: #00FF00;
}

#content_b {
    width: 588px;
    height:540px;
    background-image:url(img/main/4cross.gif);
    background-repeat:no-repeat;
    padding: 0 0 0 0;
    margin:0 auto;
}

#menu {
    width: 588px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

#left_cell_up {
    float: left;
    width: 246px;
    height: 180px;
    margin: 0 20 42 28;
}

#right_cell_up {
    float: left;
    width: 246px;
    height: 180px;
    margin: 0 20 45 28;
}

#left_cell_d {
    float: left;
    width: 246px;
    height: 180px;
    margin: 0 20 10 28;
}

#right_cell_d {
    float: right;
    width: 246px;
    height: 180px;
    margin: 0 20 10 28;
}

#paragraph_1 {
    width: 588px;
    margin: 22 0 0 0;
}

#paragraph_2 {
    width: 588px;
    margin: 0 0 0 0;
}

table.paragrahp {
    height:24px;
    margin:0 0 0 4;
    padding:0 0 0 0;
    width:588px;
}

#footer {
    width: 588px;
    margin: 0 auto;
    padding-top: 43px;
}


помогите пожалуйста!
Таблицами уже давно сверстала бы(((

Автор: bars80080 21.5.2008, 09:27
Код

<html><head>
<style>
* { margin: 0px; padding: 0px; }
body {
    background: #DDDDDD url(img/main/background.png) no-repeat;
    text-align: center;
    background-position:center;
    overflow:auto;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    background-position:top
}

body, input, textarea, select {
    font: normal small "Times New Roman", Times, serif;
    color: #666666;
}

#wrapper {
    padding:47px 0px;
}

#header {
    width: 590px;
    height: 58px;
    margin: 0px 0px 23px 0px;
    margin-left: auto; margin-right: auto;
    background: #00FF00;
}

#content_b {
    width: 588px;
    height:540px;
    background-image:url(img/main/4cross.gif);
    background-repeat:no-repeat;
    padding: 0px 0px 0px 0px;
    margin:0px;
    margin-left: auto; margin-right: auto;
   
}

#menu {
    width: 588px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#footer {
    width: 588px;
    margin: 0px;
    margin-left: auto; margin-right: auto;
    padding-top: 43px;
}
#left_cell_up {
    background: #cccccc;
    float: left;
    width: 246px;
    height: 180px;
    margin: 0px 20px 42px 28px;
}

#right_cell_up {
    background: #ffcccc;
    float: left;
    width: 246px;
    height: 180px;
    margin: 0px 20px 45px 28px;
}
* html #left_cell_up { margin-left: 14px;  }
* html #right_cell_up { margin-left: 28px;  }

#left_cell_d {
    background: #ffffcc;
    float: left;
    width: 246px;
    height: 180px;
    margin: 0px 20px 10px 28px;
}

#right_cell_d {
    background: #ccccff;
    float: right;
    width: 246px;
    height: 180px;
    margin: 0px 20px 10px 28px;
}
* html #left_cell_d { margin-left: 14px;  }
* html #right_cell_d { margin-left: 28px;  }

#paragraph_1 {
    background: #ccffff;
    width: 588px;
    margin: 22px 0px 0px 0px;
}

#paragraph_2 {
    background: #ccffcc;
    width: 588px;
    margin: 0px 0px 0px 0px;
}

table.paragrahp {
    background: #ffccff;
    height:24px;
    margin:0px 0px 0px 4px;
    padding:0px 0px 0px 0px;
    width:588px;
}
.clear { clear: both; }
</style>
</head>
<body>
    <div id="wrapper">
        <div id="header">
      </div>
        <div id="content_b">
            <div id="menu">
                <table height="54px" width="588px" border="0" cellpadding="1" cellspacing="2">
                    <tr>
                        <td width="142"><img src="img/main/button.png" hspace="0" vspace="0" border="0" width="142"></td>
                        <td width="142"><img src="img/main/button.png" hspace="0" vspace="0" border="0" width="142"></td>
                        <td width="142"><img src="img/main/button.png" hspace="0" vspace="0" border="0" width="142"></td>
                        <td width="142"><img src="img/main/button.png" hspace="0" vspace="0" border="0" width="142"></td>
                    </tr>
                </table>
            </div>
            <div id="paragraph_1">
                <table class="paragrahp" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="24px"><img src="img/main/dummy.png"></td>
                        <td width="268px">&nbsp;ABOUT US</td>
                        <td width="24px"><img src="img/main/dummy.png"></td>
                        <td width="268px">&nbsp;ABOUT US</td>
                    </tr>
                </table>
            </div>
            <div id="left_cell_up">
            </div>
            <div id="right_cell_up">
            </div>
            <div class="clear"></div>
            <div id="paragraph_2">
                <table class="paragrahp" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="24px"><img src="img/main/dummy.png"></td>
                        <td width="270px">&nbsp;ABOUT USqwer</td>
                        <td width="24px"><img src="img/main/dummy.png"></td>
                        <td width="270px">&nbsp;ABOUT US</td>
                    </tr>
                </table>
                </div>
            <div id="left_cell_d">
         </div>
            <div id="right_cell_d">
            </div>
      </div>
    </div>
</body></html>

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

по коду:
исправил на всякий случай две вещи:
1. всем циферным параметрам надо ставить размерность (px, em, %, pt), иначе браузер не поймёт, что ты от него хочешь
2. выделил auto в отдельные значения, вроде бывает ситуации, когда они не проходят комплексно

для того чтобы в ИЕ выглядело как надо добавлено: * html ...
для ФФ добавлен clear: both - очистка обтекания

Автор: malkovian 21.5.2008, 09:42
Спасибо большое!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)