compatibilità css

[OzzioZio]

Ciao a tutti,

sto creando un sito utilizzando per la prima volta i css e quindi sono un pò inesperto

Ho fatto un layout a 2 colonne con header e footer,
nel div#main sfondo fisso e overflow: auto.

Utilizzo Avant11.5/ie6 e testavo man mano il sito utilizzando solo questi browser,
ed era tutto ok.

Ma ora che ho testato la pagina con ie7, firefox2 e opera9, oltre ad uno spostamento dei tasti del menù verso l'alto c'è lo sfondo fisso che dovrebbe appartenere solo al
div#main che viene 'multiplato'.

Come posso ovviare a questo inconveniente?
Esiste qualche istruzione per farlo riconoscere come 'sfondo fisso' del solo div#main anche agli altri browser o devo rivedere lo sfondo?

E per quanto riguarda il menu è lo
<SPAN STYLE="position:relative; top:116px; ">
che non viene accettato dagli altri browser?

Un grazie anticipato a chi volesse aiutarmi.

Ciao
Zio


Pagina sito testata:

http://www.jianlongbaguazhang.it/home.html

css:

html {height:100%;
margin:0px;
padding:0px;
SCROLLBAR-FACE-COLOR: #000033;
SCROLLBAR-HIGHLIGHT-COLOR: #333333;
SCROLLBAR-SHADOW-COLOR: #333333;
SCROLLBAR-3DLIGHT-COLOR: #333333;
SCROLLBAR-ARROW-COLOR: #ffffcc;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #333333;
SCROLLBAR-BASE-COLOR: #333333;
}

body { height: 100%;
background: #000000;
font: 12px Verdana,arial,sans-serif,Helvetica;
color: #000000;
text-align: center;
text-decoration: none;
margin: 0px;
padding: 0px;
}

DIV#container {
position: relative;
background-color:#000033;
margin: 0px auto;
width: 760px;
height: 630px;
text-align:left;
}

div#top {
background-image:url(top.jpg);
text-align:center;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
height: 100px;
width: 760px;
}

div#menu {
background-image:url(menu.jpg);
float:left;
text-align: center;
width: 150px;
height: 500px;
margin: 0px;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
}


div#main {
background-image:url(main.jpg);
background-attachment:fixed;
height: 500px;
width: 610px;
float: right;
overflow: auto;
text-align: left;
margin:0px;
padding: 0px;
}

div#bottom {
background-image:url(footer.jpg);
clear:both;
height: 50px;
width: 760px;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
}

.titolo {
font-family : Helvetica, Arial, sans-serif,;
font-size : 24px;
font-weight:bold;
color : red;
text-align:center;
text-decoration: none;
}

.classic {
font-family : Helvetica, sans-serif, Arial,;
font-size : 12px;
color : #000000;
padding-left:30px;
padding-right:25px;
text-align:left;
text-decoration: none;
}

.tit_nolink {
font-family : Helvetica, sans-serif, Arial,;
font-size : 14px;
color : #000066;
padding-left:10px;
padding-right:25px;
font-weight:bold;
text-align:left;
text-decoration: none;
}

.bottom {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #cccccc;
text-align:center;
text-decoration: none;
}

[OzzioZio]

Ho provato, ma così facendo scompare del tutto l'immagine di sfondo VVoVe:

[OzzioZio]

Idem.... ..non si vede più lo sfondo

[OzzioZio]

Grazie comunque!
Anche io sono poco esperto e non so cosa risponderti circa il tuo problema con il z-index

[OzzioZio]

Modificando nel css il valore del background-attachment da fixed a inherit ho l'effetto contrario, vedo lo sfondo fisso con ie7, ff e opera mentre con ie6 e avant lo sfondo scorre con il testo...



div#main {
background-image:url(main.jpg);
background-attachment: inherit;
height: 500px;
width: 610px;
float: right;
overflow: auto;
text-align: left;
margin:0px;
padding: 0px;
}

Please help me... :rollo:

[fcaldera]

[premettendo che non uso mai sfondi fixed per cui potrei dire un'inesattezza] fai una prova così...

div#main {
background-image:url(main.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
....

}

[OzzioZio]

lo sfondo rimane sempre a posto con ie6 e Avant,

grazie al comando

background-attachment:fixed;

mentre con ff, opera e ie7 grazie a

background-repeat: no-repeat;

non viene più multiplato.

Però usando questi ultimi 3 browser la posizione dello sfondo(main.jpg), che dovrebbe

essere del div#main, cambia e viene nascosto in parte sotto il div#top e il

div#menu

[OzzioZio]

Scusate,

rivedo il problema in modo più mirato...

Vorrei assegnare un immagine come sfondo fisso al DIV principale del sito,

quello dove scorrerà il contenuto del sito, ed ho un problema con il background-attachment

e la relativa visualizzazione nei diversi browser.

Utilizzando questo css:

div#main {
background-image: url(main.jpg);
float: right;
height: 500px;
width: 610px;
overflow: auto;
text-align: left;
margin: 0 auto;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
}

Vedo lo sfondo fisso nei browser ff, opera e ie7.
(mentre con ie6 scorre insieme al testo)

Per vederlo fisso con ie6 e avant devo aggiungere:

background-attachment:fixed;

ma in questo caso nei 3 browser sopra citati non rispetta più il DIV e mi viene spostato nell'angolo in alto a sx dello schermo e multiplato. (il fatto che viene multiplato è possibile toglierlo usando il background-repeat:no-repeat, ma questo ha poca importanza poichè lo sfondo singolo viene sempre e comunque visualizzato in alto a sx)

Come posso renderlo fisso in tutti i browser?

Ciao
Zio

[OzzioZio]

A posto!

A) ho sistemato tutti gli errori del codice xhtml, controllando con il validatore

http://validator.w3.org/

e aggiustando uno ad uno tutti gli errori che c'erano.

B) ho sistemato gli errori del css controllando con il validatore

http://jigsaw.w3.org/css-validator/

e aggiustandoli.

C) navigando e scoprendo i vari sistemi per rendere visualizzabile al meglio il sito su diversi

browser ho scelto la via del commento condizionale per iexplorer ed ho creato un secondo

css da usare appositamente con le versioni di ie.

<!--[if IE ]>
<link rel="stylesheet" type="text/cSS" href="iebagua.css">
<![endif]-->

:quote: :quote:

Stanotte posso dormire tranquillo!