visualizzazione diversa i.e. firefox

lillop

visualizzazione diversa i.e. firefox

Salve

Come da oggetto in firefox la tabella centrale è più alta rispetto ad i.e.
Io la voglio come su i.e.


body {
background-image: url(sfondo.jpg);
background-repeat: repeat;
background-position: center;
}
#contenitore {
height: 600px;
width: 800px;
margin-right: auto;
margin-left: auto;
background-image: url(fiori.png);
z-index: 200;
}
#logo {
height: 70px;
float: left;
width: 40%;
}
#menu {
float: right;
height: 70px;
width: 60%;
}
#boxbianco {
background-color: #FFFFFF;
height: 400px;
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 150px;
}

claudioweb

Ciao

Vedere il codice css senza il relativo html è disorientante.

Converrebbe postare l'url di una pagina che presenta il problema.

lillop

Ciao, ho caricato tutto qui utenti.lycos.it/lillop81/
logicamente non ho ancora ottimizzato la png con i fiori è un pò pesante da caricare

claudioweb

Ciao, guarda non riesco a visualizzare bene la pagina nè in IE nè in FF. Praticamente non vedo nulla e il codice è sporcato da Lycos, quindi non posso vedere il codice puro.

Prova a impostare tutti i mardini, i padding e i border degli elementi.
A partire dal body, magari impostandoli pari a 0.

Penso così potresti risolvere.

lillop

ho ricaricato tutto su un dominio di un amico senza sponsor.
battitinotturni.com/beta/index.html aggiungento www

claudioweb

Ciao

finalmente ho capito di che problema parlavi.

Dovrebbe bastare sostituire il margin-top:150px; del #boxbianco con un semplice top:150px;

lillop

Nulla, puoi vedere il risultato guardo il sito.
Ho provato anche ad aumentare il top da 150 a 250, ma rimane bloccato il box

claudioweb

Aggiungi anche position:relative; al box bianco e al contenitore.

lillop

Nulla ancora, ho caricato tutto sul nuovo link
battitinotturni.com/giorgiotave/index.html (aggiungi www)

Ecco la foto della bozza provvisoria di come deve combaciare lo sfondo fiori con i bordi della boxbianca
battitinotturni.com/giorgiotave/bozza.jpg (aggiungi www)

megrez

Prova ad applicare questo codice css poi mi dici..

@charset "utf-8";
body {
background: url(sfondo.jpg) top left repeat;
}
#contenitore {
position: absolute;
top: 50%;
left: 50%;
background: url(fiori.png) transparent bottom left no-repeat;
width: 800px;
height: 600px;
margin-top: -300px;
margin-left: -400px;
}
#logo {
float: left;
width: auto;
height: auto;
margin: 100px auto 0px 100px;
}
#menu {
clear: right;
float: right;
height: auto;
width: auto;
margin: 100px 100px 0px auto;
}
#boxbianco {
background: #FFFFFF;
clear: both;
float: left;
border: 2px black solid;
height: 400px;
width: 600px;
margin: 0px auto 50px 100px;
}

lillop

Grazie megrez per avermi risposto

Se guardi la bozza, noterai che il fiore in basso a destra è sopra il boxbianco il resto viene sotto al box.
Per tanto per la boxbianca utilizzo in sfondo un'immagine larga 618.
Se provo ad allargare il box bianco va male.
In più se provo ad aggiungere 2 rettangoli (logo e munu) sul boxbianco riscontro problemi

megrez

Beh, mi pare ovvio. Ai link che hai postato ho trovato solo lo sfondo e i fiori, perciò non potevo sapere le misure giuste.
Per modificare un css bisogna aver ben presente in contenuti.
Mi ero accorto che il box bianco era mezzo sopra e mezzo sotto rispetto ai fiori, ma essendo questi un'immagine unica non è proprio possibile a meno di salti mortali.
Se sei interessato/a, mandami il tutto che te lo sistemo come si deve.

lillop

Ti ho inviato un pm grazie tante

megrez

ho appena risposto.. fammi sapere al più presto.

claudioweb

Ciao
Penso sarebbe opportuno e proficuo per altri utenti continuare la vostra discussione in questo topic, anziché utilizzarlo per notificare l'invio o la ricezione di messaggi privati

Quantomeno postando le eventuali soluzioni.

Tra l'altro io avevo testato il codice con le modifiche da me indicate e tutto funzionava

megrez

@claudioweb said:

Ciao
Penso sarebbe opportuno e proficuo per altri utenti continuare la vostra discussione in questo topic, anziché utilizzarlo per notificare l'invio o la ricezione di messaggi privati

Quantomeno postando le eventuali soluzioni.

Tra l'altro io avevo testato il codice con le modifiche da me indicate e tutto funzionava

La soluzione è quella postata poco più su con relative modifiche alle misure a seconda delle immagini originali.