21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
TSD
Profil *
Předělávám po někom web a mám tento problém.

Potřebuju vodorovné menu, které má danou výšku, na pozadí celého menu je obrázek a jednotlivé <li> mají mít jakési odrážky. Vypadá to jednoduše, ale každý browser si můj záměr przní jinak. opera a ff jaksi neroztahují výšku <li> na celé <ul>, MSIE zase ignoruje margin: 0px; a odsazuje okolní prvky.



Takže css je:

ul#menu {
background-image: url(obrazy/img_01.gif);
background-repeat: repeat-x;
font-size:1em;
height: 41px;
line-height: 41px;
margin: 0px;
}


ul#menu li {
background-image: url(obrazy/img_XX.gif);
background-repeat: no-repeat;
text-decoration: none;
display: inline;
padding-left:20px;
padding-right:5px;
line-height: 41px;
text-transform: uppercase;
height: 41px;
vertical-align:middle;
}


Poradí někdo?
Díky. fakt nejsem designér a tohle už mě stálo jakýsi čas a nervy.

K nahlédnutí zde
Bubák
Profil
Chtěl jsem změnit, ale poslal jsem omylem znova, viz můj další příspěvek.
Bubák
Profil
ul#menu li { 
list-style: none;
float: left;
background: url(obrazy/img_XX.gif) no-repeat;
padding-left:20px;
...


MSIE zase ignoruje margin: 0px; a odsazuje okolní prvky.
Asi jse to přehlédnul, nevím, co konkrétně máš na mysli. Možná to dělá padding.
TSD
Profil *
Bubák
Smekám, pane. Smekám a děkuju :)

k tomu MSIE zase ignoruje margin:

Všimni si, že v opeře a FF končí modrá hlavička, pak začne šedo-bílo-šedý gradient a ten skončí stínem.

v IE6 je nad šedým gradientem asi 2px vysoký bílý proužek a pod ním obdobný, cca 5px vysoký.
Bubák
Profil
Pro odstranění mezírky pod brázkem v záhlaví deklaruj mu:
display: block;

Deklarace nulového marginu je na tomto místě zbytečná.

Pokud už děláš tu (malou, ale přece jen) prasárnu, že používáš přímý styl, tak se to píše takto:
style="display: block;"


Víc neporadím, na to jsem krátký. Margin, padding, nebo jiný boxmodel to s nejvyšší pravděpodobnosí nedělají.
TSD
Profil *
Bubák
Pokud už děláš tu (malou, ale přece jen) prasárnu ... nedělám :)

display: block pomohl, jsem tvým dlužníkem.
Bubák
Profil
<img margin="0" border="0" ...
V obrázku máš pořád pokus o nulový margin, a margin patří jen do stylů.
Atribut border obrázek má, ten můžeš na místě s klidem ponechat, ale atribut margin jaksi neexistuje, margin je CSS vlastnost, proto ta narážka o přímém stylu.

Seznam atributů podle W3C: www.w3.org/TR/REC-html40/index/attributes.html
Poznámka 1: v prohlížečích fungují i některé jiné atributy, ale atribut margin opravdu neexisuje.

Poznámka 2: Zkus stránku zvalidnit, pomůže ti český validátor, podle mého jako největší chybu máš neuzavžený DIV, ,ale ani to s největší pravděpodobností (nechávám si zadní vrátka, kdyby to nebyla pravda) není příčina odlišného zobrazení v IE, přičemž IE6 a IE7 v tomto případě zobrazují shodně.
TSD
Profil *
Bubák
Nezavřený div tam myslím nemám, ale to cos napsal pomohlo velmi, už je to ok. Já jsem to předtím dal do css, ale pro jiný obrázek, sáhnul jsem vedle. Takže hlavička je spravená, děkuju. Zkusím podráždit ten validátor.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0