| Autor | Zpráva | ||
|---|---|---|---|
| pavuk Profil |
#1 · Zasláno: 9. 2. 2010, 07:29:53 · Upravil/a: pavuk
Potřeboval bych v nečem udělat jasno:
nejprve obrázek: 
a k němu odkaz Problém je, že FF i Opera vykreslují jednotlivý obrázky správně takže jsou dobře sesazený, kdežto IE je kapku "očeše". IE 8 vezme jeden pixel z části nazvaný na výše uvedeným obrázku "header", tím dojde k jeho posunu nahoru. IE 7 a IE 6 zase vezmou jeden pixel z "background menu" (ano, vetřelo se mi tam omylem "backaround"...) a taky ho posunou nahoru. Zajímalo by mě co to způsobuje |
||
| Petr ZZZ Profil |
#2 · Zasláno: 9. 2. 2010, 07:39:04 · Upravil/a: Petr ZZZ
IE počítá okraje trochu jinak než jiné prohlížeče (resp. jiné prohlížeče to počítají trochu jinak než IE): Yuhůův všeříkající nákres.
Asi to nebude mít vliv, ale když už jsem si toho všiml, toto jde zapsat kratčeji: margin: 5px; margin-left: 13px; S rozdílnými odstupy prvků v FF a IE se taky peru. Dosud jsem to řešil tak, že jsem udělal odstup trochu větší než by se mi nejvíc líbil, abych se příliš krátkého odstupu zbavil. Začínám přemýšlet, zda nezačnu psát marginy/paddingy v případě podobných problémů nulové a dělat místo toho odstupy pomocí průhledného gifu. Jestli nemáš průhledný gif, dám jeden na můj web tak, aby bylo možno ho snadno uložit, pár minut to potrvá. Originál má jen 1x1 px a 0,085 KB, nafukuje se až v kódu. Netuším, zda to má na konkrétní problém vliv, ale všiml jsem si, že máš na začátku * { margin: 0; padding: 0 }Někde tu píše Chamurappi, že to nedoporučuje. Zkus hledat reset. |
||
| pavuk Profil |
#3 · Zasláno: 9. 2. 2010, 08:48:22 · Upravil/a: pavuk
Petr ZZZ:
Marginy který zmiňuješ určujou rozestupy položek <menu>, v tomto případě nemají žádný vliv, právě tak to můžeš zobrazit bez menu. No a margin a padding pro * mám právě proto, abych vyloučil nějaký ovlivnění v zobrazení těch obrázků ze kterých se to skládá. Yuhůův nákres jsem vedl v patrnosti v hlavě a proto jsem všechny marginy, paddingy a bordery vyloučil. Ale zřejmě mi něco uniká, asi to co nevidím protože do toho koukám už druhej den... |
||
| Trejpa Profil |
#4 · Zasláno: 9. 2. 2010, 09:39:15
pavuk:
Já bych řekl, že problém je úplně jinde. Předpokládám, že jsi měl pod obrázkem (image/adresa.gif) mezeru, které ses neuměl zbavit jinak, než že jsi následující prvek o tu mezeru vytáhl nahoru (#menu-box { margin-top:-5px; }) a možná i proto další posunul o 4 px níže paddingem. Ať už je ta mezírka o pixel jiná nebo je to rozdíl mezi záporným marginem a kladným paddingem (tedy jeden ztracený pixel), tak na vině je jen pozice obrázku. Proto ti doporučuji, abys obrázky přenesl na střed řádku. Když jsi té mezeře nerozuměl, proč sis o ní něco nezjistil? img { vertical-align: middle; }Petr ZZZ: „Někde tu píše Chamurappi, že to nedoporučuje.“ Zejména formulářovým prvkům se to nehodí. Jakmile na ně použiješ nějaký styl (který můžou mít), tak se tlačítka a kolonky přepnou ze systémového (krásná zaoblená) do vlastního nastavení (hnusná hranatá šedá) a nejde to vrátit. Proto je lepší vyjmenovat všechny resetované prvky: html, body, h1, h2, p, menu, li { margin: 0; padding: 0 } |
||
| pavuk Profil |
#5 · Zasláno: 9. 2. 2010, 10:22:00 · Upravil/a: pavuk
Trejpa:
Bingo! Ten zápornej margin 5px je tam skutečně z toho důvodu kterej uvádíš, ten další už ale ne. Tý mezeře opravdu nerozumím, ale zjišťoval jsem, louskal jsem to přibližně sedm hodin, ale nedopátral jsem se k výsledku. Možná proto, že jsem nevěděl co mám hledat. Není lehký něco tak neuchopitelnýho jako je "mezera" nebo "mezera v IE" nebo "odskok odstavce" nebo "dalších sto spojení" najít ať už na google nebo na takhle rozsáhlý a promakaný diskuzi. Ostatně, ta mezera není podstatná, jde o to proč se "header" v IE posune o 1px vzhůru Mimochodem, po odstranění zápornýho marginu a zadání img {vertical.. atd} nedošlo k žádný změně, IE pořád o 1px zdrhá. Možná by ta otázka spíš měla tedy znít takhle: proč je "header" v IE o 1px výše než zbytek? odkaz č.2 |
||
| Petr ZZZ Profil |
#6 · Zasláno: 9. 2. 2010, 19:11:45
pavuk:
Tak těch pár minut se trochu protáhlo, ale teď ten průhledný gif na webu mám, tak kdybys ho chtěl použít, tak si posluž. Povídání jsem k tomu napsal německy, ale nepíšu tam dohromady nic jiného než tady, tak to snad nebude vadit. Na odkázané stránce je průhledný gif ta veliká "díra" hned nad slovem rosa. V kódu je nafouklý na 800x300 pixelů, ve skutečnosti má jen jeden pixel a 0,085 KB. Na testování lze použít jakýkoli jiný obrázek, já mám uložený testovací, abych nemusel pořád přemýšlet, kde je jaký obrázek po ruce a jak se jmenuje. Až je kód hotový, přepíšu testovací obrázek na průhledný. Taky mám oba ve stejné složce jako soubor, na kterém zrovna dělám, aby byl kratší kód (ostatní obrázky mám ve složce bilder/, což je pak v kódu nutno zohlednit). Dělat odstupy pomocí průhledného obrázku není asi dvakrát sémantické, ale obrázek má tu výhodu, že je ve všech prohlížečích stejně veliký. Někdy se prostě hodí. Na odkázané stránce je i viditelný testovací gif, ten si taky můžeš uložit. Nezkoušel jsem, co se stane, když si někdo vypne obrázky, zda se "gifový" odstup zobrazí nebo zda se to smrskne. Vzhledem k tomu, že na mém webu mají fotky plnit dost důležitou úlohu, moc se variantou s vypnutými obrázky nezabývám. Trejpa: Dík za upřesnění, vypadá to, že je to jak říkáš. Jedno vlákno o resetu jsem našel. Panther v něm hvězdičkový reset nedoporučuje, bubák, Lexter, Chamurappi a Yur4Y s pantherem souhlasí: Spor o resetování CSS vlastností. |
||
| pavuk Profil |
#7 · Zasláno: 9. 2. 2010, 19:27:43
[b]Petr ZZZ[b]:
Asi si moc nerozumíme, nemám problém s tím obrázkem, ale s jeho umístěním na stránce. Když to shrnu polopaticky jsou to tři stejně vysoký obrázky vedle sebe, ale prostřední ("header") je v IE posunutej o jeden pixel nahoru, pro jednoduchost pochopení jsem to dal do odkazu v #5. Mimochodem, doteď jsem na to nepřišel... reset to neřeší |
||
| Petr ZZZ Profil |
#8 · Zasláno: 9. 2. 2010, 20:31:22 · Upravil/a: Petr ZZZ
pavuk:
„tři stejně vysoký obrázky vedle sebe“ Pokud jsem koukal do správného odkazu, tak nejsou stejně vysoké, nýbrž left a right jsou vysoké 200px, adresa 125px. Na zkoušku jsem dokument úplně osekal a nechal jen ty tři obrázky (charset jsem změnil na utf-8, ale to je teď jedno): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="cs">
<link rel="StyleSheet" type="text/css" href="style.css">
</head>
<body>
<img src="image/left.gif"><img src="image/adresa.gif"><img src="image/right.gif">
</body>
</html>Myslím se ti to bude kódovat mnohem líp, když ty obrázky předěláš ve fotošopu tak, aby byly všechny stejně vysoké. Nebo z toho rovnou udělat jen jeden obrázek. A nebo teda, pokud tři, tak ten prostřední stačí, když bude jen třeba 10 pixelů široký, aby byl datově malý, a nafoukneš ho až v kódu nebo ho dáš na pozadí divu tak, aby se opakoval. Ale i potom se ti to bude dělat líp, když budou všechny tři stejně vysoké – nebudeš je muset vertikálně extra pozicovat a bude-li tam odchylka, bude u všech třech obrázků stejná a tím pádem nebude vadit. |
||
| pavuk Profil |
#9 · Zasláno: 9. 2. 2010, 21:23:58 · Upravil/a: pavuk
Ano, špatně jsem to vyjádřil, měl jsem napsat "ta barevná čára" je na nich stejně vysoko. Doufal jsem že bude dostatečně zřejmý co mám na mysli. Samozřejmě jsem obrázky u sebe při zkouškách uřízl, takže byly fyzicky stejně vysoký, dokoce byly identický, tak jak to píšeš ty, přesto je jeden pixel v IE pořád za útěkáře. Tam přece nemůže být „odchylka“
Já jsem nepotřeboval nic takovýho nakódovat, prostě mě jen napadlo když jsem včera ráno upíjel kávu složit "hlavičku s lištou" ze tří obrázků, daly by se tím, že je to ze tří divů vedle sebe, dělat psí kusy. Vůbec jsem netušil že mi z toto vyroste taková "kauza pixel idiot" (případně dosaďte "autor"). Mám stránky jen pro radost, novej koníček ve 40-ti, a machruju na svý děti. To jak to vypadá graficky je jen náhlej nával aby se mělo oko čeho chytit. Jasně že je to snadno řešitelnej problém jinejma způsobama a cestama, který taky např. popisuješ, ale mě tohle prostě nejde do hlavy. Nechci jiný náhradní řešení, chci vědět proč je tohle tak, jak to je. |
||
| Petr ZZZ Profil |
#10 · Zasláno: 9. 2. 2010, 22:35:14 · Upravil/a: Petr ZZZ
Doplň si do toho osekaného kódu, který jsem ti poslal v minulém příspěvku, červenou barvu pozadí:
<body style="background-color:#f00;"> Pak je vidět, kde jednotlivé obrázky vůbec začínají a kde končí. Ty obrázky napsané vedle sebe jsou zarovnané na spodek. Když jsou různě vysoké a navíc je u jednoho vodorovná čára dole a u dvou uprostřed, tak to vypadá, jak to vypadá. Nejjednodušší řešení by bylo udělat ten obrázek znova a nařezat ho na tři stejně vysoké kusy. Potom odpadne nutnost vertikálního pozicování nebo je přinejmenším budeš moct všechny napozicovat vertikálně stejně. Jak to vyřešit se stávajícími obrázky, na to jsem bohužel stejně krátkej jako ty . :-/ |
||
| pavuk Profil |
#11 · Zasláno: 10. 2. 2010, 04:12:30
Petr ZZZ:
:-) Myslíme stejně, tohle všechno jsem zkoušel už předevčírem než jsem to vůbec na diskuzi dal. |
||
|
Časová prodleva: 7 měsíců
|
|||
| dT Profil * |
#12 · Zasláno: 24. 8. 2010, 09:16:02
a nepomuze ti img { display:block; }
? |
||
| pavuk Profil |
#13 · Zasláno: 24. 8. 2010, 10:06:24
dT:
Těžko říct, nakonec jsem na nějaký řešení asi přišel, ale už si nepamatuju na jaký, přece jen je to už půl roku. |
||
| Bubák Profil |
#14 · Zasláno: 24. 8. 2010, 10:23:03
Ve tvém případě pomáhá vertical-align (s většinou hodnot, třebas top, middle, bottom...) nebo display: block pro problémový obrázek.
Pokud ti to nepomohlo, dělal jsi něco špatně, pozor taky na keš prohlížeče. |
||
|
Časová prodleva: 14 let
|
|||
0