Проблемы в IE

[zmok]

Здравствуйте. У меня несколько проблем с отображением содержимого сайта в разных броузерах...

Вот так это должно выглядеть и выглядит в Firefox:

Так это выглядит в ИЕ6:

Так в ИЕ7 при отключенном баннере (при включенном вс? нормально):

А в Опере вообще баннер не отображается..

Теперь коды.

HTML код верхней части страницы:

<div id="header">
<div class="banner"> <table cellpadding="0" cellspacing="0" class="moduletable">
 <tr>
 <td>
 <a href="http://site.ru/component/option,com_banners/task,click/bid,2/" target="_blank"><img src="http://site.ru/images/banners/banner_tt.gif" border="0" alt="Advertisement" /></a> </td>

 </tr>
 </table>
 </div> 
<div class="moduletable_tm_top_menu">
 <ul id="mainlevel-naw"><li><a href="http://site.ru/" class="mainlevel-naw" >Главная</a></li><li><a href="http://site.ru/content/blogsection/4/41/" class="mainlevel-naw" >Диеты</a></li><li><a href="http://site.ru/content/blogsection/5/42/" class="mainlevel-naw" >Фитнес</a></li><li><a href="http://site.ru/content/blogsection/2/43/" class="mainlevel-naw" >Статьи</a></li></ul> </div>

</div>

CSS-код этих тэгов:

/*————————————————header——————--*/
#header{
 background:url(../images/header.jpg) 0 0 no-repeat;
 width:986px;
 height:210px;
 margin:0 auto;
 position:relative;
}
#header img{
 position:absolute;
 left:0px;
 top:0px;
 width:468px;
 height:60px;
}
#header h1{
 display:block;
 background:url(../images/slogan.gif) 0 0 no-repeat;
 width:760px;
 height:50px;
 padding:0;
 position:absolute;
 left:43px;
 top:189px;
 text-indent:-10000px;
}
#header p{
 font:normal 12px Arial, Helvetica, sans-serif;
 color:#DCDCDC;
 background-color:inherit;
 position:absolute;
 left:279px;
 top:20px;
}
/*————————————————header——————--*/

/*———————————————TOP_MENU————————————-*/
.moduletable_tm_top_menu div {position: relative; top: 170px; text-align: center;}
ul#mainlevel-naw {position: relative; top: 170px; left: auto; right: auto;}
ul#mainlevel-naw li {width:122px; float:left; list-style:none; height:38px; text-align:center; vertical-align:middle}
ul#mainlevel-naw li a {color:#FFFFFF; font-size:14px; font-weight:bold; text-decoration:none; background:url(../images/menu_item_bg.gif) no-repeat 0 0; display:list-item; height:28px; padding:10px 0px 0px 0px;}
ul#mainlevel-naw li a:hover {text-decoration:none; color:#000000; font-size:14px; font-weight:bold; background:url(../images/menu_item_active_bg.gif) no-repeat 0 0; display:block; height:28px; padding:6px 0px 4px 0px;}


.sublevel {font-size:12px;}

.banner {position: relative; top: 162px;left:518px; text-align: center; width: 468px; hight:60px;}

Очень нуждаюсь в помощи и надеюсь, что кто-нибуть поможет. Отплачу чем смогу.

[homm]

Хочется спросить, знаешь ли ты значение свойства ?position: relative;?? Если нет, то чего лепишь?

[zmok]

без этого свойства горизонтальное меню (moduletable_tm_top_menu div) не хотело вставать под картинкой-логотипом, а вс? время стояло в самом левом верхнем углу и заслоняло собою надпись "Ваша первая диета"

[homm]

  zmok said:

без этого свойства горизонтальное меню (moduletable_tm_top_menu div) не хотело вставать под картинкой-логотипом, а вс? время стояло в самом левом верхнем углу и заслоняло собою надпись "Ваша первая диета"

Т.е. смыла не понимаешь, но без него просто не работало? Ну-ну.

[zmok]

Не понимаю, но мне помог человек, который вроде бы понимает.

А ты можешь мне помочь?

[homm]

  zmok said:

Не понимаю, но мне помог человек, который вроде бы понимает.

А ты можешь мне помочь?

Конечно, держи.

http://htmlbook.ru/css/position.html

[zmok]

Гм. И почему ты так обратил внимание на это свойство? Горизонтальное, верхнее меню размещалось в самом верху слева, как и сейчас в ИЕ6 (скрин в первом посте), мы подсунули его с помощью relative куда надо... Это и создало проблему? Ие не поддерживает это свойство? Как тогда разместить меню в нужном месте, если оно ни в какую не хочет туда вставать? Ни margin, ни padding на него не действуют.

[homm]

> Ни margin, ни padding на него не действуют.

Сказки не рассказывай.

relative отсчитывается от совеобразного внутреннего курсора вывода, если вокург position: absolute, ли float, то одному Богу известно где этот курсор окажется, что и видно на скриншоте с оперы.

[klierik]

я б вам рекомендовал просто верхний рисунок Нарезать на части и всунуть в таблицу по ячейкам! (или дивами)

а все остальное сделать как следующий элемент разметки.

[zmok]

homm, понятно... Но и вправду ни с помощью margin, ни с помощью padding ни мне, ни моему товарищу так и не удалось сдвинуть меню ни на пиксель.

Чем это может быть вызвано?

[klierik]

  Quote

Чем это может быть вызвано?

с плохой практикой и незнанием языка разметки!

то как это реализовано у Вас свидетельствует только то, что Вы и Ваш друг владеете начальным уровнем.

я Вам уже подсказал как решить данную проблему довольно быстро, легко и , имхо, правильно!

Совсем не обязательно фиксить существующие грабли, ежели можно переделать правильно!