Ciao a tutti,
sto approfondendo l'argomento programmazione web utilizzando come cavia me stesso.
Ho appena riscritto da capo il mio sito. Lo sto programmando linea per linea su un mac utilizzando BBedit.
Per il layout cerco per quanto posso di utilizzare i CSS e vedo correttamente su BBedit, Firefox, Safari le mie impostazioni.
Stamani per curiosità l'ho aperto su un PC con Internet Explorer e sembra non interpreti correttamente il CSS ignorando la formattazione del testo.
C'è un codice che devo aggiungere nel CSS per visualizzare correttamente il contenuto pure in IE?
Per dovere di cronaca devo farmi pubblicità e mettere il link al sito in questione:
www.ecciproduzioni.com
il CSS che sto utilizzando in genere è così:
-----
/* regole per il corpo del documento */
body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Courier New, Arial, Helvetica, sans-serif; /* dichiarazione del font utilizzato */
font-size: 12px;/* Terza dichiarazione */
color: black; /* Colore del font */
background-color: #c3be89; /*colore di sfondo di cornice attorno alla pagina leggibile*/
text-align: center; /*centra in IE 5.x */
}
div#container{
width: 760px;
position: relative;
margin: 0px auto; /*centra negli altri browsers*/
text-align: left; /*ripristina l' allineamento*/
background-image: url(grey_bg200.gif);
background-repeat: repeat-y;
background-color: white;
}
div#header {
margin: 20px;
padding: 0px /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
background-color: white;
margin: 0;
padding: 0;
background-color: white; /*applico questo bg per fare in modo che il colore del navigation non vada anche qui*/
border-bottom: 0px solid white; /*creo una striscia dello stesso colore dello sfondo per evitare che l'immagine ripetuta del naivigation vada a trovarsi qui*/
}
div#header2 {
margin: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0px /* using padding instead of margin will allow you to keep the element away from the edges of the div */
background-color: black;
margin: 0;
padding: 0;
background-color: none;
}
div#navigation {
float:left;
width: 200px;
padding-top: 10px;
margin-top: 0;
}
div#content{
margin-left: 250px
}
div#footer{
clear: both;
text-align: right;
padding: 1px;
background-color: black;
}
div#footer2{
clear: both;
text-align:center;
padding: 10px;
border-top: 1px solid white;/*creo una striscia dello stesso colore dello sfondo per evitare che l'immagine ripetuta del naivigation vada a trovarsi qui*/
background-color: white; /*applico questo bg per fare in modo che il colore del navigation non vada anche qui*/
}
/* Titolo di primo livello */
h1 {
color: #bc1b0a;
font:20px/2 Verdana, Courier new, sans serif;
font-weight: 700;
line-height: 10px;
}
/* Titolo secondo livello*/
h2 {
color: #666666;
font:12px/2 Verdana, Courier new, sans serif;
font-weight: 700;
line-height: 10px;
}
/* Titolo secondo livello*/
h3 {
color: #bc1b0a;
font:12px/2 Verdana, Courier new, sans serif;
font-weight: 700;
line-height: 10px;
}
/* Blocco di testo annidiato */
span01 { /* per i titoli delle info techniche */
color: black;
font-weight: 700;
}
span02 { /* per il sottotitolo di avvertimento in piccolo sotto ai video */
color: #666666;
font: 10px/2 Verdana, Courier new, sans serif;
line-height: 10px;
}
span03 { /* per il sottotitolo di avvertimento in piccolo sotto ai video */
color: black;
font: 11px/2 Verdana, Courier new, sans serif;
line-height: 10px;
}
span04 { /* per il sottotitolo della lista lavori a sinistra */
color: #666666;
font: 9px/2 Verdana, Courier new, sans serif;
line-height: 10px;
}
span05 { /* per il commento PayPal sull colonna a sinistra */
color: black;
font: 9px/2 Verdana, Courier new, sans serif;
line-height: 10px;
}
span06 { /* per la scritta in nero della lista a sinistra della pagina attuale */
color: black;
font: 11px/2 Verdana, Courier new, sans serif;
line-height: 10px;
font-weight: 700;
}
span07 { /* per cambiare lingua della pagina */
color: white;
font: 11px/2 Verdana, Courier new, sans serif;
line-height: 10px;
}
/* formattazione testo commenti foto */
.comment {
color: black;
text-align: left;
font:10px/2 Verdana, Courier new, sans serif;
}
/* formattazione testo in corsivo */
.italic {
font-style: italic;
}
/* regole per gli elementi con class=linksito */
a.linksito:link { /*colore link non visitati*/
color: black;
text-decoration: none;
}
a.linksito:visited { /*colore link visitati*/
color: #888888;
text-decoration: none;
}
a.linksito:hover { /*colore link al passaggio del mouse*/
color: orange;
text-decoration: none;
}
a.linksito:active { /*colore link mentre il tasto sinistro è premuto*/
color: yellow;
text-decoration: underline;
}
/* regole per gli elementi con class=linknav */
a.linknav:link { /*colore link non visitati*/
color: black;
text-decoration: none;
}
a.linknav:visited { /*colore link visitati*/
color: #888888;
text-decoration: none;
}
a.linknav:hover { /*colore link al passaggio del mouse*/
color: orange;
text-decoration: none;
}
a.linknav:active { /*colore link mentre il tasto sinistro è premuto*/
color: yellow;
text-decoration: underline;
}
/* regole per gli elementi con class=linklingua */
a.linklingua:link { /*colore link non visitati*/
color: white;
text-decoration: none;
}
a.linklingua:visited { /*colore link visitati*/
color: #888888;
text-decoration: none;
}
a.linklingua:hover { /*colore link al passaggio del mouse*/
color: orange;
text-decoration: none;
}
a.linklingua:active { /*colore link mentre il tasto sinistro è premuto*/
color: yellow;
text-decoration: underline;
}
/* Comando per togliere la cornice dalle immagini coi link su firefox */
img{
border: 0;
}
----
Grazie in anticipo per ogni consiglio.
Emanuele
Rispondi quotando
così non può funzionare. Invece di