Ciao a tutti,
sono una newentry di questo forum.
Ho avuto la brillante idea (non sono masochista) di voler imparare a tutti i costi a costruire i siti tableless....
Ho seguito le lezioni che ci sono su questo sito e mi sono messa a smanettare...
OVVIAMENTE ho dei problemucci e nonostante abbia fatto numerose prove non riesco a risolverli. Vi premetto che non sono l'oscura siglora dei css e che quindi i miei problemucci potrebbero essere delle cavolatine
Ecco i miei problemi:
1) Header del sito: la testata del sito dovrebbe essere una porzione orizzonatale sono affiancati un logo testuale (h1) e un'immagine
div#header{background-color:#fff; width:720px; height:93px; margin: 20px;}
div#testata{float: right;}
div#logo{float: left;}
h1{padding: 35px 10px 35px 10px; font: bold 14px georgia, verdana, serif; text-align: left;}
Problema: Su mozilla non viene applicato il margin in alto
[metto anche il container e body per completezza:
body{font: 11px Verdana, sans-serif; color:#333; line-height: 1.5; background: #FFFFFF; letter-spacing: 1px; }
/* Contenitore esterno */
div#container{position: relative; width: 760px; margin: 0 auto; text-align: left; background-color: #EDEBD5;}
]
2) Ho fatto questa regola per il tag h2
h2{text-align: center; font: 11px Georgia, serif; padding: 7px 0 5px; margin: 2px 0 2px; background: #000000; border: 1px dashed #B2B2B2; }
Problema: Mozilla mi visualizza tutto perfettamente IE invece NN visualizza né il background né tantomeno il bordo tratteggiato. Ho pensato che fosse dovuto al tag h2 e quindi ho provato a creare un ulteriore div con le proprietà sopra esposte (tranne quelle del testo che ho lasciato a h2) ma il risultato non cambia....
3) Parte di Navigazione
Le seguenti regole sono per la parte di navigazione
div#navigation{
position: absolute;
top: 135px; /*l' altezza dell' header*/
right: 10;
width: 170px; /*un po' di meno per evitare l' uso del padding*/
background-color: #fff;
border: 0px;
margin-left: 570px;
}
#navigation ul {margin: 0px;}
#navigation li {list-style-type: none; text-align: left; padding-left: 2px;}
#navigation li a{font: Georgia, "Times New Roman", Times, serif 11px; text-transform: capitalize; text-decoration: none; color: #000;}
#navigation li a:hover{background-color: #EDEBD5; border-bottom: 1px solid #6F6A2F;}
Problema: Con mozilla mi viene molto più padding di 2px
Grazie dell'attenzione e grazie a tutti coloro che mi vorranno dare una mano
P.S. (non c'entra niente con i css
Rispondi quotando
VVoVe: Ehm... sono riuscita a risolvere il problema del margine top della testata che in mozilla non veniva applicato... per diperazione ho aggiunto il bordo di un pixel all'header e magicamente mozilla ha rispettato il margine di 20 pixel che avevo settato nella regola dell'header... qualcuno mi sa spiegare perché??
