Visualizzazione sballata

**dover** · 15-11-2012, 19:01

Ciao a tutti,
Vorrei chiedervi un favore. Io visualizzo correttamente il mio sito, www.fazzarimarmi.com ma su alcuni computer la visualizzazione salta mostrando solo porzioni del sito. Mi chiedevo se può dipendere da impostazioni di sicurezza del browser (visto che c'è tanto Javascript) oppure da codice sballato. Premetto che non ho seguito né standard w3c né validazioni del codice, ma vorrei poter soluzionare il problema almeno rendendo il sito visibile a tutti i browser. Grazie a chi mi darà indicazioni per risolvere il problema.

**sgogghy** · 15-11-2012, 20:22

prova inserendo un doctype.

http://www.w3schools.com/tags/tag_doctype.asp

**dover** · 15-11-2012, 20:51

grazie! Provo...

**Prill** · 16-11-2012, 17:09

Col Doctype la visualizzazione risulterà. giustamente, sballata con tutti i browser. Vi sono problemi nel css e con i float. Ripulendo:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<link rel="stylesheet" href="images/style.css" type="text/css">
	<title>FAZZARI MARMI </title>
<meta name= --- ometto tutti i metatag>
 

 
<!--[if IE]>
<style type="text/css">
    BODY {
    SCROLLBAR-FACE-COLOR: #f3f3f3;
    SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
    SCROLLBAR-SHADOW-COLOR: #cccccc;
    SCROLLBAR-3DLIGHT-COLOR: #f3f3f3;
    SCROLLBAR-ARROW-COLOR: #404056;
    SCROLLBAR-TRACK-COLOR: #ffffff;
    SCROLLBAR-DARKSHADOW-COLOR: #cccccc;
    }
</style>
<![endif]-->
<style type="text/css">

    #sito { position: absolute; top:0px; left:0px; z-index:1;}
    #sfondo { position: absolute; top:0px; left:0px; z-index:-1;}

    .iframe
    {
    background-color: transparent;
    }

    ul {
    margin-top:0px;
    margin-left:20px;
    margin-bottom:0px;
    }

    .form {
    margin: 0px;
    }
    .button {
    margin: 0px;
    }
    .stop {font-size:7pt; font-family:arial; font-weight:bold;  color:#990000}
    .testo {font-size:10px; font-family:verdana; color:#999999}
    .testo1 {font-size:10px; font-family:verdana; color:#000000}
    .testoj {font-size:10px; font-family:verdana; color:#999999; text-align:justify; padding-right:6px;}
    .testogr {font-size:10px; font-family:verdana; color:#cccccc}
    .titoli {font-size:10pt; font-family:Arial; font-weight:bold; color:#ff6600}
    .titoloAz {font-size:14pt; font-family:Arial; font-weight:bold; color:#336699}
    .titoloOr {font-size:14pt; font-family:Arial;  color:#000000}
    .contenuti {FONT-size:10px; font-family:verdana; color:#666666; text-align:justify}
    .intestazione {font-size:8pt; font-family:Arial; font-weight:bold; color:#336699}
    .testoaz {font-size:10px; font-family:verdana; color:#336699}
    .testow {font-size:7pt; font-family:verdana; color:#ffffff}
    .testostop {font-size:7pt; font-family:verdana; font-weight:bold; color:#666666}
    .testotel {font-size:12pt; font-family:verdana;  font-weight:bold; color:#225834}
    .testoaznormal {font-size:10px; font-family:verdana; color:#336699}
    .testoaznormal2 {font-size:8pt; font-family:verdana;  font-weight:bold; color:#336699}
    .testo2 {font-size:8pt; font-family:verdana; color:#333333}
    .testoorange {font-size:8pt; font-weight:bold; font-family:verdana; color:#FF6600}
    .titleorange {font-size:20px; font-weight:bold; font-family:Tahoma, sans-serif; color:#FF9900}
    .titleblue {font-size:20px; font-weight:bold; font-family:Arial; color:#333366}
    .testo8 {font-size:8pt; font-weight:bold; font-family:verdana; color:#333333}
    .testogreen {font-size:8pt; font-weight:bold; font-family:verdana; color:#339933}
    .testo8red {font-size:8pt; font-weight:bold; font-family:verdana; color:#ff0000}
    .testobig {font-size:10pt; font-weight:bold; font-family:verdana; color:#000000}
    .testor  {font-family: verdana; font-size:7pt; color: #cc0000}
    .testornb  {font-family: verdana; font-size:7pt; color: #cc0000}
    .testored {font-size:8pt; font-family:verdana; color:#cc0000}
    .testoc {font-size:10px; font-family:verdana; color:#cccccc}
    .linkstop {font-size:10px; font-family:verdana; color:#cc0000}
    .teston {font-size:7pt; font-family:verdana; color:#000000}
    .testob {font-size:10px; font-family:verdana; font-weight:bold; color:#666666}
    .link {font-family: arial; font-size:7pt; font-weight:bold; color: #333333; text-decoration: none}
    .link:Hover {font-family: arial; font-size:7pt; font-weight:bold; color: #333333; text-decoration: none}
    .linkmenu {font-family: verdana; font-size:10px; color: #336699; text-decoration: none}
    .linkmenu:Hover {font-family: verdana; font-size:10px; color: #CC0000; text-decoration: none}
    .linkmail {font-family: verdana; font-size:10px; font-weight:bold; color: #336699; text-decoration: none}
    .linkmail:Hover {font-family: verdana; font-size:10px; font-weight:bold; color: #cc0000; text-decoration: underline}
    .link2 {font-family: verdana; font-size:7pt; font-weight:bold; color: #333333; text-decoration: none}
    .link2:Hover {font-family: verdana; font-size:7pt; font-weight:bold; color: #cc0000; text-decoration: none}
    .link3 {font-family: arial; font-size:7pt; font-weight:bold; color: #333333; text-decoration: none}
    .link3:Hover {font-family: arial; font-size:7pt; font-weight:bold; color: #990000; text-decoration: none}
    .linkmailp {font-family: verdana; font-size:10px;  font-weight:bold; color: #336699; text-decoration: none}
    .linkmailp:Hover {font-family: verdana; font-size:10px; font-weight:bold; color: #ff3300; text-decoration: underline}
    .link5 {font-family: verdana; font-size:8pt; font-weight:bold; color: #333333; text-decoration: underline}
    .link5:Hover {font-family: verdana; font-size:8pt; font-weight:bold; color: #000000; text-decoration: underline}
    .linkazzurro {font-family: verdana; font-size:8pt; font-weight:bold; color: #336699; text-decoration: none}
    .linkazzurro:Hover {font-family: verdana; font-size:8pt; font-weight:bold; color: #cc0000; text-decoration: none}
    .link8a {font-family: verdana; font-size:8pt; font-weight:bold; color: #000000; text-decoration: none}
    .link8a:Hover {font-family: verdana; font-size:8pt; font-weight:bold; color: #cc0000; text-decoration: none}
    .link8b {font-family: verdana; font-size:8pt; color: #cc0000; text-decoration: none}
    .link8b:Hover {font-family: verdana; font-size:8pt; color: #336699; text-decoration: none}
    .link9 {font-family: verdana; font-size:10pt; color: #666666; text-decoration: none}
    .link9:Hover {font-family: verdana; font-size:10pt; font-weight:bold; color: #336699; text-decoration: none}
    .link9stop  {font-family: verdana; font-size:10pt; font-weight:bold; color: #336699}
    .checkbox {  background-color: #ffffff; border-style: 1px; width: 11px; height: 11px;}
    .link10 {font-family: verdana; font-size:10pt; color: #336699; text-decoration: none}
    .link10:Hover {font-family: verdana; font-size:10pt; font-weight:bold; color: #FF6600; text-decoration: none}
    .link11 {font-family: verdana; font-size:10pt; color: #666666;  font-weight:bold; text-decoration: none}
    .link11:Hover {font-family: verdana; font-size:10pt; font-weight:bold; color: #336699; text-decoration: none}
    .link11stop  {font-family: verdana; font-size:10pt; font-weight:bold; color: #cc0000}


    .unnamed1 {
    cursor: default;
    }


    .select {
    width:400px;
    border-style:0px; font-size: 10px; font-family: Verdana; font-color:#336699;
    }

    .select2 {
    width:200px;
    border-style:0px; font-size: 10px; font-family: Verdana; font-color:#336699;
    }

    .tdmenu {
    border: none;
    border-bottom:1px dotted #cccccc;
    display: block;
    font-family: verdana;
    color:336699;
    font-size:10px;
    padding:0px;
    }
    .headtop {
    border: none;
    border-right:1px dotted #333333;
    border-left:1px dotted #333333;
    }
    .linearossa {
    border-bottom:1px solid #cc0000;
    }

    .linearossa2 {
    border: none;
    border-top:1px  solid #cc0000;
    }

    .tierrebottom {
    border:none;
    border-bottom:1px solid #336699;
    }
    .b2 {
    background: #646265;
    border: none;
    border-bottom:1px solid #333333;
    }
    .bordo {
    border-top:1px solid #333333;
    border-right:1px solid #ffffff;
    border-bottom:1px solid #333333;
    border-left:1px solid #ffffff;
    }
    .doppialinea {
    border-top:1px solid #333333;
    border-bottom:1px solid #333333;
    }

    .oro {
    border-top:1px solid #333333;
    border-bottom:1px solid #333333;
    }

    .linea {
    border-bottom:1px solid #efefef;
    }

    .dotted {
    border:1px solid #666666;
    }

    .over {
    border:1px dotted #ffcc00;
    }


    div.menu {
    border-bottom: 0px solid;
    border-left: 0px solid;
    }
    a.menu {
    padding:0px;
    display: block;
    font-family: verdana;
    color:#336699;
    font-size:10px;
    position: relative;
    text-decoration:none;
    }
    a.menu:hover {
    display: block;
    position: relative;
    font-family: verdana;
    font-size:10px;
    color:#cc0000;
    background: #f3f3f3;
    text-decoration:none;
    padding:0;
    }


</style>

<script type="text/javascript">
function ValidNumericKey(){ 
    var result = false 
    if (event.keyCode >= 48 &&  event.keyCode <= 57) {result = true} 
    if (event.keyCode == 46) {result = true} 
    event.returnValue = result 
    return result 
}
</script> 


</head>
<body>
	<div id="wrapper">
		<div id="toppage">
			<div id="date">
				<script type="text/javascript">
	Mesi = new Array("Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre")
	Data = document.lastModified
	Giorno = Data.substring(3,5)
	Mese = Data.substring(0,2)
	Mese = Math.abs(Mese)
	Anno = Data.substring(6,10)
	document.write("",Giorno," ",Mesi[Mese - 1]," ",Anno,"")
</script>
				</div>
             
			<div id="topbar">
				Login | 
				Area riservata | 
				Contatti | 
		</div>
	</div>
		<div id="header">
			<div id="logo">[img]images/logo.jpg[/img]</div> 
			<div id="destro">
				

Orario lavorativo: Lun-Sab 9:00 - 12:30/ 14:00 - 18:30</p>
				

[img]images/facebook_logo.jpg[/img] <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
				[img]images/skype_logo.jpg[/img]


			</div>
		</div>
		<div id="content">
			<div id="menu">
				<div align="right" style="width:189px; height:8px;">[img]images/mnu_topshadow.gif[/img]</div>
				<div id="linksmenu" align="center">
					Chi siamo
					Dove trovarci
					Prodotti
					Servizi
					Contatti
</div>
<div align="right" style="width:189px; height:8px;">[img]images/mnu_bottomshadow.gif[/img]</div>
</div>
<div id="contenttext">
<div class="bodytext" style="padding:12px;" align="justify">

Abbiamo sviluppato il nostro progetto on line per interagire con l'utenza web. 
Qui troverete informazioni sempre aggiornate sui nostri orari lavorativi, sulle nostre proposte commerciali e le novità





Ci rivolgiamo a quella fascia di clientela che non è possibile acquisire per i limiti imposti dai confini fisici.  
Siamo artigiani  con la cura per i dettagli, ma con una capacità di rinnovamento che ci porta ad essere sempre all'avanguardia in ogni settore del nostro articolato lavoro.

</div>
<div class="panel" align="justify">
<span class="orangetitle">Benvenuti</span>
<span class="bodytext">


Nel nostro sito 
</span>	


	

[img]images/lab1.jpg[/img]
</div>
</div>
</div><div style="clear:both"></div></div>
<div id="footer" class="smallgraytext" align="center">
			Chi siamo | Dove trovarci | Prodotti | Servizi | Contatti

			FAZZARI MARMI &copy; 2012

P.I: 01993580511


			Statistiche
		</div>		

</body>
</html>

**Prill** · 16-11-2012, 17:12

Non ho toccato il css in linea se non per togliere la parte solo per Explorer (ma in quel css ci sono molti stili non usati nella pagina). Ho modificato invece il css esterno, ancora da semplificare però:

codice:

*{margin:0; padding:0}
body{
		
	background-color:#fff;
}
#wrapper{
	width:800px;
	margin:0 auto;
	border-right:1px solid #999999;
}
#toppage{
	height:39px;
	overflow:hidden;
	background-image:url(bg_topbar.gif);
	background-repeat:repeat-x;

}
#date{
	float:left;
	width:190px;
	height:38px;
	font family:Tahoma, sans-serif;
	font-size:11px;
	font-weight:bold;
	text-align:center;
	line-height:38px;
	color: #666666;
	padding-left:12px;
	border-bottom:1px solid #999999;
	border-right:1px solid #999999;
	background-color:#fff;
}
#topbar{
	float:left;
	width:570px;
	height:39px;
	text-align:right;
	color:#fff;
	line-height:39px;
	padding-right:12px;
}
#topbar a{
  font: bold 11px Tahoma, sans-serif;
  color: #fff;
  text-decoration: none;
}
#topbar a:hover{
  text-decoration: underline;
}
#header{
	width: 800px;
	clear:both;
}
#logo{
  float: left;
  width: 363px;
  height: 120px;
  text-align: left;
	padding:25px 25px 0 25px;
  border-left:1px solid #999999 ;
  background-color: #fff;
}
#destro{
  float: right;
  width: 370px;
  height: 120px;
  font: 0.7em Tahoma, sans-serif;
	font-weight:bold;
  color: #235d37;
	text-align:right;
	padding-top:25px;
	padding-right:10px;
	background-color: #fff;
}
#content{
	clear:both;
}
#contenttext{
  float: left;
  width: 608px;
  min-height: 360px;
  border: 1px solid #999999;
	border-right:none;
	background-color:#ffffff;
}

#title{
  position: absolute;
  width: 600px;
  height: 50px;
  BOTTOM: 0px;
  RIGHT: 10px;
}
#menu{
  float: left;
  width: 190px;
}
#footer{
		clear:both;
		width:800px;
		margin:0 auto;
}
.panel{
    width: 550px;
    padding: 10px;
    margin: 10px;
    background-color: #f7f7f7;
    border:1px solid #e4e4e4;
}

.bodytext{
    font: 0.7em Tahoma, sans-serif;
    color: #666666
}
.smalltext{
    font: 11px Tahoma, sans-serif;
    color: #666666;
}
.smallwhitetext{
    font: bold 11px Tahoma, sans-serif;
    color: #ffffff
}
.smallwhitetext a{
    font: bold 11px Tahoma, sans-serif;
    color: #ffffff;
    text-decoration: none
}
.smallwhitetext a:hover{
    text-decoration: underline
}
.smallgraytext{
    font: bold 11px Tahoma, sans-serif;
    color: #cccccc;
}
.smallgraytext a{
    font: bold 11px Tahoma, sans-serif;
    color: #cccccc;
    text-decoration: none;
}
.smallgraytext a:hover{
    text-decoration: underline;
}
.titletext{
    font: bold 36px Tahoma, sans-serif;
    color: #cccccc;
}
.logotext{
    font-size: 36px;
    color: #999999;
    line-height: normal;
    font-style: normal;
    font-family: Tahoma, sans-serif;
    font-variant: normal
}
.orangelogotext{
    font: bold 36px Tahoma, sans-serif;
    color: #ff9900;
}
.orangetitle{
    font: bold 24px Tahoma, sans-serif;
    color: #ff6600;
}
#linksmenu a{
    float: right;
    width: 183px;
    height: 20px;
    font: bold 11px Tahoma, sans-serif;
    color: #fff;
    text-decoration: none;
    padding: 5px 0;
    border-left:1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    background-color: #bbe6ac;
}
#linksmenu a:hover{
    padding: 5px 0;
    background-color: #666666
}
#linksmenu{
}
.LinkStop{
    font-weight: bold;
    font-size: 11px;
    color: teal;
    font-style: normal;
    font-family: Tahoma, SansSerif;
    font-variant: normal
}
#LinkStop2{
    width: 96%;
    height: 100%;
    font-family: Tahoma, SansSerif;
    font-size: 11px;
    font-weight: bold;
    color: white;
    text-align: center;
    padding: 5px 0;
    background-color: #666666;
    border:2px solid #fff;
    border-bottom:1px solid #fff;
}
.table{
    border: 2px solid #999999;
    padding: 5px;
    background-color: white
}
.testored{
    font-family: Tahoma, SansSerif
    font-size: 11px;
    font-weight: bold;
    color: red;
}
.Linkmail{
    font-family: Tahoma, SansSerif;
    font-size: 0.7em;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    color: #8fbc8b;
}
.Linkmail a:hover{
    font-family: Tahoma, SansSerif;
    font-weight: normal;
    font-size: 0.7em;
    font-style: normal;
    font-variant: normal;
    color: #dc143c;
    text-decoration: none;
}
.Linkmail LINKMAIL:hover{
    font-weight: normal;
    font-size: 0.7em;
    color: #8fbc8b;
    font-style: normal;
    font-family: Tahoma, SansSerif;
    font-variant: normal;
    text-decoration: none
}

puoi ripartire da qui e ripulire ulteriormente vedendo le semplificazioni già fatte

**dover** · 16-11-2012, 23:04

Grazie per l'aiuto e il tempo dedicatomi. Avevo sentore che il problema fosse nei css...
A buon rendere!

Discussione: Visualizzazione sballata

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione sballata

Permessi di invio