Ох уж этот IE

ramilkin · November 21, 2008

Есть бокс с закругленными уголками.

Внутри:

* в него вставил менюшку

* под ней контент.

Проблема : в ФФ все сидит в боксе. А в ИЕ контент вылазит за его пределы.

Где собака зарыта ?

<style>
div.cleaner { 
	height: 0px;
	clear: both;
	overflow: hidden;
}
.mainnews-l{
	float: left;
	width: 42%;
}
.mainnews-r{
	float: right;
	width: 55%;
}
.news-corpse {
	margin-top: 15px;
}
.news-corpse p {
	margin: 5px 0 0 0;
	padding: 0;
}
.news-corpse img {
	float: left;
	margin: 0 1% 0 0;
}
.news-corpse small{
	font-size: 82%;
	margin-left: 5px;
	white-space: nowrap;
}
.news-corpse img {
	padding: 2px;
	border:none;
	}
/* ——————————————- box1 */
.box1 {
     background-color: #FFFFFF;
     border: 1px solid #D7D8C8;
     position: relative;
     margin: 0 0 5px 0;
}
.box1 .box1hr,
.box1 .box1hr div,
.box1 .box1-top,
.box1 .box1-bot,
.box1 .box1-top div,
.box1 .box1-bot div {
     line-height: 9px;
     font-size: 0;
     height: 9px;
     position: relative;
}
.box1 .box1-top,
.box1 .box1-bot,
.box1 .box1-top div,
.box1 .box1-bot div {
     background: url(/bitrix/templates/new/images/box1.gif) no-repeat left top;
}
.box1 .box1-top{
     left: -1px;
     top: -1px;
}
.box1 .box1-bot{
     background-position: 0 -9px;
     left: -1px;
     top: 1px;
}
.box1 .box1-top div{
     background-position: 100% -18px;
     left: 2px;
}
.box1 .box1-bot div{
     background-position: 100% -27px;
     left: 2px;
}
.box1 .box1hr,
.box1 .box1hr div {
	height: 14px;
	background: url(/bitrix/templates/new/images/box1_hr_l.gif) no-repeat left top;
	left: -1px;
}
.box1 .box1hr div {
	background: url(/bitrix/templates/new/images/box1_hr_r.gif) no-repeat right top;
	left: 2px;
}
.box1 .box1-content{
     padding: 0 10px;
     overflow: hidden;}
#underlinemenu{
margin: 0;
padding: 0;
}
#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-left: 0;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 0px 0px 1px 0px;
}
* html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/
margin-bottom: 0;
}
#underlinemenu ul li{
display: inline;
}
#underlinemenu ul li a{
line-height: 1.5;
color: #486daa;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
margin-right: 10px;
}

#underlinemenu ul li a:hover{
color: black;
background-color: #FFFFFF;
border-bottom: 4px solid #486daa;
padding-bottom: 0;
}
#underlinemenu ul .current a{
color: black;
background-color: #FFFFFF;
border-bottom: 4px solid #486daa;
padding-bottom: 0;
}
</style>
<div class="box1" id="news">
     <div class="box1-top"><div><!-- --></div></div>
                  <div class="box1-content">
<div id="underlinemenu">
<ul>
<li id="1" class="current"><a href="index.php?show=svodka" title="Сводка новостей">Сводка новостей</a></li>
<li id="2" ><a href="index.php?show=gorod" title="Город">Город</a></li>
<li id="3" ><a href="index.php?show=avto" title="Авто">Авто</a></li>
<li id="4" ><a href="index.php?show=sport" title="Спорт">Спорт</a></li>
<li id="5" ><a href="index.php?show=soft" title="Софт">Софт</a></li>     
<li id="6" ><a href="index.php?show=hitech" title="Hi-tech">Hi-tech</a></li>
<span style="font-style: italic;" id="ajax_result_wait"></span>
</ul>
</div>

<div>
<div class="shadow_block" id="ajax_result">   
    	<div class="mainnews-l">
      <div class="news-corpse">
<img class="preview_picture" title="В финале Кубка России «Динамо-ТТГ» сразится с московскими одноклубниками"/>
<FONT class="grey_date">26.12.2007 16:33:08</font><br>
<b><a href="/news/mnews/6593/">В финале Кубка России «Динамо-ТТГ» сразится с московскими одноклубниками</a></b><br>
(Казань, 26 декабря, «Татар-информ», Михаил Миронов). Соперником казанского «Динамо-ТТГ» в финале Кубка России по волейболу станет «Динамо» столичное. Сегодня во втором полуфинале серебряные призеры чемпионата страны обыграли обладателей бронзовых наград – одинцовскую «Искру» - со счетом 3:0.Таким образом, ...</div>
	<div class="cleaner"><!-- --></div>
                        </div>
<div class="mainnews-r">
      <div class="news-corpse">
<font class=grey_date>26.12.2007 16:32:54</font>
<br>
<a href="/news/mnews/6594/">«Ак Барс» достойно «отомстил» «Амуру» за поражение на старте сезона</a>                     
     </div><div class="cleaner"><!-- --></div>
     <div class="news-corpse">
