bizzarrie dei browser

joey.santiago

bizzarrie dei browser

voi mi sapreste dare una motivazione alla differenza di visualizzazione tra firefox e explorer di questo menu?
in explorer il testo è quasi centrato:

mentre in firefox sta dove vorrei, cioé a sinistra:

pensavo potesse essere un problema di box model, ma anche provando a definire margin e padding= 0 non cambia nulla...

xmaledetto IE!!!

però me la prendo anche con firefox... aggiunge degli spazi per me assurdi alle liste! anche in questo caso... il padding-top è di 1em (giusto in IE), mentre firefox lo abbassa ben di più. Per ottenere la visualizzazione che vorrei in firefox devo mettere padding-top:0.

joey.santiago

altra trovata...
questo è il css:

div#footer{
padding: 0.5em 20px;/allinea il testo con i link in navigation/
background: url(footer.jpg) top left;
background-color:#fff;
color: #133156;
clear:left;
float:left;
}
div#footer p{
display:block;
position:absolute;
}
div#footer a img{
display:block;
float:right;
border:0;
}
il footer viene mostrato correttamente da firefox ed IE:
[URL=http://imageshack.us]
e fa schifo in opera...
[URL=http://imageshack.us]

ma la cosa più divertente è che negli ultimi tempi ho letto un sacco di cose sui css e questi problemi non li ho mai trovati...

haccah

Oltre alle immagini, ti conviene postare anche il codice (della pagina e i CSS), sennò non riusciamo a vedere bene i problemi.

ciaO

joey.santiago

certo... ecco i codici del secondo problema:
xhtml:

<p>Federico Prato matricola:296112</p>
<a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>

e questo il css:

div#footer{    
    padding: 0.5em 20px;/*allinea il testo con i link in navigation*/
   background: url(footer.jpg) top left;
    background-color:#fff; 
    color: #133156;
    clear:left;
    float:left;
    }
div#footer p{
    display:block;
    position:absolute;
}
div#footer a img{
    display:block;
    float:right;
    border:0;
}

joey.santiago

e questo è quello relativo al primo.
xhtml:

<div id="navigation">
        <ul>
<li id='activelink'>home</li>
<li><a href='attivita.php' accesskey='A'>attività</a></li>
<li><a href='cucina.php' accesskey='C'>cucina</a></li>
<li><a href='sistemazione.php' accesskey='S'>sistemazione</a></li>
<li><a href='immagini.php' accesskey='I'>immagini</a></li>
<li><a href='prenotazioni.php' accesskey='P'>prenotazioni</a></li>
<li><a href='negozio.php' accesskey='N'>negozio</a></li>
<li><a href='registrazione.php' accesskey='R'>registrazione</a>
</li><li><a href='contatti.php' accesskey='O'>contatti</a></li>
<li><a href='arrivare.php' accesskey='M'>come arrivare</a></li>
</ul>        </div>

e css:

div#navigation{
    float: left;
    margin:0;
    padding:1em 0; 
    width: 200px;
    background: transparent;
    line-height:1.3em;
    text-align: left;
    }
div#navigation ul{
    list-style-type: none;
    padding:0 5px;
    }
div#navigation li{
    padding-left:15px;/*fa spazio all'icona che segnala l'activelink*/
    }
div#navigation a{
    color:#133156;
    display:block;
    text-decoration: none;
    }
 div#navigation a:focus, div#navigation a:hover, div#navigation a:active{    
    background-color: #133156;
    color:#a1baab;
    }
div#navigation li#activelink{
    color:#133156;
    background: url(icona.gif) left center no-repeat;
    font-weight: bold;
    text-decoration: none;
    }

haccah

Io proverei così... non so se però può andare bene...

<p>Federico Prato matricola:296112</p>
<a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" align="right"/></a>
``` e questo il css:

div#footer{
padding: 0.5em 20px;/allinea il testo con i link in navigation/
background: url(footer.jpg) top left;
background-color:#fff;
color: #133156;
}
div#footer p{
text-align:left;
display:block;
}
div#footer a img{
display:block;
border:0;
}

Poi ho accorciato anche il css. Mi sembrava ci fossero cose un poco inutili (secondo il mio parere, ma magari mi sbaglio, non conosco l'xhtml).

joey.santiago

grazie mille... la visualizzazione non è ancora perfetta, ma almeno è la stessa su tutti i browser! il problema maggiore è che l'attributo align non si può usare in xhtml strict... ahimé, per passare l'esame il codice deve essere xhtml strict valido.

tenterò altre vie, se no al diavolo opera!

joey.santiago

con questo codice funziona quasi bene il footer di cui dicevo prima, ma dà ancora problemi in opera.

<p>agriturismo villar - 2006</p>
<a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" align='right' /></a>

div#footer{    
    padding: 0.5em 20px;/*allinea il testo con i link in navigation*/
       background: url(footer.jpg) top left;
    background-color:#fff; 
    color: #133156;
     float:left;
    }
div#footer p{
    display:block;
     float:left;
}
div#footer a img{
    display:block;
    border:0;
     float:right;
}

in pratica il paragrafo è flottante a sx, l'immagine a destra ed il div che le contiene flotta a sinistra per espandersi e contenerle. In firefox ed IE funziona bene, come da standard, ma opera fa questa strana cosa...
[URL=http://imageshack.us]
cioé non carica l'immagine di sfondo del div footer e non fa flottare a destra l'immagine... perché??cry:

haccah

Magari perchè pensa che il dv deve essere corto.

Prova ad aggiungere width:100% in div#footer.

Un'idea:
Per l'immagine, prova a mettere
margin-left:80% (o un numero in px)
Così, anche se è un espediente, il margine sposterà l'immagine fino a destra. Dovrebbe funzionare, che ne pensi??

joey.santiago

ottima idea!

così va meglio, in FF e IE funziona, ma opera continua a dare problemi... vabbé, fatti suoi... al limite chiederò al mio prof in sede d'esame.

Grazie!

sanvy

hai provato a metterci nel cod HTML il tag [HTML]<div align="left">[/HTML]:?

joey.santiago

niente da fare... neanche con div align="right" mi sposta 'sta roba a destra!

è un mistero. oltretutto opera non dovrebbe essere uno dei browser standard per eccellenza?