Autor Zpráva
Whill
Profil
Dobrý den,
potřebuji si nastínovat okraje webové stránky - mám na mysli takový ten efekt aby to působilo plasticky. Řeším to řekl bych standardně přes CSS a to konkrétně tímto způsobem:

body {    background:#E5E5E5 url('/img/back.gif') repeat-y top center;width:978px;margin:0 auto;     }


... jednoduše tedy opakuji malý vycentrovaný obrázek s vyrobeným stínem na levém i pravém okraji, po ose Y až na konec stránky. V IE6/8, Opeře, FF, Chrome a Safari s tím nemám problém až na IE7 (nebo také IE8 v módu kompatibility, což je vlastně právě zobrazování jako IE7), kde se setkávám s tímto:

http://dl.getdropbox.com/u/200161/ie7er.png

(nahoře výřez správně zobrazené stránky, dole nesprávně)

...zkrátka onen obrázek, který se opakuje odshora dolů je "ustřelený" celkem dost doprava a já nemám nejmenší zdání jak se toho zbavit (nebo si zatím sedím na vedení ).

Základní strukturu stránky jsem nahrál zde: http://album.comehere.cz/cwww/index.php .. takže se můžete podívat a na CSS styl se dostanete zde: http://album.comehere.cz/cwww/css/style.css ... výše uvedený kód s obrázkem je hned nahoře (a ještě tam mám jeden soubor se styly http://album.comehere.cz/cwww/css/screen.css ).

Kdyby se někomu chtělo, byl bych vděčný za rady jak to pro IE7 ošetřit nebo jak to napsat jinak. .. ještě podotýkám, že stránka je validní.

Děkuji
Chamurappi
Profil
Reaguji na Whilla:
Problém v Exploreru 7 při šířce okna 1920 pixelů nepozoruji. Při užším okně už ano.
Proč nepoužiješ normální centrování? Nezkoumal jsem tvůj layout zatím moc podrobně, ale myslím si, že si závadu způsobuješ použitým fíglem s pozicováním:
#page {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -480px;
  width: 960px;
  height: auto;
}
Hrátky s <body> mají svá úskalí, Explorer asi počítá těch 50 % z jiné šířky, než očekáváš. Tím fíglem způsobuješ mimochodem i nepoužitelnost při nižším rozlišení (třeba 800×600), protože levý sloupec zajede za levý okraj.

ještě podotýkám, že stránka je validní
1) Na tom nezáleží.
2) Není.
Whill
Profil
Díky moc za podněty. To s tím schováním za okraj stránky jsem si neuvědomil, takže těch 50% je pryč, použil jsem toho tvého linkovaného návodu.

jinak jsem to přemístil sem: http://album.comehere.cz/cwww/index.php (je to upraveno i v pův. postu) ... protože na tom IC mi to dělalo nějaký bordel kvůli té reklamě co tam automaticky vkládají.

Provedená úprava (snad to mám dobře) na mou závadu s obrázkem stínů bohužel nemá vliv.

Jinak stránka je validní asi v jak kterém validátoru.
Chamurappi
Profil
Reaguji na Whilla:
Ještě můžeš zrušit šířku na <body>, je zbytečná (i když neškodná — v předchozím příspěvku jsem se mýlil).

Všiml jsem si, že používáš na zarovnání <span>u doprava relativní pozicování se zápornou hodnotou right, což je na první pohled špatný nápad. Jen ve velmi vzácných případech se vyplatí pozicovat relativně, většinou to není potřeba a kodér si zdánlivě snadnou fintou zadělává na pozdější nevysvětlitelné problémy. Což je i tvůj případ, i když narážíš spíš na vykreslovací chybu prohlížeče.

Ve stylech máš:
#aktualizace {
  position: relative;
  bottom: 0;
  right: -300px;
} 
.update-aktuality {
  position: relative !important;
  right: -420px;
}
Explorer vezme dotyčné <span>y a odsune je včetně prostoru zbývajícího do konce řádku doprava (tzn. sune se velký kus o šířce přesahující 600 pixelů). Tím ti roztáhne <body>, pozadí vycentrované vzhledem k prostoru <body> opustí své vysněné místo a jede doprava polovičním tempem spolu se <span>y. Při vysokém rozlišení (mnou zmíněných 1920 pixelů) se závada neprojevila, protože se posunuté části vešly do prostoru okna.

Existuje více možností, jak závadu zazáplatovat nastylováním obalujících elementů, ale nejsnazší bude, když vyházíš „position: relative“ a zarovnání doprava zajistíš normálně.

Děkuji za zajímavou záhadu.


S problémem to sice nesouvisí, ale…
.zahlavi h2 span {
  position: absolute;
  top: 0;
  margin-left: -42px;
  padding: 0;
  width: 960px;
  height: 240px;
}
Tento způsob překrytí textu obrázkem také není moudrý. Text „xxx“ má sice při výchozí velikosti šířku 42px, ale uživatel si může písmo zvětšit nebo mít jiný font — pak se netrefíš. Zruš margin, nastav mu „left: 0“ a pro <h2> nastav „position: relative“. Upozorňuji, že toto není jeden z výše zmíněných vzácných případů, kdy se hodí relativní pozicování, protože i když nastavíš „position: relative“, nebudeš relativně pozicovat. Žádný left, žádný right, žádný top, žádný bottom — žádné posouvání. V tomto případě „position: relative“ jen nastaví nový souřadný systém (omezující blok, počátek souřadnic) pro své potomky, tedy pro ten <span>.

Jinak stránka je validní asi v jak kterém validátoru.
Řešíš-li problém s prohlížeči a obracíš-li se na validátor, měl bys volit takový, který užívá přibližně stejné postupy, jako užívají prohlížeče. Tvůj kód baští prohlížeče jako staré dobré HTML (<!doctype> nerozhoduje), takže pokud tě oficiální validátor pochválí, že máš validní XML, nemá to na funkčnost v prohlížečích žádný vliv.
Opakuji ale, že na validitě nezáleží. Vady v HTML kódu jsou tolerovány, problém je v CSS.
Whill
Profil
Opravdu děkuji za vyřešení záhady, je vidět, že máš přehled, sám bych to těžko odhalil. Je to holt někdy k údivu co nám prohlížeče připraví, speciálně tedy IE.

Díky i za vysvětlující popisy ke všemu vč. validátoru a na to překrytí textu se také podívám.

Takže podle všeho vyřešeno ... čili už jen zbývá popřát všem co nejméně problémů s prohlížeči ...

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

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