/w3c/ Styl background-image

w dziale Opera
daroc napisał(a):

Czy elementy inne niż TD, TABLE i DIV mają taki styl: background-image?
Spróbowałem zrobić taki styl dla SPAN... w Operze i IE działa, ale w Mozilli i Konqueror-ze już nie (nie ma żadnego tła).
Która przeglądarka nie stosuje się do standardów?

quiris napisał(a):

Zgodnie ze standardem http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-image background-image ma zastosowanie do wszystkich elementów. Tak mówi teoria. Praktyka zwykle jest inna wink Dlatego poproszę o adres problematycznej strony bądź kod strony, jeśli nie jest długi!

lockoom napisał(a):

Prawdopodobnie używasz też "background-attachment: fixed"... Z tego co pamiętam powodowało to problemy w Mozi.

quiris napisał(a):

Originally posted by lockoom
Prawdopodobnie używasz też "background-attachment: fixed"... Z tego co pamiętam powodowało to problemy w Mozi.

Jeśli, rzeczywiście użył ustalonego pozycjonowania tła, to mógł paść ofiarą nieznajomości zasady:

If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the document ('scroll').

Even if the image is fixed, it is still only visible when it is in the background or padding area of the element. Thus, unless the image is tiled ('background-repeat: repeat'), it may be invisible.



Po prostu rozmiary tego tła mogą być mniejsze niż rozmiar okna przeglądarki (viewportu) oraz ten <span> może znajdować się w miejscu którego rozmiar tego obrazka już nie obejmuje (zakładając, że domyślnie obrazek jest ustalony przy górnym lewym rogu okna przeglądarki).

Rozwiązaniem jest zdefinowanie właściowści: background-repeat: repeat

daroc napisał(a):

Adres strony: http://free.of.pl/d/daroc/_new - projekt, logo - walnąłem co miałem... smile
Żeby coś znaleźć, musiałbyś szukać 3 godziny... bigsmile

Styl przykładowego elementu SPAN, z którym jest problem:

SPAN.topcenter {width:86px; height:18px; background:#C7DBF9 url(graphic/top_center.gif); font-family:verdana; font-size:11px; font-weight:700; color:#003FC0; text-align:left; vertical-align:top; padding-left:1px}


Jak widać, nie używam background-attachment.
Obrazek graphic/top_center.gif ma wymiary 1x18 px.

quiris napisał(a):

Originally posted by daroc
Adres strony: http://free.of.pl/d/daroc/_new
Jak widać, nie używam background-attachment.
Obrazek graphic/top_center.gif ma wymiary 1x18 px.


No tak to teraz już wiadomo w czym rzecz. Mozilla ma całkowitą rację nie wyświetlając tych elementów. Zresztą Opera również nie wyświetlałaby ich, gdyby działała w trybie CSS1Compat, ale tak nie jest ponieważ ustawiłeś DTD dla tego dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> co wymusza w Operze tryb QuirksMode: http://www.opera.com/docs/specs/doctype/, który emuluje błędne zachowanie MSIE.

Zauważ, że dla owych spanów zdefinowałeś szerokość i wysokość, co przeglądarki powinny zignorować, ponieważ <span> jest elementem wewnętrznym (inline) i jako taki nie ma własności szerokości i wysokości: http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width i w efekcie ponieważ te spany są puste, dlatego mają szerokośc i wysokość równą zeru.

Zamiast tego spróbuj zastosować element <div>, któremu możesz nadawać własność width oraz height.

daroc napisał(a):

A czy nowy DIV obok drugiego nie spowoduje, że następny będzie w nowej linii?

Zresztą zamierzam zrobić całość w jednym pliku, nie rozdzielając każdego "okienka" na części - przydało mi się to przy tworzeniu strony, bo mogłem dowolnie zmieniać proporcje... np. wydłużyć jakiś pasek okienka, zwężając drugi ingerując jedynie w jeden plik CSS. Jednak gdy strona jest gotowa, lepiej połączyć wszystko w jak najmniejszą ilość plików. Będzie się wyświetlało dużo szybciej, szczególnie w IE - obecnie po każdym kliku na link (nawet już odwiedzony) widać, jak kolejne elementy się ładują (Opera wyświetla od razu). Ale pochwalę IE, że jak strona nie zawiera żadnych obrazków, to często wyświetla stronę szybciej niż Opera... ;o

lockoom napisał(a):

Originally posted by daroc
A czy nowy DIV obok drugiego nie spowoduje, że następny będzie w nowej linii?


Nie jeśli użyjesz "float".

daroc napisał(a):

Przy dwóch elementach OK... a jeśli mam trzy elementy? To jak?
<div style="float:left">a</div>
<div style="float:center">b</div>
<div style="float:right">c</div>
To nie działa jak trzeba...

BTW - czy pisanie np. <div style={float:left}> jest poprawne? Ostatnio spotkałem się z czymś takim...

qviri napisał(a):

<div style="float:left">

To jest poprawne.

quiris napisał(a):

Originally posted by daroc

b

Nie ma czegoś takiego. Sprawdź: http://www.w3.org/TR/1998/REC-CSS2-19980512/visuren.html#propdef-float

daroc napisał(a):

Nadal mam problem z tym DTD:
Jak zrobię
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
to wtedy pozycjonowanie elementów mi nie działa... znowu robię coś źle? :?

DIV.main {text-align:left; position:relative; margin:0 auto; width:815px}
DIV.logo {text-align:left; position:absolute; top:25px; left:0; margin:0 auto; width:815px}
DIV.menu_left {text-align:left; position:absolute; top:220px; left:0; margin:0 auto; width:150px}
DIV.menu_right {text-align:left; position:absolute; top:220px; left:665; margin:0 auto; width:150px}
DIV.content {text-align:left; position:absolute; top:220px; left:165; margin:0 auto; width:485px}

Strona działa na takiej zasadzie:
<div class="main">
<div class="logo"></div>
<div class="menu_right"></div>
<div class="menu_left"></div>
<div class="content"></div>
</div>

I okazuje się, że... logo wyświetla się dobrze, lewe menu też dobrze, a prawe menu i treść wchodzą na lewe menu.

PS. Już od dłuższczego czasu wqrza mnie, że Opera nie zawsze pobiera nowy plik ze stylami po włączeniu reload (musze odświeżać kilkunastokrotnie i jeszcze nie jestem pewien, że się nowy styl załadował... nie pomaga nawet wyłączenie cacheowania plików w opcjach). :[

quiris napisał(a):

Originally posted by daroc
Nadal mam problem z tym DTD:
Jak zrobię <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

Domel wykląłby Cię za taki DTD wink Nie ma HTML 4.0 jest HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DIV.menu_right {text-align:left; position:absolute; top:220px; left:665; margin:0 auto; width:150px}
DIV.content {text-align:left; position:absolute; top:220px; left:165; margin:0 auto; width:485px}

[/quote]Popatrz na left:665 oraz left:165. Nie zapomniałeś o czyms? Chyba px zabrakło. W CSS dodawanie jednostek jest obowiązkowe. To, że w trybie QuirksMode Opera emuluje błędne zachowanie IE i traktuje takie potworki bez jednostek jak wartości wyrażone w pikselach to inna (ciemna) historia.

PS. Już od dłuższczego czasu wqrza mnie, że Opera nie zawsze pobiera nowy plik ze stylami po włączeniu reload (musze odświeżać kilkunastokrotnie i jeszcze nie jestem pewien, że się nowy styl załadował... nie pomaga nawet wyłączenie cacheowania plików w opcjach). :[

[/QUOTE] A próbowałeś odświeżać z wciśniętym klawiszem CTRL?

daroc napisał(a):

quiris napisał(a)
Domel wykląłby Cię za taki DTD wink Nie ma HTML 4.0 jest HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


Więc dlaczego na podanej przez Ciebie stronie przykładowe DTD mają 4.00? p

quiris napisał(a)
Popatrz na left:665 oraz left:165. Nie zapomniałeś o czyms? Chyba px zabrakło. W CSS dodawanie jednostek jest obowiązkowe. To, że w trybie QuirksMode Opera emuluje błędne zachowanie IE i traktuje takie potworki bez jednostek jak wartości wyrażone w pikselach to inna (ciemna) historia.


Ekhm... nie zauważyłem, że nie podałem jednostki... ^^

quiris napisał(a)
A próbowałeś odświeżać z wciśniętym klawiszem CTRL?


Nie, ale zaraz spróbuję... (za kilka minut będzie update)

UPDATE: działa jakby sprawniej, ale:
1. I tak nie zawsze ładuje się nowy plik.
2. Dlaczego muszę odświeżać wszystkie strony, jeśli chcę odświeżyć tylko jedną?