Xpoint
   [напомнить пароль]

курсивный текст растягивает блок в ИЕ

Метки: [без меток]
2007-07-18 16:19:40 [обр] Crazy Spirit[досье]
сообщение промодерировано

Суть вот в чем: есть три колонки, боковые (сайдбары) фиксированные по 275px с бэкграундами, а в центре текст. И вот когда этот текст делается курсивом (italic) то ИЕ раздвигает параграф на 2(3) пиксела и правый сайдбар падает в низ, под col_center. Глюк только в ИЕ! тестировал только на ИЕ6.

HTML:

<div id="outer_wrapper">
 <div id="wrapper">
  <div id="container">
   <div id="content">
<div id="col_left">
   <div class="sidebar_name">текст</div>
</div> 

<div id="col_center">
<p>Текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст,</p>
</div>

      </div>
    </div>

<div id="col_right">ТЕКСТ</div>   
   
</div> 
    <div class="clearing">&nbsp;</div>
  </div>
</div>

CSS:

body{margin:0; padding:0}

#outer_wrapper{background:#dfdfdf url(img/bg_sidebar_left.gif) repeat-y left}
#wrapper{background:url(img/bg_sidebar_right.gif) repeat-y right}
#container{width:100%; float:left; margin-right:-275px; background:url(img/bg_sidebar_right.gif) repeat-y right}
#content{margin-right:285px; background:url(img/bg_sidebar_left.gif) repeat-y left}

#col_center{margin-left:285px}
#col_left{width:275px; float:left}
#col_right{width:275px; float:right}

.clearing {height:0; clear:both}

#col_center p.{font:italic bold 12px 'Times New Roman', Times, serif; margin:17px 0}
спустя 10 минут [обр] Денис(0/2)[досье]
хм..
на вскидку прикинул такое правило для #col_center p {width:99.9%;}
и еще а зачем точка после p??
спустя 35 секунд [обр] Евгений Петров(76/1055)[досье]
А боковой padding для #col_center не помогает?
спустя 15 минут [обр] Crazy Spirit[досье]

Денису:
#col_center p {width:99.9%;} не помогает; а точка после p потому что я вырезал код из готового проекта, а там p был с класом (именно тем на который стоит курсив) (глюк) :)

Поправка! После p - нету точки! (в CSS)

спустя 2 минуты [обр] Евгений Петров(76/1055)[досье]
Crazy Spirit[досье] есть еще вариант (каюсь, не проверял сам)
#col_center{margin-right:-20px;}
спустя 9 минут [обр] Crazy Spirit[досье]

 Евгений Петров: А боковой padding для #col_center не помогает?
 Нет, не получается.

Поправка! Бэкграунды, на сайдбарах, перекрывать нельзя.

#col_center{margin-right:-20px;} (не проверял сам - ничего, наоборот я сам подставлю в готовый проект и проверю)

спустя 1 минуту [обр] Евгений Петров(76/1055)[досье]
Про готовый проект - это ирония?:)
спустя 6 минут [обр] Lynn «Кофеман»(37/571)[досье]
спустя 41 секунду [обр] Crazy Spirit[досье]

незнаю как это объяснить, но курсивный текст как бы раздвигает #col_center (только в ИЕ) и потому #col_right получается слишком широким для оставшегося места и он падает в низ. Это видно из фиксированого бэкграунда (он на 275px).

Евгений Петров[досье]
Да... пока да :) Просто табличный дизайн есть а я делаю на CSS.

спустя 23 минуты [обр] Crazy Spirit[досье]
сообщение промодерировано

Lynn «Кофеман»[досье]

Спасиба!
Добавил

* html #col_center{overflow:hidden;   o\verflow:visible; width:100%; w\idth: auto; he\ight: 1%} /* hack for IE*/

И всё ОК!

Powered by POEM™ Engine Copyright © 2002-2005