Разное отображение стилей в IE 7.0 и FF 3.0.7

[BadBoy]

Уважаемые Гуру. Нужен Ваш совет.

И так.

Есть код CSS

body {margin: 0px;}
img {border: 0px;}




BODY { 
	FONT-SIZE: 11px; COLOR: #075273; FONT-FAMILY: Tahoma, Arial, Helvetica 
}
TD {
	FONT-SIZE: 11px; FONT-FAMILY: Tahoma, 'Arial Cyr', 'MS Sans Serif'
}


A {	FONT-SIZE: 11px; COLOR: #d7e5ec; TEXT-DECORATION: none}
A:active {FONT-SIZE: 11px; COLOR: #d7e5ec; FONT-WEIGHT: normal; TEXT-DECORATION: none}
A:visited {FONT-SIZE: 11px; COLOR: #d7e5ec; FONT-WEIGHT: normal; TEXT-DECORATION: none}
A:hover {FONT-SIZE: 11px; COLOR: #3a92b3; FONT-WEIGHT: normal; TEXT-DECORATION: underline}


/* Поле меню */
.menu {
padding: 0;
margin: 0;
font: 8pt/11pt Tahoma, sans-serif;
width: 180px;
}


/* Пункт меню */
.menu a, .menu a:link, .menu a:visited {
width: 180px;
border-bottom: #d7e5ec 1px dotted;
padding: 0px 2px 0px 2px;
display: block;
}

.menu a:hover {
padding: 0px 2px 0px 2px;
background: #d7e5ec;
FONT-WEIGHT: normal;
border-bottom: #ccd8dd 1px solid;
text-decoration: none;
display: block;
}

li{
list-style-type: square;
}


.hr {border-top: #d7e5ec 1px dotted; float: left; margin-bottom: 0px;}

h1, h2, h3 {
font: normal normal 15pt Tahoma;
letter-spacing: 1px;
FONT-WEIGHT: bold;
margin-bottom: 0px;
color: #3a92b3;
}

.tbl {border: #333333 1px solid;}
.tbl1 {border-left: #333333 1px solid; border-right: #333333 1px solid;border-bottom: #333333 1px solid;}
.tbl2 {border-bottom: #333333 1px solid;}

.zag {border-bottom: #d7e5ec 1px dotted; width:180; float: left; margin-bottom: 0px;}

Есть код страницы

<center>
<table width="204" height="332" border="0" cellspacing="0" cellpadding="0">
<tr><td width="100%" valign=top align=left background="left_bg_menu.jpg">
<div style="padding-top: 48px; padding-left: 15px;">

<div class="zag"><font color=#d7e5ec><b>ABOUT US</b></font></div>
<div class="menu"><a href="./"><li>Company profile</a>
<a href="./team.php"><li>Team</a>
<a href="./contact.php"><li>Contacts</a></div>

<div style="padding-top: 5px; padding-left: 0px;">
<div class="zag"><font color=#d7e5ec><b>SOLUTIONS</b></font></div>
</div>


<div class="menu">
<a href="./msdp.php"><li>Multi Sensor Data Processing</a>
<a href="./fdps.php"><li>Flight Data Processing</a>
<a href="./cwp.php"><li>Controller Working Position</a>
<a href="./sn.php"><li>Safety Nets</a>
<a href="./mrd.php"><li>Multi Radar Display</a>
<a href="./tst.php"><li>Time Synchronization Tools</a>
</div>


<div style="padding-top: 5px; padding-left: 0px;">
<div class="zag"><font color=#d7e5ec><b>SERVICES</b></font></div>
</div>

<div class="menu">
<a href="./warranty.php"><li>Warranty</a>
<a href="./es.php"><li>Engineering Support</a>
</div>


</div>
</td><td width="90%" valign=top bgcolor=#edf5f8>


</td></tr></table>

</center>

Вот скриншоты:

Internet Explorer - http://pic.ipicture.ru/uploads/090313/754nQ1lOua.jpg

FireFox 3.0.7 - http://pic.ipicture.ru/uploads/090313/vRzis718Sg.jpg

Объясни мне пожалуйста что я делаю неправильно???

PS | В FireFox должно выглядеть так же как в IE ... Надеюсь на Вашу помощь

Edited March 13, 2009 by BadBoy

[Gamer]

Вам бы оптимизировать код сначала, как минимум предать анафеме табличную верстку и устаревшие теги)

[BadBoy]

Вам бы оптимизировать код сначала, как минимум предать анафеме табличную верстку и устаревшие теги)

Табличная верстка есть, это просто фрагмент кода из menu.php , который инклюдится(include) в index

анафеме - что это такое?

А какие-нибудь подробные замечания будут? Ну что на что поменять

[Gamer]

Табличная верстка есть, это просто фрагмент кода из menu.php , который инклюдится(include) в index

Ну дак весьма желательно заменить ее в файле на правильную верстку.

анафеме - что это такое?

Анафема - проклятье. Обычно предавали анафеме, отлучая от церкви.

А какие-нибудь подробные замечания будут? Ну что на что поменять

Касательно правильной верстке? Ну...

1. Про таблицы я уже сказал

2. Устаревшие теги маст дай (<center>, это ж надо, ужасть!), <b>, <font>

3. В блоковые вставляются строковые элементы, а не наоборот.

4. Различные атрибуты типа sellpadding, sellspacing, border (у таблиц), align, background и т.д убрать. Все это давно реализуется стилями.

За справкой сюда и сюда.

Там еще много полезного можно найти.

[BadBoy]

Понятно Вы можете что-то подробное сказать почему .menu в ссылках отображается криво?

Может посоветуете как сделать что бы тег LI имел margin: 0px, что бы он не переносил текст на новую строку?

[Gamer]

Понятно Вы можете что-то подробное сказать почему .menu в ссылках отображается криво?

Потому что не валидно у вас список построен.

1. Любой список открывается с тега <ul> или <ol> и заканчивается им же.

2. Тег пункта меню (<li>) должен закрываться.

3. Сначала идет открывающий тег <li>, затем контент, например. ссылка, потом закрывающий </li>

Пример, как правильно:

<div class="menu">

<ul>

<li><a href="./msdp.php">Multi Sensor Data Processing</a></li>
<li><a href="./fdps.php">Flight Data Processing</a></li>
<li><a href="./cwp.php">Controller Working Position</a></li>
<li><a href="./sn.php">Safety Nets</a></li>
<li><a href="./mrd.php">Multi Radar Display</a></li>
<li><a href="./tst.php">Time Synchronization Tools</a></li>

</ul>

</div>

Очень советую привести код в минимальный порядок)

P.S. И все же почитайте ссылочки, что я вам кинул. Там как раз говорится об этом.

Edited March 13, 2009 by Gamer

[s0rr0w]

1. Любой список открывается с тега <ul> или <ol> и заканчивается им же.

Есть правда еще DL, но это уже мелочи.

2. Тег пункта меню (<li>) должен закрываться.

Не обязательно.

http://www.w3.org/TR/html401/struct/lists.html#h-10.2

[BadBoy]

решил вопрос проще, через картинку

Спасибо за ответы и советы, буду знать