Ciao a tutti...
sto cercando di realizzare il layout per un sito che sia cross-browser, ovvero che venga visualizzato nella stessa maniera da tutti i browser...
Sono riuscito ad eliminare le differenze tra IE 6, IE 7, IE 8, FireFox e Opera.
Mi resta un problema con Safari però...
Ho provato a visualizzarlo con http://browsershots.org/ per vedere i vari risultati e per i browser citati sopra tutto ok...per Safari, Chrome e Konqueror no...
Fermo restando che sono già molto soddisfatto del risultato...mi piacerebbe cmq riuscire a risolvere questo problema. Anche perchè credo proprio che sia una cosa da niente...
Vi posto tutto il materiale...
Questo è il codice della pagina: il css è embedded nell'html..
questo è come dovrebbe vedersi correttamente:codice:<html style="margin:0px;padding:0px;"> <head> </head> <body style="background-color:white;margin:0px;padding:0px;font-family:verdana;"> <center> <div id="container" style="position:relative;width: 750px;margin: 0px ;padding:0px;;color:black;background-color:yellow;background:url('img/men.gif') repeat-y left;"> <div id="header" style="background:url('img/head.gif');height:150px;width:750px;margin:0px;padding:0px"> </div> <div style="margin:0px;padding:0px;font-size:0px;width:750px;height:5px;background:url('img/linea.gif') no-repeat bottom;background-color:white;"></div> <div id="corpo" style="margin:0px;padding:0px;margin-left:170px;width:580px;background:url('img/corpo.gif') repeat-y top;"> </div> <div id="menu" style="position:absolute;top:150px;left:0px;width:170px;margin:0px;padding:0px;"> <center> <div style="height:8px;font-size:0px"></div> <div style="background:url('img/bott.gif');background-color:red; width:160px;height:40px;line-height:40px;"> <div style="margin:0px;padding:0px;width:150px;text-align:left;">HOME</div> </div> <div style="height:3px;font-size:0px"></div> <div style="background:url('img/bott.gif');background-color:red; width:160px;height:40px;line-height:40px;">Bottone 1</div> <div style="height:3px;font-size:0px"></div> <div style="background:url('img/bott.gif');background-color:red; width:160px;height:40px;line-height:40px;">Bottone 1</div> <div style="height:3px;font-size:0px"></div> <div style="background:url('img/bott.gif');background-color:red; width:160px;height:40px;line-height:40px;"></div> <div style="height:3px;font-size:0px"></div> <div style="background:url('img/bott.gif');background-color:red; width:160px;height:40px;line-height:40px;"></div> <div style="height:3px;font-size:0px"></div> </center> </div> <div style="margin:0px;padding:0px;font-size:0px;width:750px;height:5px;background:url('img/linea.gif') no-repeat top;background-color:white;"></div> </div> </center> </body> </html>
questo è come si vede su Safari, Chrome e Konqueror:
Come potete vedere, l'unico elemento che da problemi è il div "corpo" ovvero quello blu.
Sono arrivato a pensare che la proprietà che non viene interpretata bene da questi browser è margin-left...
Ma non so come fare...non so che soluzione adottare...
Qualcuno sa dirmi qualcosa?
Se può esservi d'aiuto, il css è validato.
Rispondi quotando