Stránka s CSS vypadá jinak ve FF a IE

Dobrý večer.

Na adrese http://bonus-cr.wz.cz je takový pokus o stránku, resp. zatím jen úvod. Jsem začátečník, všechno dělám dle knih a tak jsem spatlal dohromady HTML, CSS a PHP, z kterých jsem pochytil nějaké minimální základy. Stránku "ladím" ve FF (verze 2.0.0.4.) a teď se snažím sladit design i v IE (verze 7.0.5730.11). Přečetl jsem si něco o hacku a i něco použil (padding a margin), ale teď jsem se nějak zarazil a nemohu dál.

Jedná se mi o horizontální menu - ve FF to vypadá tak, jak chci, ale v IE se červené pozadí jedn. slov hodně zmenšilo. Mohl by mi, prosím, někdo poradit, jak to udělat, aby to menu vypadalo v obou prohlížečích stejně, resp. tak jako ve FF?

Děkuji moc za pomoc!

Tak usilovným hraním s px všude možně se mi jakž-takž podařilo sladit design v obou prohlížečích. Jediné, co se teď liší, jsou mezery mezi jedn. tlačítky horizontálního menu - v jeho pravé polovině jsou větší. Čím to?!

Tyhle věci jsem si zvykl řešit pomocí tzv. podmíněných komentářů. Jde o to, že se do hlavičky dá ještě odkaz na alternativní styl pro IE libovolné verze a zakomentuje se tak, aby ho ostatní prohlížeče nenašly:

Příklad:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<!--[if lte IE 6]><link rel="stylesheet" href="style-ie6.css" type="text/css" media="screen" /><![endif]-->

<!--[if IE 7]><link rel="stylesheet" href="style-ie7.css" type="text/css" media="screen" /><![endif]-->

V tom alternativním stylu nemusí být obsaženy všechny položky, stačí upravit parametry těch sporných. "Základní" styl je potom čistý (i validní), nemusí se používat různé IE hacky a je pohoda ve stylech cokoliv měnit. Už na ně nedám dopustit. Mám styl 1/ normální 2/ pro IE 6 a nižší 3/ pro IE7 (ten má třeba jen jeden řádek) a obsáhnu tím layout pro všechny dnes používané prohlížeče.

Tady je něco o nich:
http://www1.mraveniste.org/weblog/2006/03/16-msie-komentare.html

Díky za odkaz, prostuduji to a poučím se.

Čirou náhodou, nenapadá tě na 1. pohled, proč jsou mezery mezi jedn. "tlačítky" horizontálního menu v jeho pravé polovině větší? Lámu si s tím hlavu a ne a ne na něco přijít...

Na první pohled nevím, ale v 99% za to může padding. Vždycky se ho snažím vynulovat. Pokud to jde.
Tady o tom (tzv. box-model) něco je:
http://developer.mozilla.org/cs/docs/Opravy_chyb_webmaster%C5%AF:R%C5%AFzn%C3%BD_box_model

Jinak celý tento zápis jde udělat mnohem méně komplikovaně:

<div id="navigace2">
<h2>Navigace 2:</h2>

<p>
<span class="schovat">[ </span><a href="index.php">Úvod</a> <span class="schovat">] - </span>

<span class="schovat">[ </span><a href="onas.php">O nás</a> <span class="schovat">] - </span>
<span class="schovat">[ </span><a href="bonus.php">Bonus</a> <span class="schovat">] - </span>
<span class="schovat">[ </span><a href="podminky.php">Podmínky</a> <span class="schovat">]</span>
<span class="schovat">[ </span><a href="registrace.php">Registrace</a> <span class="schovat">]</span>

<span class="schovat">[ </span><a href="firmy.php">Pro firmy</a> <span class="schovat">]</span>
<span class="schovat">[ </span><a href="kontakt.php">Kontakt</a> <span class="schovat">]</span>
<span class="schovat">[ </span><a href="partneri.php">Partneři</a> <span class="schovat">]</span>
</p>
</div>

Jde zapsat takto:

<ul id="navigace2">Navigace 2:
<li><a href="index.php">Úvod</a></li>
<li><a href="onas.php">O nás</a></li>
<li><a href="bonus.php">Bonus</a></li>
<li><a href="podminky.php">Podmínky</a></li>
<li><a href="registrace.php">Registrace</a></li>
<li><a href="firmy.php">Pro firmy</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
<li><a href="partneri.php">Partneři</a></li>
</ul>

A pokud jednotlivé prvky vhodně nastyluješ, bude efekt stejný a odpadnou problémy se zobrazením. Nutno dát <li> display:block; list-style-type:none; na další už určitě přijdeš sám.

zdenek (katori.wz.cz)
a pak mas stranku, ktera ma HTML 5k a k tomu 5 CSS po 1k + na kazdy soubor 1k hlavicka. Takze vlastne prumerne cekas na 5x2k a otevrit 5 souboru trva serveru dele nez 1-2

Ale je to zajimava a pekna vec.

Dalsi zajimava je treba obrazek v CSS. Coz umi zatim jen FF.
{url:data="AB67FED98";} nebo tak nejak se to pise...