ie6 e immagine sfondo menù al 100%

[luwal]

Ciao a tutti, mi sono appena iscritto perché girando la rete per l'ennesima volta in cerca di soluzione al mio problema sono incappato in questo forum dalla pagina di onsitus.it.
Complimenti per il lavoro e la chiarezza esemplari!
Purtroppo però continuo a non trovare soluzione al mio problema, anche perché le parole per la ricerca sono comuni e forse non scelgo quelle giuste.
Sto rinnovando il layout del mio sito, colonna singola centrale con menù sulla destra. Nel menù ho inserito una immagine come sfondo. Tutto bene su firefox, safari e ie7, ma con il maledetto ie6 l'immagine non viene ripetuta per riempire la pagina fino in fondo e si ferma alla fine del testo.
Allego due immagini per chiarezza:

qui su firefox:


e qui su ie6


Come si vede l'immagine si blocca alla fine del logo, il bianco dopo è orrendo!
Non so come risolvere e non ho trovato nulla in rete.
Un aiutino?
Qui di seguito il css del menù:

#menu {
    position: absolute;
    overflow: auto;
    text-align: left;
    right: 0;
    top: 0;
    width: 170px;
    height: 100%;
    line-height: 1.5;
    border-left: 1px solid black;
    background: url(photos/IMG_0325_copy.jpg);
}

Grazie in anticipo!

[Onsitus]

Buonasera e benvenuto qui

nel tuo css hai:

body, html {
    margin:0;
    padding:0;
    height:100%;
}

???

[luwal]

Originally Posted by Onsitus

Buonasera e benvenuto qui

nel tuo css hai:

body, html {
    margin:0;
    padding:0;
    height:100%;
}

???

Ciao e grazie della celerissima risposta!
Ho questo:

html,body {
    margin: 0;
    padding: 0;
    background-color: black;
}

body {
    font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
    font-size: 76%;
    text-align: center;
    line-height: 1.5;
    height:100%;
}

in effetti il 100% si riferisce solo al body, non all'html...
Ho appena provato a cambiare spostando come dici tu, ma non cambia nulla...

Ti posto tutto il css, così ti fai un'idea:

html,body {
    margin: 0;
    padding: 0;
    background-color: black;
    height:100%;
}

body {
    font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
    font-size: 76%;
    text-align: center;
    line-height: 1.5;
}

#container {
    position: relative;
    width: 760px;
    margin: 0 auto;
    text-align: justify;
    background-color: white;
    border-left: 1px solid white;
}

#header {
    text-align: left;
    margin-left: 10px;
}

#main {
    margin-right: 185px;
    margin-left: 10px;
    height: 100%;
    text-align: justify;
}

#menu {
    position: absolute;
    overflow: auto;
    text-align: left;
    right: 0;
    top: 0;
    width: 170px;
    height: 100%;
    line-height: 1.5;
    border-left: 1px solid black;
    background: url(photos/IMG_0325_copy.jpg);
}

#footer {
    color: black;
    margin-right: 185px;
    text-align: center;
    font-size: x-small;
    padding-top: 15px;
    padding-bottom: 15px;
}

/**************************************************************/

/* content styles */

img {
    border: 0;
}

h1 {
    font-style: bold;
    margin: 0;
    font-size: 28px;
    padding: 0;
    padding-top: 5px;
}

h2 {
    font-style: italic;
    font-size: small;
    color: red;
    margin: 0;
    text-decoration: blink;
    padding: 0;
}

#visore table {
    background-color: #666666;
}

#visore textarea {
    width: 96%;
    font-size: small;
    font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
    text-align: left;
    line-height: 110%;
    padding: 5px;
}

#menu li {
    padding: 10px 0 0 0;
}

#menu a:link, #menu a:visited {
    display: block;
    text-decoration: none;
    color: black;
    width: 100%;
    font-size: small;
}    

#menu a:hover {
    background: #5d0048;
    color: #ff76ed;
    font-size: small;
}

#menu ul {
    margin: 2px 4px 2px 4px;
    padding: 0;
    list-style-type: none;
}

#footer a:link, #footer a:visited {
    text-decoration: none;
    color: #000cff;
    width: 100%;
}

#footer img {
    padding-top: 15px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0;
}

#footer a:hover {
    color: #FF0000;
}

Io ODIO ie6!!!
Ed è pure il più diffuso al mondo, peggio di un virus...
Se hai qualche idea, provo al volo...
Grazie davvero

PS: ma mettere # o il punto al suo posto è lo stesso?

[Onsitus]

Ti darò ragione riguardo IE6 (mettici pure 7 e 8).

Suppongo che il tutto sia dentro il div 'container', no?

In quel caso li deve dare height:100%;

Qui trovi la differenza tra l'uso del puntino (le classe) e # (nome identificativo):
Selettori css, classe, id, pseudo-classi e pseudo-elementi - CSS e CSS3 blog con tutorials e risorse per css3 e css

[luwal]

Ho fatto un cambiamento veloce, in effetti ora quasi funziona!
Il menù ha l'immagine dello sfondo fino a fine pagina, peccato che quando si scrolla la pagina verso l'altro, la parte nascosta che pian piano appare è bianca!

Mah, io proibirei ie6/7/8/9/10 per legge...
Ora devo scappare, treno in partenza, appena riesco faccio qualche tentativo in più e mi leggo la guida che mi hai linkato.
Grazie ancora!

[luwal]

Cambiamento di programma, lavori sulla linea, autocorsa sostituiva e 3 ore e mezza/4 ore per fare 100km...

