Autor Zpráva
ZIMINIX
Profil *
Podívejte se na můj rozpracovaný web, který se v blbém a nekvalitním Internetu Exploreru a Opeře zobrazuje dobře a ve FireFoxu se kompletně zmrví. Prosím pomozte.
Petra
Profil
Co konkrétně se má ve Firefoxu zobrazovat špatně? Nějak to nevidím :-)
ZIMINIX
Profil *
Třeba to menu s odkazy. V Opeře má mít jeden řádek 18px kde?o ve FireFoxu se to smáčkne na pár pixelů.
Petra
Profil
Toto má být nastavení 18px vysokého řádku?

#menu_links a
{
height: 18px;
}

No tak to ale funguje správně, toto nastavení je chybné a Firefox ho správně ignoruje. (Chybná interpretace je na straně IE, v Opeře se mi to zobrazuje stejně jako ve Firefoxu.) Vlastnost height je určena blokovým a nahrazovaným elementům, což <a> určitě není. Správné nastavení je:

#menu_links a {line-height: 18px}
ZIMINIX
Profil *
No tak to line-height asi nic nevyřeší. Line-height je totiž výška řádku, kdyžto height je výška prvku a já potřebuju aby když v tom menu najedu na odkaz, taky aby to tmavě modrý pozadí bylo přes celou výšku těch 18px a přes výšku toho textu. A taky potřebuju aby to bylo přes celou šířku toho menu. A mě se to v Opeře zobrazuje stejně jako v IE. Ale asi se na ten FireFox stejně vykašlu jako on na mě.
Plaváček
Profil
Víš. Ziminixi, tvůj problém tkví v tom, že jsi zatím dostatečně nepochopil rozdíl mezi blokovým a řádkovým prvkem. Element A jako takový je řádkovým (neboli inline) prvkem, kterému dle specifikace nelze nastavit šířku ani výšku, protože slouží výhradně k označení části textu (který bude formátován jiným způsobem, než okolní text, v tomto případě bude vyznačen jako odkaz). Mozilla se tedy chová správně a nastavenou výšku ignoruje. Možným řešením je nastavit elementu A display: block; a nějaký margin a padding, třeba takto:

a {
display: block;
padding: 3px 5px;
}

Tím dosáhneš stejného efektu a nenarazíš na problém, který vyvstane v okamžiku, kdy si třeba uživatel zvětší písmo. Mozilla i Opera se totiž zachovají správně a zvětšený text ti přeleze definovanou výšku prvku, což nebude vypadat nejlépe.

Obecně platí, že nastavovat výšku prvkům, které obsahují text je cestou do pekel. Abych ale jenom teoreticky neplkal. Uprav si stylový předpis takto:

.menu_h
{
font-size: 11px;
font-weight: bold;
font-style: italic;
color: #0066cc;
padding: 3px 5px;
text-align: center;
border-bottom: solid 2px #0066cc;
}

#menu_links a
{
color: #0066cc;
display: block;
padding: 3px 5px;
width: 140px;
_width: 146px;
}

a zdrojový kod navigace takto:

<div class="menu_h">Hlavní menu</div>
<a href="#" title="Úvod">:: Úvod</a>
<a href="#" title="Uživatelská sekce">:: Uživatelská sekce</a>
<a href="#" title="Témata článků">:: Témata článků</a>
<a href="#" title="Počasí">:: Počasí</a>
<a href="#" title="Diskusní fórum">:: Diskusní fórum</a>
<a href="#" title="Chat">:: Chat</a>
<a href="#" title="WebLinks">:: WebLinks</a>
<a href="#" title="eKuchařka">:: eKuchařka</a>
<a href="#" title="Město Třebíč">:: Město Třebíč</a>
<a href="#" title="Flash hry">:: Flash hry</a>
<a href="#" title="Statistiky webu">:: Statistiky webu</a>
<a href="#" title="Napište nám">:: Napište nám</a> </div>

a bude to fungovat spolehlivě. Bohužel ze sémantického hlediska se jedná o nepříliš čisté řešení a osobně bych ti doporučil vytvořit navigaci jako nečíslovaný seznam pomocí elementů UL a LI. Návodů nalezneš na internetu dostatek a to už snad zvládneš sám.
ZIMINIX
Profil
Takže tom menu by mělo vypadat asi takto:

<div id="menu_links">
<ul>
<li class="menu_h" />Hlavní menu
<li /><a href="url" title="titulek">link 1</a>
<li /><a href="url" title="titulek">link 2</a>
<li /><a href="url" title="titulek">link 3</a>
<li /><a href="url" title="titulek">link 4</a>
<li /><a href="url" title="titulek">link 5</a>
.....................................................................
</ul>
</div>

???
Acci
Profil
Ale ne

<div id="menu_links">
<ul>
<li class="menu_h">Hlavní menu</li>
<li><a href="url" title="titulek">link 1</a></li>
<li><a href="url" title="titulek">link 2</a></li>
<li><a href="url" title="titulek">link 3</a></li>
<li><a href="url" title="titulek">link 4</a></li>
<li><a href="url" title="titulek">link 5</a></li>
.....................................................................
</ul>
</div>
ZIMINIX
Profil
Hm....

Konečně už jsem vyřešil všechny problémy a už mi to jede.
Toto téma je uzamčeno. Odpověď nelze zaslat.