Проблема с шапкой в ИЕ

[vidocue]

Проблема того что шапка состоит из трех кусков, и не коректно отображается в Интернет эксплорере когда в опере все отлично. (tile_back.gif - середина, 7_logo4.gif - левая часть, logo6.gif - правая часть)

Это то чт оу меня в CSS:

#logostrip
{
background: #282F33 url(style_images/[blue]soft/tile_back.gif) repeat-x top left;
height: auto;
margin: 0;
padding: 0;
}

#logographic
{
background: transparent url(style_images/[blue]soft/logo4.gif) no-repeat top center;
height: auto;
margin: 0;
padding: 0;
}

Это global_board_header:

<div id="logostrip"><div style="float:right;padding:0px"><a href='index.php'><!--ipb.logo.start--><img src='style_images/logo6.gif' alt='IPB' style='vertical-align:top' border='0' /><!--ipb.logo.end--></a></div><div style="width: 100%; background: url(style_images/<#IMG_DIR#>/logo_l_t.gif) no-repeat top left;"><div style="width: 100%; background: url(style_images/<#IMG_DIR#>/logo_r_t.gif) no-repeat top right;"><a href='{$this->ipsclass->base_url}'><!--ipb.logo.start--><img src='style_images/7_logo4.gif' alt='IPB' style='vertical-align:top' border='0' /><!--ipb.logo.end--></a></div></div></div>

 

Вот так выглядит в Опере:

И следующий рисунок как в ИЕ:

 

И еще хотелось бы узнать возможно ли к этой конструкции применить масштабирование ,чтобы при различном разрешении шапка форума не диформировалась.

[vidocue]

Переписал полностью код в global_board_header, вот как:

<Table border=0 width=100%  height=100% id="logostrip" cellpadding=0 cellspacing=0>
<Tr >
<td ><a href="index.php"><img src='style_images/7_logo4.gif'  ></a></td>
<td></td>
<td align="right"><img src='style_images/logo6.gif'  ></td>
</Tr>
</Table>

Положение улучшилось но всеравно internet explorer отображает не верно, думаю проблема в отображении координат в разных браузерах скрин с ЕИ прилагаю:

http://cs230.vkontakte.ru/u2057387/24006908/x_c5d874f2.jpg

[Sarmano]

Поддержка разных браузеров divs и таблиц действительно разная, но сделать совместимый вариант возможно.

 

Например для таблицы можно перезабить вот так:

 

<Table border=0 width=100% height=100% id="logostrip" cellpadding=0 cellspacing=0>
<Tr >
<td style="background: transparent url(style_images/7_logo4.gif) top left no-repeat;"><a href="index.php"><img src='style_images/dot.gif'  height=xx width=xx></a></td>
<td></td>
<td style="background: transparent url(style_images/logo6.gif) top right no-repeat;"><img src='style_images/dot.gif' height=xx width=xx></td>
</Tr>
</Table>

 

где dot.gif можно вот такой взять - http://www.smk-minds.ru/portal/downloads/blank_dot.rar

также если logo6.gif и 7_logo4.gif служили ссылками, необходимо задать им их родные размеры распорок приминительно к dot.gif height=xx width=xx.

 

 

Для дивов будет и прпоще и посложнее .

Например, опция float:left/right, работает как раз на сдвиг и отображается у всех по-разному.

Можно попробовать указывать не только внутренний отступ краев (padding) но и внешний (margin), например

<div style="float:right;padding:0;margin:0;">

Но это не решит полностью проблему.

 

Самое простое использовать распорки и в дивах, также как в таблицах но с подбором размеров, а сами рисунки или бэкграунды прятать в стиль и указанием их расположения и варианта отображения, например:

<div id="logostrip">
<div style="float:right;padding:0;margin:0;background: url(style_images/logo6.gif) no-repeat top right;">
	<a href='index.php'><!--ipb.logo.start--><img src='style_images/dot.gif' height=xx width=xx alt='IPB' border='0' /><!--ipb.logo.end--></a>
</div>
<div style="width: 100%; background: url(style_images/<#IMG_DIR#>/logo_l_t.gif) no-repeat top left;">
	<div style="width: 100%; background: url(style_images/<#IMG_DIR#>/logo_r_t.gif) no-repeat top right;">
		<a href='{$this->ipsclass->base_url}'><!--ipb.logo.start--><img src='style_images/7_logo4.gif' alt='IPB' style='vertical-align:top' border='0' /><!--ipb.logo.end--></a>
	</div>
</div>
</div>

 

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