Preferisco inquinare e spendere in benzina e vado in macchina in un terzo del tempo, così ne ho approfittato e fatto un po' di lavoro.
Ho rivisto il css, pulito e levato cose che non mi servono più, ora è diventato questo:

html,body {
    margin: 0;
    padding: 0;
    background-color: black;
}

body {
    font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
    font-size: 76%;
    text-align: center;
    line-height: 1.5;
    height:100%;
}

#container {
    position: relative;
    width: 760px;
    margin: 0 auto;
    text-align: justify;
    background-color: white;
    border-left: 1px solid white;
    height:100%;
}

#header {
    text-align: left;
    margin-left: 10px;
}

#main {
    margin-right: 185px;
    margin-left: 10px;
    text-align: justify;
}

#menu {
    position: absolute;
    overflow: auto;
    text-align: left;
    right: 0;
    top: 0;
    width: 170px;
    line-height: 1.5;
    border-left: 1px solid black;
    background: url(photos/IMG_0325_copy.jpg);
    height: 100%;
}

#footer {
    color: black;
    margin-right: 185px;
    text-align: center;
    font-size: x-small;
    padding-top: 15px;
    padding-bottom: 15px;
}

/**************************************************************/

/* content styles */

img {
    border: 0;
}

h1 {
    font-style: bold;
    margin: 0;
    font-size: 28px;
    padding: 0;
    padding-top: 5px;
}

h2 {
    font-style: italic;
    font-size: small;
    color: red;
    margin: 0;
    text-decoration: blink;
    padding: 0;
}

#visore table {
    background-color: #666666;
}

#visore textarea {
    width: 96%;
    font-size: small;
    font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
    text-align: left;
    line-height: 110%;
    padding: 5px;
}

#menu li {
    padding: 10px 0 0 0;
}

#menu a:link, #menu a:visited {
    display: block;
    text-decoration: none;
    color: black;
    width: 100%;
    font-size: small;
}    

#menu a:hover {
    background: #5d0048;
    color: #ff76ed;
    font-size: small;
}

#menu ul {
    margin: 2px 4px 2px 4px;
    padding: 0;
    list-style-type: none;
}

#footer a:link, #footer a:visited {
    text-decoration: none;
    color: #000cff;
    width: 100%;
}

#footer img {
    padding-top: 15px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0;
}

#footer a:hover {
    color: #FF0000;
}

Se la proprietà
height:100%;
la metto anche sotto "html" mi fa casino con firefox, devo metterla solo sotto "body".
In ogni caso con ie6 non c'è speranza, mi renderizza (si dice così?) lo sfondo del menù solo per quella che è l'altezza della finestra: se riduco l'altezza della mia finestra, la porzione di sfondo menù che appare diminuisce, se l'aumento, aumenta...
In ogni caso è meglio di prima, fino a che non si scrolla la pagina il layout è salvo...
Non invidio voi web designer...

[Onsitus]

Buongiorno

non abbandonare cosi velocemente...si vince sempre contro le forze del male.

Ho il tuo css ma mi da anche la tua struttura di base html? O un link alla pagina (ancora piu facile). Cosi può diventare un gioco di indovinello!

[luwal]

Eccomi nuovamente...
Guarda, ti ringrazio sinceramente per la disponibilità e l'aiuto, spero di poter contraccambiare un giorno. Per ora lo faccio cercando di comportarmi in maniera analoga appena mi è possibile.
Ho lavorato insieme al mio "grafico" tutto il giorno di ieri, e oggi ho ripulito, testato, compatibilizzato il più possibile, per quante sono le mie competenze attuali.
Sono riuscito ad avere il sito uguale eccetto che per questo cavolo di menù...
Se riusciamo a risolverlo, meglio, altrimenti al diavolo ie6, e la gente che lo usa farà meglio a evolversi!
Qui...
http://www.lucawaldner.com/nuovo_sito/index.html
...trovi il lavoro fatto fin'ora, ovviamente ancora incompleto, ma il problema del menù è evidente...
Visto che su firefox e safari gira benissimo, ho separato il css principale con uno dedicato per ie, anche per risolvere un problema di allineamenti, sempre col menù.
In caso tu notassi altre cose puoi dirmelo liberamente, ovviamente, offrirò da bere!

Un dubbio mi sorge rispetto ai .png: nella versione di ie6 che ho su una macchina virtuale il fix che ho messo funziona e interpreta le trasparenze, invece con la versione stand-alone scaricata da internet e che faccio girare su un XP reale no...
A chi do ragione?

[Onsitus]

Buonasera,

stavo guardando il tuo layout e ti propongo una soluzione del tutto più facile che dovrebbe andare bene per tutti...aggiungere l'immagine di sfondo al div #container invece del #menu (stesso risultato, no?)

Togliere in #container

background-color: white;

e metterci invece

background: white url(photos/IMG_0325.jpg) repeat-y right top;

Domani guarderò il tuo sito in più dettagli e ti faccio sapere per il resto.

[luwal]

Ciao!
Purtroppo il background del container è già occupato, cambia da pagina a pagina e lo inserisco con del css nella head...

Non so se si possono mettere due immagini nella stessa proprietà background del container, non credo, ho provato ma non funziona, ma magari si può in qualche modo.
Se l'unico modo è quello di mettere l'immagine del menù nel container, vorrà dire che sposterò le immagini che ora sono come background nel container a immagini normali, un po' di lavoro ma neanche troppo...