Проблем.. при IE се размества логото

[LuCIFER_DeViL]

Когато отворя сайта с мозила всичко е ОК, но когато го отворя с IE всичко се размества. Логото се състои от 17 картинки ето кода:



<HTML>
<HEAD>
<TITLE>test</TITLE>
</HEAD>
<BODY>
<table align="center" width="847" height="266" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/header_01.png" width="233" height="30" colspan="6" rowspan="2"></td>
<td background="images/header_02.png" width="339" height="100" rowspan="4"></td>
<td background="images/header_03.png" width="274" height="1"></td>
<td background="images/spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td background rowspan="4">
<a href=""><img src="images/header_04.png" width="274" height="199" border="0" alt="" title=""></a></td>
<td background="images/spacer.gif" width="1" height="29"></td>
</tr>
<tr>
<td background="images/header_05.png" width="23" height="235" rowspan="6"></td>
<td background="images/header_06.png" width="210" height="10" colspan="5"></td>
<td background="images/spacer.gif" width="1" height="10"></td>
</tr>
<tr>
<td background="images/header_07.png" width="10" height="197" rowspan="4"></td>
<td background="images/header_08.png" align="center" width="132" height="186" rowspan="3">
<a href="index.php" onMouseOver="but1.src='images/but1h.png'; return true"
onMouseOut="but1.src='images/but1.png'; return true">
<img src="images/but1.png" width="126" height="31" alt="" border="0" name="but1" title=""></a><br><img src="images/sp.png" width="5" height="5">
<a href="index.php" onMouseOver="but2.src='images/but2h.png'; return true"
onMouseOut="but2.src='images/but2.png'; return true">
<img src="images/but2.png" width="126" height="31" alt="" border="0" name="but2" title=""></a><br><img src="images/sp.png" width="5" height="5">
<a href="index.php" onMouseOver="but3.src='images/but3h.png'; return true"
onMouseOut="but3.src='images/but3.png'; return true">
<img src="images/but3.png" width="126" height="31" alt="" border="0" name="but3" title=""></a><br><img src="images/sp.png" width="5" height="5">
<a href="index.php" onMouseOver="but4.src='images/but4h.png'; return true"
onMouseOut="but4.src='images/but4.png'; return true">
<img src="images/but4.png" width="126" height="31" alt="" border="0" name="but4" title=""></a><br><img src="images/sp.png" width="5" height="5">
<a href="index.php" onMouseOver="but5.src='images/but5h.png'; return true"
onMouseOut="but5.src='images/but5.png'; return true">
<img src="images/but5.png" width="126" height="31" alt="" border="0" name="but5" title=""></a>
<br><img src="images/sp.png" width="5" height="5">
</td>
<td background="images/header_09.png" width="11" height="186" rowspan="3"></td>
<td background="images/header_10.png" align="left" width="45" height="186" rowspan="3">
<img src="images/sp.png" width="5" height="5">

<a href="index.php" onMouseOver="arrow1.src='images/sarrowh.png'; return true"
onMouseOut="arrow1.src='images/sarrow.png'; return true">
<img src="images/sarrow.png" width="18" height="31" alt="" border="0" name="arrow1" title=""></a>

<br><img src="images/sp.png" width="5" height="5">

<a href="index.php" onMouseOver="arrow2.src='images/sarrowh.png'; return true"
onMouseOut="arrow2.src='images/sarrow.png'; return true">
<img src="images/sarrow.png" width="18" height="31" alt="" border="0" name="arrow2" title=""></a>

<br><img src="images/sp.png" width="5" height="5">

<a href="index.php" onMouseOver="arrow3.src='images/sarrowh.png'; return true"
onMouseOut="arrow3.src='images/sarrow.png'; return true">
<img src="images/sarrow.png" width="18" height="31" alt="" border="0" name="arrow3" title=""></a>

<br><img src="images/sp.png" width="5" height="5">

<a href="index.php" onMouseOver="arrow4.src='images/sarrowh.png'; return true"
onMouseOut="arrow4.src='images/sarrow.png'; return true">
<img src="images/sarrow.png" width="18" height="31" alt="" border="0" name="arrow4" title=""></a>

<br><img src="images/sp.png" width="5" height="5">

<a href="index.php" onMouseOver="arrow5.src='images/sarrowh.png'; return true"
onMouseOut="arrow5.src='images/sarrow.png'; return true">
<img src="images/sarrow.png" width="18" height="31" alt="" border="0" name="arrow5" title=""></a>

</td>
<td background="images/header_11.png" width="12" height="186" rowspan="3"></td>
<td background="images/spacer.gif" width="1" height="60"></td>
</tr>
<tr>
<td background="images/header_12.png" width="339" height="100"></td>
<td background="images/spacer.gif" width="1" height="100"></td>
</tr>
<tr>
<td background="images/header_13.png" width="339" height="65" rowspan="3"></td>
<td background="images/header_14.png" width="274" height="65" rowspan="3"></td>
<td background="images/spacer.gif" width="1" height="26"></td>
</tr>
<tr>
<td background="images/header_15.png" width="200" height="11" colspan="4"></td>
<td background="images/spacer.gif" width="1" height="11"></td>
</tr>
<tr>
<td background="images/header_16.png" width="210" height="28" colspan="5"></td>
<td background="images/spacer.gif" width="1" height="28"></td>
</tr>
<tr>
<td background="images/header_17.png" width="846" height="1" colspan="8"></td>
<td background="images/spacer.gif" width="1" height="1"></td>
</tr>
</table>
</BODY>
</HTML>

 

[SuCcEsS]

По добре ползвай отделен css файл за стила и направи два един за mozilla и един за IE

 

[webdeveloper]

IE е най-отвратителния браузер който може някога да се направи.

 

[shterev]

Защо не направиш една картинка да е, хем няма да ти гълда ресурси при зарейдането

 

[adrian]

Защо не направиш една картинка да е, хем няма да ти гълда ресурси при зарейдането

Напълно подкрепям А ако искаш някакъв по-точен отговор най-добре дай демо.

А това с отделните css файлове го зарежи. Толкова по-добри начини има от това, че дори не си заслужава да мислиш в тази насока.

Доскоро използвах различни "хакове" за различните IE-та, но това решение от Paul Irish е просто идеално.
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/