Autor Zpráva
romat2
Profil
Na stránce http://romat2.php5.cz/test.html jsem připravil jednoduchou ukázku, na které se dá demonstrovat mizející background. Pokud jsou řádky zobrazené nezalomené, pak se u obou zobrazí bitmapa poznámky. Pokud však velikost okna zmenším tak, že se řádky zalomí, v prvním případě bitmapa pozadí zmizí. Problém se vyskytuje na IE6 i IE7, FF je v pořádku. Nevíte někdo, co s tím?

Dík, Roman

Zdroj stránky:

<html>
<head>
<title>Testovací stránka</title>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1250' />
<style type='text/css'><!--
.note {
font-style:italic;
color:#666;
background-image:url(note.gif);
background-position: 0 .2em;
background-repeat:no-repeat;
padding-left:1em;
}
--></style>
</head>
<body>
<p>Nějaký text před spanem <span class='note'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
<p><span class='note'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
</body>
</html>
YoSarin
Profil
Je to tímhle:
Span se vykreslí na dva řádky, tím pádem začíná hned u kraje stránky (na tom druhém řádku) a obrázek na pozadí se vykreslí 0.2em od levého okraje stránky a schová se pod text před spanem...
YoSarin
Profil
Tak mě ten problém celkem zaujal a nevykoumal jsem nic...
Obrázek se neshovává za předcházející text, jen je napozicován mimo ten span (to samé se stane pokud se tomu spanu dá např. margin zleva 1em a řádek se zalomí)
Chtělo by to někoho, kdo se v CSS vyzná přeci jen o něco (o něco dost) víc než já...
romat2
Profil
Já jsem mezitím zjistil, že nejde vysloveně o problém IE, jen o jinou implementaci. Specifikace CSS 2.1 říká tohle:

"The tiling and positioning of the background-image on inline elements is undefined in this specification. A future level of CSS may define the tiling and positioning of the background-image on inline elements."

Nastavení podle přání webdesignera umožňuje až CSS 3, která definuje vlastnost 'background-break'. IE se chová tak, jakoby bylo nastaveno background-break:bounding-box, zatímco v mém případě bych potřeboval background-break:continuous (tak funguje FF).

Jinými slovy, v současné době je tento problém na úrovni CSS neřešitelný.

Roman
habendorf
Profil
Jinými slovy, v současné době je tento problém na úrovni CSS neřešitelný.

Ale ne. Máš to ve standardu nebo quirku?

pro quirk: .note {height: 1em;}

pro standard: .note {zoom:1;}
YoSarin
Profil
<OT>
Milý deníčku
Dnes jsem opět zjistil jak málo toho vím. Ach jo, bude to mít někdy konce? Nejdřív jsem zjistil, že Lunetic jsou out, pak přišel ten šok s Backstreet Boys a teď tohle... :'-( Co to bude příště? Zjistím snad že Tokio Hotel není nejlepší punková skupina všech dob? TO bych nepřežil... :'-( Sbohem krutý světe...
Tvůj Yo'Sarinek
</OT>
Pardon, jsem si to nemoh odpustit

habendorf
- zase jsem o něco chytřejší :-)
habendorf
Profil
YoSarin: To jsou takový strašný náhody, taky jsem netušil, ale zrovna před chvílí jsem úplnou náhodou narazil na http://www.satzansatz.de/cssd/wrappinglinkbg.html , je to tam hezky popsaný.

Jinak dávat obrázek na background inline prvků je vždycky o ústa a je nejlepší se tomu vyhnout. Např. zmenším písmo v prohlížeči, prvku se sníží "výška" a obrázek se ořízne. "Výška" je naschvál v uvozovkách, protože inline prvek de facto žádnou výšku nemá.
romat2
Profil
habendorf:
height jsem zkoušel (a nefungoval) a o zoomu jsem do dneška nevěděl (jak bych mohl, když se dívám jen do specifikace standardu). Díky moc.

Roman
Toto téma je uzamčeno. Odpověď nelze zaslat.