bizzarrie dei browser

[joey santiago]

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...

maledetto 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:

e fa schifo in opera...


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...

cioé non carica l'immagine di sfondo del div footer e non fa flottare a destra l'immagine... perché??

[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

<div align="left">

[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?