background-attachment a FireFox

[icemanwlkp]

Witam dlaczego ta nowoczesna przeglądarka zle interpretuje zapis background-attachment:fix , zamiast przyjmować pozycje danego elementu to [ort]przesówa[/ort] tło przykład http://n.nasghar.net pod IE wszystko działa .

[Tomek]

nieprawda.
U mnie zarówno pod operą9.2, pod ie7, pod ff2 i pod ff3.0 wyświetla się identycznie - czyli z zdublowaną rączką...
Masz w tym kodzie tak zamieszane z pozycjonowaniem że naprawdę ciężko się połapać... A strona w sumie prosty layout ma... nie wymagający aż takich zabaw z pozycjonowaniem.... Po prostu - pomysł dobry - ale wykonanie zamieszane - <edit>niejako przerost formy nad treścią... (divitis i stosowanie dość dziwnych rozwiązań, gdy istnieją o wiele prostsze i pewniejsze)
poza tym - ff jest przeglądarką która jest o niebo nowocześniejszą od IE (jakiejkolwiek wersji) w interpretacji CSS.
</edit>

zrzuty:
IE7

Opera

Firefox


edit - przenoszę we właściwe miejsce...

[icemanwlkp]

A [ort]zwycięscą[/ort] jest IE 6
zrzut
[Proszę nie wklejać tak dużych zdjęć - moderator]
Proszę rozwinąć przerost forum nad treścią i co niby jest namieszanie i jakie to kolega poleca prostsze formy ( zaznaczam ,że flash odpada ) .

Kod: Zaznacz cały

 <div id="strona">
<div id="kolumnaa">
   <div id="logo">
 </div>
 <div id="kula"><img id="obrazek_w_kuli" alt="obrazek" src="/img/kula.gif" width="218" height="218"/>
 </div>
 <div id="fader"><img id="obrazek_fader" alt="obrazek" src="/img/kula.gif" width="218" height="218"/></div>
 <div id="menu"><img alt="obrazek" src="/img/menu.gif" width="182" height="300" usemap="#KulaMap"/>
 </div>
 <div id="kciuk"><img alt="obrazek" src="/img/kciuk.gif" width="60" height="136"/>
 </div>
</div>
<div id="kolumnab">
 <div id="srodek">
 </div>
 <div id="skrolak" >**<img onmousedown="dragStart(event,'skrolak')" src="/img/s.gif" alt="brazek" name="suwak" width="20" height="20"/>**
 </div>
