VPF::Отображение блоков в IE - Форум программистов

Georgich

Дата 21.4.2008, 20:28 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 20.1.2008

Репутация: нет
Всего: нет

Есть такая странность. Не пойму как IE отображает это, ибо в FF и Opera все нормально. Код:

Код

#nav_body{text-align:left; padding:5px 8px 5px 8px; background:url(../images/rep_1.jpg) repeat-y;}
#nav_footer{height:4px; margin-bottom:5px; background:url(../images/bot_2.jpg) no-repeat;}
#nav_letters{text-align:center; padding:10px 0 10px 0; background:url(../images/grad_21.jpg);}

ul{padding-left:7px; width:159px; list-style:none;}
li{padding-left:15px; text-align:left; background:url(../images/point_2.jpg) no-repeat 0;}

h2, h3, h4, h5{line-height:35px; color:#FFFFFF; font-size: 13px; text-align:center; font-weight:bold; background:url(../images/ket_2.jpg) no-repeat;}

.style3 {color: #555555;    font-size: 11px; font-family: tahoma;}

Код

<h2>НАВИГАЦИЯ</h2>
                <div id="nav_body">
                    <ul class="style3">
                        <li><a href="">Пункт1</a></li>
                        <li><a href="">Пункт2</a></li>
                        <li><a href="">Пункт3</a></li>
                    </ul>
                </div>
                <div id="nav_footer"></div>
            <h3>ПОПУЛЯРНОЕ</h3>
                <div id="nav_body" class="style3">ПУНКТ</div>
                <div id="nav_footer"></div>

Так вот, между блоками у меня задан промежуток в 5 пикселей. IE к этим 5 пикселям, вроде, прибаляет 4 пикселя высоты картинки. Когда я убирал фоновую картинку, то в IE расстояния как раз оставалось в 5px. Помогите, пожалуйста, сделать, чтобы и в IE отображалось нормально. СПАСИБО!

bars80080

Дата 22.4.2008, 17:28 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

наконец, допёр:

Код

<style>
* { margin: 0px; padding: 0px; }
#nav_body{text-align:left; padding:5px 8px 5px 8px; background: #ffff99; /* url(zzz.jpg) repeat-y;*/ }
div.nav_footer{ height: 4px; font-size: 1px; margin-bottom:5px; background: #ff9999; /*url(zzz.jpg) no-repeat;*/ line-height: 0px; }
#nav_letters{text-align: center; /*padding:10px 0 10px 0;*/ background:url(zzz.jpg);}

ul{padding-left:7px; width:159px; list-style:none;}
li{padding-left:15px; text-align:left; background:url(zzz.jpg) no-repeat 0;}

h2, h3, h4, h5 {line-height:35px; color:#FFFFFF; font-size: 13px; text-align:center; font-weight:bold; background:url(zzz.jpg) no-repeat;}

.style3 {color: #555555; font-size: 11px; font-family: tahoma;}
.style4 { text-align:left; padding:5px 8px 5px 8px; background: #ffff99; color: #555555; font-size: 11px; font-family: tahoma;}
</style>
<h2>НАВИГАЦИЯ</h2>
                <div id="nav_body">
                    <ul class="style3">
                        <li><a href="#">Пункт1</a></li>
                        <li><a href="#">Пункт2</a></li>
                        <li><a href="#">Пункт3</a></li>
                    </ul>
                </div>
                <div class="nav_footer"></div>
                <h3>ПОПУЛЯРНОЕ</h3>
                <div class="style4">ПУНКТ</div>
                <div class="nav_footer"></div>

вставил это font-size: 1px; для nav_footer
кое-где переназначил классы вместо id, идентификатор может быть только уникальным

Georgich

Дата 22.4.2008, 20:27 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 20.1.2008

Репутация: нет
Всего: нет

bars80080, пасиб большое. Я сделал как ты показал из идентификатора класс и добавил font-size: 1px; для nav_footer. Все нормуль отображается. Спасибо!

Georgich

Дата 23.4.2008, 19:48 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 20.1.2008

Репутация: нет
Всего: нет

Появился еще такой вопрос. Выкладываю два скриншота (из IE и FireFox). В FF в блоке информация отображается с отступами, а в IE прилепает к границам. В этом вы можете убедиться, кликнув по скринам.
Скрин IE http://ipicture.ru/uploads/080423/4NqjH9n3Hv.png
Скрин FF http://ipicture.ru/uploads/080423/4UO7UUTW12.png
В IE отображается так, потому что в CSS у меня указано:

Код

* {margin:0; padding:0;}

Вот код этого блока с информацией:

Код

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom:5px;">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td height="35" width="3" align="left" valign="top" background="{THEME}/images/ket_4_l.gif"><img src="{THEME}/images/ket_4_l.gif" width="3" height="35"></td>
        <td height="35" width="100%" align="left" valign="top" background="{THEME}/images/ket_4.gif" class="style9">{title}</td>
        <td height="35" width="3" align="right" valign="top" background="{THEME}/images/ket_4_r.gif"><img src="{THEME}/images/ket_4_r.gif" width="3" height="35"></td>
    </tr>
                      <tr>
                        <td colspan="3" height="100%" valign="top" style="background:url({THEME}/images/rep_2.gif);">
                          <table width="100%" border="0" cellpadding="0" cellspacing="0" style="padding:10px;">
                            <tr>
                              <td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td colspan="2" width="100%" height="7" class="style3" style="padding-bottom:10px;">Категория: {approve} {link-category}</td>
                                                </tr>
                                  <tr>
                                    <td colspan="2" width="100%" height="7" class="hr_line"></td>
                                                </tr>
                                  <tr align="left" valign="top">
                                    <td colspan="2" class="style3" style="text-align:justify">{short-story}</td>
                                  </tr>
                                  <tr>
                                    <td colspan="2" width="100%" height="7" class="hr_line"></td>
                                  </tr>
                                  <tr>
                                    <td class="style3" style="text-align:leftt; padding-top:10px;">{rating}</td>
                                    <td width="100%" class="style3" style="text-align:right; padding-top:10px;">[edit]<img src="{THEME}/images/edit.png" title = "Редактировать новость" border="0">[/edit] {favorites} автор: <b>{author}</b> | {date} | [com-link]Комментарии ({comments-num})[/com-link]</td>
                                  </tr>
                                  <tr>
                                    <td colspan="2" width="100%" class="style3" style="text-align:right;">[full-link]Подробнее[/full-link]</td>
                                  </tr>
                              </table></td>
                            </tr>
                          </table>
                          </td>
                      </tr>
    <tr>
        <td height="4" align="left" valign="top" background="{THEME}/images/bot_4_l.gif"></td>
        <td height="4" align="left" valign="top" background="{THEME}/images/bot_4.gif"></td>
        <td height="4" align="right" valign="top" background="{THEME}/images/bot_4_r.gif"></td>
    </tr>
</table>

</td>
</tr>
</table>

Что требуется добавить или изменить, чтобы в IE тоже были нормальные отступы, как в FF? Спасибо!

bars80080

Дата 24.4.2008, 09:00 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

если нужно что-то добавить исключительно для ИЕ, то можно воспользоваться конструкцией * html
,т.е., к примеру мы хотим только в ИЕ для блока с id="menu" добавить отступ сверху, тогда пишем:

Код

* html #menu { margin-top: 4px; }

Georgich

Дата 24.4.2008, 18:00 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 20.1.2008

Репутация: нет
Всего: нет

bars80080, но у меня там конструкция этого блока с контентом в виде таблицы, код которой указан выше. Это я под DataLife верстаю. Вот что надо в коде с таблицами добавить, точнее добавить надо padding, но в какое место?
СПАСИБО!

bars80080

Дата 24.4.2008, 18:06 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

не знаю, как там с вашими прогами, но неужели нельзя перед таблицей (всем этим блоком, который в ИЕ не сдвигается вниз), вставить:

Код

<style>* html #id_block { margin-top: 4px; }</style>

но это, если тебе можно вставлять атрибут id="id_block" для этого элемента, если нельзя, то это жесть какая-то

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »