Плывет DIV на CSS в Internet Explorer младше 7-ой

Koriolan · February 2, 2009

Уважаемые специалисты!

Подскажите в сложившейся ситуации. Верстка шаблона на DIV-ах. Их свойства описаны через CSS.

Основная часть шаблона страницы поделена на три DIV-колонки. Их свойства описаны в #left, #container, #right ( #container - для основного контента). Расположение блоков традиционное. При просмотре во всех браузерах отображение нормальное, кроме Internet Explorer младше 7-ой версии, где #container почему-то сползает под #right , оставляя свободное место. И что еще хуже, текст грубо обрезается справа так, что читать невозможно

Подскажите, как исправить эту проблему. Ради кривенького и старенького IE переписывать шаблон на таблицы нет смысла, кроме того, это потянет массу решаемых, но неприятных технических моментов (шаблон написан для Joomla)

Чтобы долго не расписывать - суть проблемы изображена в прикрепленном рисунке.

Посмотрите этот рисунок

Помогите, кто может! Работу сдавать в ближайшие 1-2 дня

3ABAPKA · February 3, 2009

Как то "не находятся" здесь стили к #left и #right

http://filebox.od.ua/templates/glazed/css/template_css.css

и в самом коде приведенной страницы "не находится" id="left " и id="right"

Если ширина в пикселях то может про border'ы забыл

Koriolan · February 3, 2009

Прошу прощения, что не выложил файл с проблемным кодом. Исправляюсь. Вот файл

Файл с кодом каскадных таблиц

Приведенный Вами образец файла, если не ошибаюсь, из стандартного шаблона. Мой вариант немного иной.

Koriolan · February 4, 2009

Народ! Отзовитесь, ПЛЗ... Застрял я тут...

Scrum · February 4, 2009

начнем с простого примера, осознав его легко можно реализовать задуманное


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title></title>  <style type="text/css">
/*<![CDATA[*/
#left, #right {
  width: 100px;
  height: 150px;
}
#left, #right, #content {
  border: 1px solid gray;
}


#left {
  float: left;
}
#right {
  float: right;
}
#content {
  margin: 0 150px;
  height: 150px;
}


/*]]>*/
</style>
</head>

<body>
    <div id="carrier">
        <div id="left">left</div>
        <div id="right">right</div>
        <div id="content">content</div>
    </div>
</body>

</html>

Koriolan · February 4, 2009

начнем с простого примера, осознав его легко можно реализовать задуманное

Пример ясен. В общих чертах мой вариант мало чем от него отличается. Вот выдержка моего кода касающегося этого же момента:

#left					{width:198px; float:left;}
#right					{width:198px; float:right;}
#content				{background:#fff url(../images/cont-bg.gif) repeat-x 0 0; }
#content .shadow-tl		{background:url(../images/shadow-left-top.gif) no-repeat 0 0}
#content .shadow-tr		{background:url(../images/shadow-right-top.gif) no-repeat right 0; width:100%; overflow:hidden}
#content .shadow-r		{background:url(../images/shadow-right.gif) repeat-y right 0}
#content .shadow-l		{background:url(../images/shadow-left.gif) repeat-y 0 0}

#content .space			{padding:34px 25px 20px 32px;}

#container				{margin:0px 230px 0px 233px;}
#container2				{margin:0px 0px 0px 223px;}

Разница лишь в том, что в Вашем примере за центральную часть отвечает #content а у меня - #container. Если из моего куска убрать все "лирические отступления" в виде фонов и отсутпов, то оставшийся скелет будет мало чем отличаться от приведенного Вами. Тем не менее, Internet Explorer 6 относится к моему варианту, мягко говоря, предвзято

Scrum · February 4, 2009

#content .shadow-tr		{background:url(../images/shadow-right-top.gif) no-repeat right 0; width:100%; overflow:hidden}

обращаем внимание на width: 100%; - возможно в этом проблема.

Koriolan · February 4, 2009

обращаем внимание на width: 100%; - возможно в этом проблема.

Сомневаюсь по нескольким причинам:

1) Если бы это значение мешало корректному отображению, то тогда средняя колонка разворачивалась на всю ширину браузера, игнорируя колоночную верстку. У меня же идет отображение на среднюю и последнюю секции. Дело в том, что содержимое left немного больше чем right. Его система видит (приведенный в первом посте рисунок это как раз отображает).

2) Если это значение, то почему оно играет такую печальную роль только для одной версии браузера, а не всей его линейки (в IE7 - все просто до слез красиво и правильно.

В любом случае, буду пробовать убрать это значение, но... Словом, поглядим.

3ABAPKA · February 5, 2009

До сих пор плывет?

Koriolan · February 5, 2009

Увы! Да. Плывет по-прежнему. Когда убираю это значение совсем, в IE 6 текст расползается на всю страницу, но обрезка строк, естественно, уже не происходит. В IE 7 - все отображается нормально, как и ранее.

Если пытаюсь уменьшить это значение - в IE 6 блок располагается вроде бы нормально, но обрезка по-прежнему действует. В IE 7 начинает расползаться верстка. Короче говоря, бред полный.

3ABAPKA · February 6, 2009

http://www.dynamicdrive.com/style/layouts/...id-fluid-fluid/Здесь то что тебе надо. Возми стили, и наверное html лучше поправить. Обрати внимание что верстка резиновая, но сделать две крайние колонки фиксированными просто. Код там внизу. Надо просто скопировать. Edited February 6, 2009 by 3ABAPKA

Searcher · February 6, 2009

есть еще возможная причина проблемы - 3-х пиксельный баг в IE6

Koriolan · February 10, 2009

Спасибо огромное, всем, кто помогал. Проблему решил. все дело было в 3-х пикселах, о которых писал Searcher - об этом я как раз и не знал. :blink: Еще раз всем спасибо.

Sign In

Плывет DIV на CSS в Internet Explorer младше 7-ой

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information