</div>
<div id="kolumnac">
<div id="bookup"><img alt="bookup" src="/img/3a.gif" width="390" height="68" onmouseover="scroll(1)" onmouseout="clearTimeout(autoscroll)" onmousedown="speed_faktor=turbo_speed" onmouseup="speed_faktor=normal_speed"/></div>
<div id="tekst">
<br/>
<br/>
<i><b>Nic, rozbłysk, osobowo¶ć, ¶wiatło, ciemno¶ć...</b></i><br/> CIACH
Cdn...
<br/><br/></div>
<div id="piorko"><img name="piorko" src="/img/3bb.gif" alt="obrazek" width="107" height="168"/></div>
<div id="mg"><img class="png" name="mglagora" src="/img/mg.png" alt="mglagora" width="390" height="10"/></div>
<div id="md"><img class="png" name="mgladol" src="/img/md.png" alt="obrazek" width="390" height="10"/></div>
<div id="bookdn"><img name="bookdn" src="/img/3c.gif" alt="obrazek" width="390" height="112" onmouseover="scroll(0)" onmouseout="clearTimeout(autoscroll)" onmousedown="speed_faktor=turbo_speed" onmouseup="speed_faktor=normal_speed"/></div></div>
<div id="kolumnad"></div>
</div>
<map name="KulaMap" id="KulaMap">
<area shape="rect" coords="51,14,135,50" href="/page/news.html" target="tekst" onmouseover='ustaw_obrazek_w_kuli(1)' onmouseout='ustaw_akualny_obrazek_w_kuli()' onclick='zmien_aktualny_obrazek_w_kuli(1)' alt="1"/>
<area shape="rect" coords="43,54,147,89" href="http://forum.nasghar.net" target="_blank" onmouseover='ustaw_obrazek_w_kuli(2)' onmouseout='ustaw_akualny_obrazek_w_kuli()' onclick='zmien_aktualny_obrazek_w_kuli(2)' alt="2"/>
<area shape="rect" coords="32,93,136,131" href="/page/world.html" target="tekst" onmouseover='ustaw_obrazek_w_kuli(3)' onmouseout='ustaw_akualny_obrazek_w_kuli()' onclick='zmien_aktualny_obrazek_w_kuli(3)' alt="3"/>
<area shape="rect" coords="22,133,132,173" href="/page/galeria.html" target="tekst" onmouseover='ustaw_obrazek_w_kuli(4)' onmouseout='ustaw_akualny_obrazek_w_kuli()' onclick='zmien_aktualny_obrazek_w_kuli(4)' alt="4"/>
<area shape="rect" coords="13,176,112,213" href="/page/team.html" target="tekst" onmouseover='ustaw_obrazek_w_kuli(5)' onmouseout='ustaw_akualny_obrazek_w_kuli()' onclick='zmien_aktualny_obrazek_w_kuli(5)' alt="5"/>
<area shape="rect" coords="5,216,170,268" href="/page/rekrutacja.html" target="tekst" onmouseover='ustaw_obrazek_w_kuli(6)' onmouseout='ustaw_akualny_obrazek_w_kuli()' onclick='zmien_aktualny_obrazek_w_kuli(6)' alt="6"/>
<area shape="default" nohref ="nohref" alt="0"/>
</map>
</body>
</html>


i plik css

Kod: Zaznacz cały

 /*body z zerowymi marginesami itd..*/
 body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #534f33;
 background-image : url(/img/tlo.jpg) ;  /*#faf8df */
 border: 0px;
 margin: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
 padding: 0px;
 overflow: hidden;
 border-spacing: 0px;
 }


/*************** LAYOUT ***************/


#strona {
 margin : auto;
 border : 0px;
 padding : 0px;
 width : 1024px;
 height : 614px;
 position : absolute;
 display : block;
 left :50%;
 margin-left:-512px;
 }
 
#kolumnaa {
 width : 424px;
 height : 614px;
 position : absolute;
 top : 0;
 left : 0;
 z-index : 1;
 }
 
#logo {
 width : 424px;
 height : 614px;
 position : absolute;
 background-image: url(/img/1.gif);
 top : 0px;
 left : 0px;
 z-index : 2;
 }
 
#kula {
 width : 218px;
 height : 218px;
 position : absolute;
 top : 205px;
 left : 24px;
 z-index : 3;
 }
 
#fader {
 width : 218px;
 height : 218px;
 position : absolute;
 top : 205px;
 left : 24px;
 display :none;
 z-index : 4;
 }
 
#menu {
 width : 182px;
 height : 297px;
 position : absolute;
 top : 205px;
 left : 242px;
 z-index : 3;
 }
 
 #kciuk {
 width : 60px;
 height : 136px;
 position : absolute;
 top : 300px;
 left : 62px;
 z-index : 5;
 }
 
#kolumnab {
 width : 30px;
 height : 614px;
 position : absolute;
 top : 0px;
 left : 424px;
 z-index : 1;
 }
 
#srodek {
 width : 30px;
 height : 614px;
 position : relative;
 background-image: url(/img/2.gif);
 top : 0px;
 left : 0px;
 z-index : 2;
 }
#skrolak {
 width : 20px;
 height : 20px;
 position : absolute;
 top : 0px;
 left : 0px;
 z-index : 12;
 visibility : hidden;
 }
 
#kolumnac {
 width : 390px;
 height : 614px;
 position : absolute;
 top : 0px;
 left : 454px;
 z-index : 1;
 }
 
#bookup {
 width : 390px;
 height : 68px;
 position : absolute;
 top : 0px;
 left : 0px;
 z-index : 2;
 }

#tekst {
 width : 390px;
 height : 434px;
 position : absolute;
 overflow: hidden;
 top : 68px;
 left : 0px;
 background-image: url(/img/3b.gif);
 background-attachment: fixed; /* tylko dla IE */
 z-index : 2;
 }


#bookdn {
 width : 390px;
 height : 112px;
 position : absolute;
 top : 502px;
 left : 0px;
 z-index : 2;
 }
 
#piorko {
 width : 107px;
 height : 168px;
 position : absolute;
 top : 334px;
 left : 283px;
 z-index : 3;
 }
 
#mg {
 width : 390px;
 height : 10px;
 position : absolute;
 top : 68px;
 left : 0px;
 z-index : 4;
 }

#md {
 width : 390px;
 height : 10px;
 position : absolute;
 top : 492px;
 left : 0px;
 z-index : 4;
 }

#kolumnad {
 width : 181px;
 height : 614px;
 position : absolute;
 top : 0px;
 left : 843px;
 background-image: url(/img/4.gif);
 z-index : 1;
 }
 


/* Kolory linkow na stronie */
a:link,a:active,a:visited { color : #000000; font-size: 12px;}
a:hover { text-decoration: None; color : #000000; }

/*Klasa domyslna zero bez marginesow odstepow itd. */
table,td,tr,img,div
{
 border: 0px;
 margin: 0px;
 padding: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 border-collapse: collapse;
 border-spacing: 0px;
 }


[/code]

[Tomek]

Przyjrzyj się dokładnie swojemu kodowi.
Strona owszem jest w divach... ale IMO to dalej tabelkowatość.
Zamiast stosowania wszędzie position, w którym dość łatwo jest się pogubić co jest absolute, co relative a co fixed.... przy założeniu że IE 6 ma solidne problemy ze zrozumieniem position (zgodnie z tym co mówi specyfikacja CSS - a nie zgodnie z tym co wyobraża sobie webmaster) - nie jest to najlepsze rozwiązanie. Poczytaj może troszkę o czymś takim co się nazywa float. Częściej też powinieneś zamiast stosowania <div><img> stosować po prostu div z tłem...
Na dodatek - menu masz oparte o <map>... zobacz jak to np. wygląda z wyłączonymi obrazkami... a wystarczy ciut pomyśleć i bez problemu ładnie ostylowujesz menu na liście ul/li.
A widziałeś np. jak strona wygląda bez obrazków? albo po powiększeniu tekstu...
A tą dublującą się rączkę masz po prostu nieprawidłowo ustawioną...

Jak to zrobić prawidłowo? (tzn - rozwiązać ten problem, nie problem ogólny ze stroną - do tego dostałeś full wskazówek)
Zrezygnować z tego
background-attachment: fixed; /* tylko dla IE */
bo jak na razie - nie jest to tylko dla IE - tylko dla wszystkich przeglądarek (usuń i zobacz jak działa na tych które testowałem). Jeśli chcesz korzystać z jakiś hacków dla IE rób to umiejętnie - najlepiej poczytaj o komentarzach warunkowych. Proste, skuteczne w 100%

[diablownik]

Background-attachment raczej nie jest tu winne, bo Firefox (jak i inne przeglądarki zresztą też) obsługuje tę własność już od dawna. Radziłbym więc zastanowić się nad tym, co napisał już tomasiek

Swoją drogą: przed prawym ukośnikiem zamykającym znacznik zaleca się (choć nie wymaga) wstawianie spacji, a więc np. <br /> zamiast <br/>. A jeśli już umieszczasz opcjonalny prolog XML na początku, to wstaw w nim kodowanie. Ja bym go w ogóle wywalił, bo IE się krztusi widząc go.