Капризы IE

[Xelborg]

Здравствуйте!

Есть еще два вопроса.

1.Недавно повесил Flash-анимацию у себя над столбцом меню с параметрами position: absolute. Анимка стоит и функционирует отменно на всех браузерах, а IE образует вокруг нее поля и "раздвигает" дизайн сайта, превращая его в непонятно что. Шапка сдвигается вверх, меню вниз, а правый блок "уползает" далеко вправо. Что с этим можно сделать?

2.Теги. IE предполагает начинать каждый новый тег с новой строки. Так я захотел поставить себе менюшку на верх сайта, которая базируется на повторяющемся <li> для каждого пункта (понятное дело, стили для <li> расписаны в CSS). Все браузеры показывают меню в виде горизонтальной полоски с графическим разделителем, что и планировалось. А IE ставит каждый <li> с новой строки, из-за чего пункты меню начинают находится аж на блоке с контентом. Что посоветуете здесь?

Заранее благодарен.

[SelenIT]

Неплохо бы а) привести ссылку на проблему или хотя бы код проблемных участков со скриншотами, б) указать версию IE (подозреваю, что 7, но хотелось бы точнее) и (на всякий случай) доктайп...

По второй проблеме попробую подключить телепательную машинку — используется inline-block и нечаянно забыт zoom (или подобное лекарство для hasLayout-а)?

[Xelborg]

Извиняюсь за задержку.

Скриншот текущего состояния и где все должно находиться -

Вот полный варианты проблемы :

Код кота и левого навигационного блока.

<div style="position:absolute; top:150px; left:120px;"><script src="http://www.saveprog.com/media/?t=video;w=225;h=120;f=http%3A%2F%2Fwww.saveprog.com%2Fscripts%2Fkitty.swf" type="text/javascript"></script></div>
<!-- <Меню> -->
<table border="0" cellpadding="0" cellspacing="0" class="boxTable"><tr><td class="boxTitle"><b><!-- <bt> --><!--<s5204>-->Меню сайта<!--</s>--><!-- </bt> --></b></td></tr><tr><td class="boxContent"><div class="boxText"><!-- <bc> --><!--<s1546>-->
 <div class="part2"> 
 <a href="ссылка">Главная</a> 
 <a href="ссылка">Мультимедиа</a> 
 <a href="ссылка">Графика и дизайн</a>
 <a href="ссылка">Интернет</a>
 <a href="ссылка">Безопасность</a>
 <a href="ссылка">Работа с текстом</a>
 <a href="ссылка">Система</a>
 <a href="ссылка">Диски и файлы</a>
 <a href="ссылка">F.A.Q</a>
</div>
 <br> 
 <tr><td class="boxEnd"></td></tr>
 </table> 
 <!-- </Меню> -->

Html код шапки сайта

<table border="0" cellpadding="0" cellspacing="0" id="topTable" align="center">
 <tbody><tr><td class="dataBar">$WDAY$, $DATE$, $TIME$ <br><?if($USER_LOGGED_IN$)?><!--<s5200>-->Вы вошли как<!--</s>--> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | <!--<s3167>-->Группа<!--</s>--> "<u>$USER_GROUP$</u>"<?else?><!--<s5212>-->Приветствую Вас<!--</s>--> <b>$USERNAME$</b><?endif?></td></tr>
 <tr><td class="logoBar"><h1><!-- <logo> --><a href="http://www.saveprog.com/"><img src="/logo.png" border="0" alt="" /></a><span><!-- </logo> --></span></h1></td></tr>
 <ul id="breadcrumb">
 <li><a href="$HOME_PAGE_LINK$" title="Главная"><img src="/images/home.png" alt="Вернуться на главную страницу www.saveprog.com" class="home" /></a></li> 
 <?if($MODULE_URL$)?><li><a href="$MODULE_URL$" title="$MODULE_NAME$">$MODULE_NAME$</a></li><?endif?>
 <?if($USER_LOGGED_IN$)?><li><a href="$PERSONAL_PAGE_LINK$" title="Ваш профиль">Профиль</a></li><?else?>
 <li><a href="$REGISTER_LINK$" title="Зарегистрироваться на сайте">Регистрация</a></li><?endif?>
 <?if($USER_LOGGED_IN$)?><li><a href="$LOGOUT_LINK$" title="Выход">Выход</a></li><?else?>
 <li><a href="$LOGIN_LINK$" title="Вход на сайт">Вход</a></li><?endif?>
 <?if($RSS_LINK$)?><li><a href="$RSS_LINK$" title="Подписаться на обновления">RSS</a></li><?endif?> 
 <li>www.SaveProg.com</li> 
 </ul>
 </tbody></table>

Необходимый код шапки сайта и навигации (CSS)

#contanier {background:url('/img/back.png') repeat-x #303030;}
#topBlock {background:url('/img/4.png') top center no-repeat;height:190px;}
#topTable {height:190px;width:1000px;margin-left:auto;margin-right:auto;}
.dataBar {height:40px;font-size:7pt;padding:5px;}
.logoBar {height:55px;}
.logoBar h1 {color:#FFFFFF;margin-left:10%;font-size:30pt;}
.navBar {height:20px;text-align:center;}
#centerBlock {background:url('/img/1-2.png') top center repeat #c0c0c0;padding-top:20px;}
.column {width:0px;padding:5px;}
.boxTable {width:220px;margin-bottom:5px;}
.boxTitle {height:38px;background:url('/img/5.gif') no-repeat;color:#FFFFFF;text-align:center;text-shadow: 0px 1px 3px #000;}
*html .boxContent {padding:10px;background:#272727;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;}
*html .boxContent div.boxText {position:relative;opacity:1.0;filter: alpha(opacity=100); -moz-opacity: 1.0;}
.boxContent {padding:10px;background:url('/.s/t/878/6.png');}
.boxContent2 {padding:10px;background:url('/img/6-2.png');}
.boxEnd {height:30px;background:url('/img/downblock.png') no-repeat;color:#FFFFFF;text-align:center;}
#footer {background:url('/img/footer.jpg') repeat-x;}

Код верхнего (графического) меню CSS

#breadcrumb 
{ 
 font: 11px Arial, Helvetica, sans-serif; 
 background-image:url('/images/bc_bg.png'); 
 background-repeat:repeat-x; 
 height:30px; 
 line-height:30px; 
 color:#9b9b9b; 
 border:solid 1px #cacaca; 
 width:99.9%; 
 overflow:hidden; 
 margin:0px; 
 padding:0px; 
} 
#breadcrumb li 
{ 

 list-style-type:none; 
 float:left; 
 padding-left:10px; 
} 
#breadcrumb a 
{ 
 height:30px; 
 display:block; 
 background-image:url('/images/bc_separator.png'); 
 background-repeat:no-repeat; 
 background-position:right; 
 padding-right: 15px; 
 text-decoration: none; 
 color:#454545; 
} 
.home 
{ 

 border:none; 
 margin: 8px 0px; 
} 

#breadcrumb a:hover 
{ 

 color:#35acc5; 
} 
</style>

<style> 

 .hint 
 { 
 background-color:#ffffff; 
 line-height:10px; 
 color:#808080; 
 font-family:verdana,arial,helvetica; 
 font-size:8pt; 
 width:auto; 
 border-top:1px solid #808080; 
 border-right:1px solid #808080; 
 border-bottom:1px solid #808080; 
 border-left:1px solid #808080; 
 margin:1px; 
 padding:8px; 
 position:absolute; 
 visibility:hidden; 
 } 

Что же изменить для IE?

Edited July 7, 2011 by Xelborg