Показано с 1 по 4 из 4

Тема: Неработает overflow:hidden; в ИЕ7

  1. #1

    Регистрация
    14.04.2007
    Сообщений
    136
    Есть у меня немножко сложная раскладка. Раскладка в три колонки резина - фикс - резина. и в боковых колонках еще есть по колонке, спозиционированные по центру. Т.е. получается три колонки фикса, но левая колонка по центру от левой границы страницы и левой границы центральной колонки, а правая от правой границы центр. колонки и правой гранциы страницы. Вобщем, нужно мне все три колонки выровнять по высоте. Выровнял я их с помощью удлинения паддинга вниз. Вродь все норм. В фф то что нада. В ие6 применил пару хаков. Продублировал их в ие7 (хаки связаны с тем, что в ие не хотелась удлиннятся центральная колонка, поэтому левый ее бордер я назначил левой колонке (как правый бордер)).
    Так вот в ие6 все нормально. но вот в ие7 родитель не режет эти удлинения в низ. и получается мегодлинная страница. Я родителю уже и ширину, и мин-высоту устанавливал, что я только не пробовал. Ничего. Как заставить все же обрезать блок в ие7. Вот пример страницы - [Только зарегистрированные пользователи могут видеть ссылки. ].

  2. #2

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Сколько уже твердил, что метод длинных маргинов-паддингов – [Только зарегистрированные пользователи могут видеть ссылки. ], всё без толку... Как об стенку горох...

  3. #3

    Регистрация
    14.04.2007
    Сообщений
    136
    я знаю, но какие вы тут видите альтернативные решения? я лично не вижу. Метод ложных колонок не подойдет, ибо не к чему и некуда цеплять. Можно к outer1 или outer2 прицепить фон, но они не будут согласованы с центральной колонкой, ибо идут как бы отдельно. А у общего родителя невозможно будет спозиционировать фон правильно. Как мне тут поумнее поступить.

    З.Ы. Я только учусь

    Код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
    <head>
    ****<title>Мой сайт: </title>
    ****<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="script_2.js"></script>
    <style>
    * {margin: 0px; padding: 0px;}
    html {height:100%;}
    body {width:100%;min-height:100%;min-width:999px;background:#000;}
    img {border:none}
    
    #top {height:150px;background:url(&#39;../images/logo.gif&#39;) 50% 50% no-repeat;}
    #main {width:100%;overflow:hidden;} 
    #outer1 {width: 100%; margin-left: -100%; float: right;}
    #outer2 {margin-left: 500px;background:url(&#39;../images/gray_line.gif&#39;) 50% top repeat-x;}
    #left_parent {width: 50%; float: left; position: relative; left: -500px;}
    #right_parent {width:50%;margin-left:-1px;float:right;background:#0e0e0e;position:relative;padding-bottom:32768px;margin-bottom:-32768px;}
    #left {width:200px;margin:0 auto;padding-top:10px;}
    #right{width:300px;margin:0 auto;background:#0e0e0e;width:200px;color:#fff;padding-top:20px;}
    #right p {color:#e2cf00;font:bold 10pt MyriadPro,Tahoma,sans-serif;margin:0 auto 160px;width:150px;text-align:center;}
    #center {width:500px;border-left:solid 15px #0e0e0e;border-top:solid 15px #0e0e0e;margin:0 auto -32768px;padding:10px 10px 32768px 10px;}
    * html body {height:100%;}
    * html #center {border-left:none;}
    * html #left_parent {width:47%;border-right:15px solid #0e0e0e;padding-bottom:32768px;margin-bottom:-32768px;}
    *:first-child+html #center {border-left:none;}
    *:first-child+html #left_parent {width:47%;border-right:15px solid #0e0e0e;padding-bottom:32768px;margin-bottom:-32768px;}
    </style>
    </head>
    <body>
    <div id="top"></div>
    <div id="main">
    <div id="content">
    
    <div id="outer1">
     <div id="outer2">
     *<div id="left_parent">
    ****<div id="left">
    
    ****</div>
     *</div>
    
     *<div id="right_parent">
    ****<div id="right">
    
    
    ****</div>
     *</div>
    
     </div>
    </div>
    ****<div id="center">
     
    
    ****</div>
    </div>
    </div>
    
    </body>
    </html>
    З.Ы.Ы. Колонки резина-фикс-резина по вашему методу.
    А такое нада сделать - левая колонка - без фона(фон родителя), в центральной колонке слева бордер определенного цвета до конца страницы, еще border-top от центральной колонки до правой, а правую залить определенным цветом. Но нужно, чтобы это все шло до конца страницы. Ничего другого, кроме "гавна редкостного" не пришло в голову. Каюсь..Буду очень благодарен, если наставите на путь истинный..

    В атаче рисунок. Только нада учесть, что правая и левая колонки фикс - но они должны разместится по средине (левая посредине от левой границы окна и левой границы центральной колонки, правая подобно левой: от правой границы центральной колонки и правой границы страницы). Вы мне посоветовали именно так сделать. Футера нет.

  4. #4

    Регистрация
    14.04.2007
    Сообщений
    136
    Т.к. время с этим проэктом подтягивает, поэтому сделал таблицами. Все заработало. Знаю, ща вы меня зафакаете, но с помощью CSS я так и не смог это все реализовать. Как я не старался. А время идет. Поэтому предлагаю во имя поддерждки гипотезы Aykroyd&#39;а о том, что с помощью CSS можно сделать все, написать решение этой проблемы без таблиц. Будет очень интересно посмотреть..

Похожие темы

  1. Эскизы интерфейса для Hidden Object игры
    от GKuzminova в разделе Разовая работа. Поиск исполнителей.
    Ответов: 0
    Последнее сообщение: 10.02.2012, 21:29
  2. overflow:hidden и ие7
    от KukMan в разделе Вёрстка сайта
    Ответов: 1
    Последнее сообщение: 23.04.2008, 16:38
  3. hidden field
    от Eternity в разделе Веб-программирование
    Ответов: 2
    Последнее сообщение: 29.10.2007, 13:00
  4. object (flash) не реагирует на overflow: hidden
    от Грин в разделе Вёрстка сайта
    Ответов: 17
    Последнее сообщение: 08.10.2007, 01:43
  5. Проблемы скролинга при overflow..
    от formatzz в разделе Вёрстка сайта
    Ответов: 4
    Последнее сообщение: 13.09.2007, 20:58

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •