IE5, IE6 problem, също и с мониторите:( / Компютри и Интернет / WEB Дизайн и HTML

здравейте,

значи направих първата страничка на един сайт, който по-скоро го правя с екпериментаторска цел, като ползвам само цсс и див. Вчера Димоди ми каза колко трябва да е макс ширина за 15 инчовите монитори.

Съобразих се с всичко и резултата, поне за моите възможности, ми се стори приличен - виждаше се добре в ИЕ 5.1, Файърфокс 1.5, но най-добре - в последния браузър, който свалих - Опера 8.01 (новото си е ново).

Понеже това го правя на работа, какво беше учудването ми, когато си отидох в къщи, където имам ИЕ6, и положението хич не беше розово:( - Какво значи това, че ИЕ6 е още по скапан от ИЕ5 спрямо препоръките на УЦ3?

При мен проблема е явно във всеизвестният проблем, как ИЕ третира съдържание+бордер+паддинг.

В крайана сметка проблемът е следният:

1. имам хоризонтално меню със седм линка, като седмият е с по-малка широчина от останлите, защото е снимка на знаменце, за преминаване към друг език. В ИЕ5, файърфкс и опера - това си е оК, т.е. вижда се, така, както го искам, но в ИЕ5, последният линк - знамнецето - слиза на долният ред...

2. Също искам да попитам за монторите - с каквое по-добре да се съобразяваме - с това, че има хора с 15 инчови, или с това, че все повече хора почват да си купуват тфт монитори, които имат доста по-голямо видимо пространство?

3. относно браузирите и дизайна - четох, че най-важнто за един сайт е да работи добре на браузъра, който поддържа най-добре страндартите, т.е. винаги да го тестваш на такъв браузър първо. ТО е ясно, че това са мозила и опера, проблемът е че шибаният експлорер е най-скапан и най-масов...

Какво да правя в случай, че съм работил според стандарта и всичко е ОК в един добър браузър и се насира в ИЕ? Да ползвам таблици?

Благодаря!

п.с.

кода е следният:)))

body {
background: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
margin: 0;
padding: 1em;
text-align: center;
}

html>body {
font-size: small;
}

#outer {
text-align :center;
border:1px solid red;
width: 731px;
margin:auto;
background: white;

}

body>#outer {
width: 736px;
}

#hdr {
height:60px;
background:white;
color: #333333;
}

ul { /* all lists */

list-style-position: inside;
list-style-type: none;
margin: 0 0;
padding: 0 0;
}

li { /* all list items */
background: #000;
border: solid #FFF;
border-width: 0 0 0 0.1em;
color: #FFF;
float: left;
margin: 0 0;
position: relative;
text-align: center;
width: 115px;
}

#lng { /* flag */
margin: 0 0;
pading: 0 0;
width: 36px;
}

.../*има още код, ама това е този, който ИЕ6 не рачита*/

<body>
<div id="outer">
<div id="hdr">Алма Алтер Лого</div>

<ul id="nav">
<li id="first"><a href="" id="current">За нас</a>
<ul>
<li class="top"><a href="">Артисти</a></li>
</ul>
</li>
<li><a href="">Програма</a>
<ul>
<li class="top"><a href="">Месечна</a></li>
<li><a href="">Седмична</a></li>
<li><a href="">Днес</a></li>
</ul>
</li>
<li><a href="">Представления</a></li>

<li><a href="">Новини</a></li>
<li><a href="">Връзки</a></li>
<li><a href="">За контакти</a></li>
<li id="lng"><a href=""><img src="gb.gif" alt="english version" id="flag" /></a></li>
</ul>

...

има още код, който не е проблемен в ИЕ6...засега...

<html>
<head>
<style type="text/css">
* {margin: 0; padding: 0; border: none;}
dl {width: 100px; float: left; background: gray;}
div {width: 700px;}
</style>
</head>
<body>
<div>
<dl>
<dt>Definition term</dt>
<dd>Definition Description</dd>
<dd>Definition Description</dd>
<dd>Definition Description</dd>
</dl>
<dl>
<dt>Definition term</dt>
<dd>Definition Description</dd>
<dd>Definition Description</dd>
<dd>Definition Description</dd>
</dl>
<dl>
<dt>Definition term</dt>
<dd>Definition Description</dd>
<dd>Definition Description</dd>
</dl>
<dl>
<dt>Definition term</dt>
<dd>Definition Description</dd>
<dd>Definition Description</dd>
<dd>Definition Description</dd>
</dl>
<dl>
<dt>Definition term</dt>
<dd>Definition Description</dd>
<dd>Definition Description</dd>
<dd>Definition Description</dd>
</dl>
<dl>
<dt>Definition term</dt>
<dd>Definition Description</dd>
<dd>Definition Description</dd>
<dd>Definition Description</dd>
</dl>
<dl>
<dt>Definition term</dt>
<dd>Definition Description</dd>
<dd>Definition Description</dd>
<dd>Definition Description</dd>
</dl>
</div>
</body>
</html>