<font class=grey_date>26.12.2007 12:40:58</font>
<br>
<a href="/news/mnews/6595/">ТOP-10 значимых событий в российской и мировой культуре уходящего года</a>                     
     </div><div class="cleaner"><!-- --></div>
     <div class="news-corpse">
<font class=grey_date>26.12.2007 12:10:27</font>
<br>
<a href="/news/mnews/6596/">Новогодние каникулы елабужской детворы будут насыщенными</a>                     

                 </div><div class="cleaner"><!-- --></div>
  </div></div> </div>
 </div>
</div>

<div class="box1-bot"><div><!-- --></div></div>
</div>

XAOPT · November 21, 2008

Скрины. По коду глюк не выцепляется

ramilkin · November 21, 2008

в принципе если вставить в дримвивер и там глянуть в ИЕ и ФФ сразу видно.

А так вот скрины.

это ФФ, в сером "бордюре"

это ИЕ, видно бордюр не на своем месте.

XAOPT · November 21, 2008

Вот теперь понятно)

добавьте строчку

.box1-content {display: inline-block;}

ramilkin · November 21, 2008

Помогло но, проблема стала иной.

Респект тебе и уважуха добрый человек.

Edited November 21, 2008 by ramilkin

ramilkin · November 21, 2008

Проблема снялась появилась иная.

в ФФ2 все отлично, но в ФФ3 линия ползущая под меню исчезает(как бы зависит от заполнения контента)

Вот скринчик.

А глянуть на место действия можно на

www.tatregion.ru (надеюсь не запрещено писать тут )

на вкладке например Спорт и Город именно такой дефект.

Да и в других боксиках видно это.

В ИЕ и опере все нормально

XAOPT · November 21, 2008

Вы говорите о том, что синяя чёрточка перекрывает серую полосу или? не совсем ясно

ramilkin · November 21, 2008

Вот скринчик как желаемо.Так показывает в ИЕ и в Опере и в ФФ2

А вот в ФФ3 нетак ((

т.е. не просто не дорисовывает линию до конца но и контент сдвигает.

XAOPT · November 21, 2008

Навскидку:

.box1-content {width: 100%;}

Ещё сейчас посмотрю

+вот это

overflow:visible;

только убедитесь, что свойство overflow уже не задано явно в вашем стиле как hidden (тогда нужно поменять hidden на visible). Если не задано, то пишите прямо всю строку что я дал.

Будут вопросы - пишите)

ПС: и ещё замечание))) лучше 95%, а не 100 сделать.. а то выходить за рамки будет.. не уверен, попробуйте

Edited November 21, 2008 by XAOPT

fatrus · November 21, 2008

Вот скринчик как желаемо.Так показывает в ИЕ и в Опере и в ФФ2
А вот в ФФ3 нетак ((
т.е. не просто не дорисовывает линию до конца но и контент сдвигает.

Попробовали подставить

.box1-content{

padding: 0 10px;

overflow: visible;

display: inline-block;

width: 98%;

}

Поставили overflow: visible; и width: 98%; ФФ3 стал отображать как надо, но в ФФ2 произошло следующее:

ИЕ и Опера все нормально.

Edited November 21, 2008 by fatrus

XAOPT · November 21, 2008

Ну мне уже лень ставить вторую лисицу, чтобы тестить, извините))

Предлагаю забить на устаревший БЕСПЛАТНЫЙ софт.

Edited November 21, 2008 by XAOPT

ramilkin · November 21, 2008

Ну мне уже лень ставить вторую лисицу, чтобы тестить, извините))
Предлагаю забить на устаревший БЕСПЛАТНЫЙ софт.

Подскажи плиз как можно подставлять значения в зависимости браузера пользователя.

тоесть если ФФ3 то {значение без глюков};

ФФ2 то другое {значение без глюков}

Если такое осуществимо то думаю проблема снимется

XAOPT · November 21, 2008

Определить navigator.userAgent с помощью JS

Тройка определяется как Gecko. Равно как и Chrome, кстати..

Edited November 21, 2008 by XAOPT

XAOPT · November 21, 2008

О! вот здесь виднее лучше чем с моих слов:

http://www.webreference.com/tools/browser/javascript.html

выковырнете скрипты, если очень надо)

ramilkin · November 21, 2008

Я и так и сяк...не пойму...

1 вариант - в ие фф2 пашет фф3 не пашет

2 вариант - в ие фф3 пашет фф2 не пашет

Натыкаюсь на то,что надо копать и искать где собака зарылась

Поддыкать значения только ради фф2 и фф3 - думаю не правильно.

Где то ошибка(((((

Но гдееееее.......

XAOPT · November 21, 2008

Я в таких случаях прибегаю к плану бэ: меняю непосредственно хтмл код вместе со стилями. Применяя менее конфликтные элементы и стили. Иначе можно весь день угробить на адаптацию под всякий броузерный мусор, типа ие6, фф2 и оперы.

ramilkin · November 21, 2008

Проблема решилась....просто ставить display: inline-block; это надо было на див что после менюшки.

Все сразу заработало.

Глубокий с облегчением выдох. уффффффф.

Спс.

Sign In

Ох уж этот IE

Question

Link to comment

Share on other sites

16 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

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