• Moderatrice

    Problema visualizzazione tra transitional e strict

    Ho un problema riguardo la visualizzazione.
    Se metto il codice del transitional
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    vedo la grafica in una maniera
    mentre se inserisco il codice dello strict
    in un'altra!
    Entrambe sono validate W3C e CSS validati
    con codice transitional http://www.noleggio-porsche.com/noleggio-porsche997-2s.html

    con codice strict http://www.noleggio-porsche.com/noleggio-porschecarrera.html

    la differenza è alla base dell'immagine di sinistra. Le due pagine hanno esattamente le stesse impostazioni. La differenza non è visibile con IE ma è visibile con FF OPERA E NSCAPE.

    Ho riscontrato lo stesso problema con un'altro sito in elaborazione.
    Qualcuno può aiutarmi?


  • Super User

    Posta il codice. Lo strict è molto più restrittivo del transitional. Il primo ha eliminato molti tag precedentemente utilizzati nelle specifiche html 4, il secondo essendo appunto di transizione le mantiene.

    Le differenze che noti tra Ie e gli altri browser sono normali ed è colpa del primo che è molto meno formale con il codice.


  • Moderatrice

    Questo è il codice
    Se su dctype ci metti strict lo vedi diverso in fondo l'immagine a sinistra.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Porsche 997 2s a noleggio</title>
    <link href="noleggio-auto.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="bigbox">
      <div id="menu"> <img src="porsche-img/logo.jpg" alt="logo noleggio porsche " width="259" height="67"  /><a href="home.html" title="Home noleggio Porsche"><strong>HOME</strong> | </a> <a href="noleggio.html" title="Chi siamo">ABOUT US  | </a> <a href="noleggio-porsche.html" title="Visiona le porsche a noleggio"><strong>VISIONA LE PORSCHE A NOLEGGIO</strong> |</a> <a href="contatti-noleggio.html" title="contatta noleggio porsche">CONTATTI | </a> <a href="porsche-news.html" title="News su porsche"><strong>NEWS</strong></a></div>
      <div class="mainbody">
     <div id="centerbody">
       <h1>PORSCHE 997 2S </h1>
       <img src="porsche-img/min-porsche.jpg" alt="foto porsche 911" width="197" height="142" /><br />
    
    <ul>
      <li><a href="auto/porsche-carrera2s.html">Informazioni su <br />
        Porsche 997 2S</a></li>
    </ul>
      
       <h2>RICHIEDI INFORMAZIONI</h2>
       <p><strong>Edo Service Noleggio Porsche</strong> presenta la<strong> Porsche 997 2S.<br />
       </strong>Verrete affascinati dalle linee perfette e dalle emozioni che solo una Porsche di questo tipo pu&ograve; generare in marcia.<br /> 
         <br />
         Per avere <strong>maggiori informazioni</strong> sul <strong>noleggio Porsche 997 2S </strong> ti invitiamo a contattare il nostro <strong>call center al numero di telefono 0573 22034.</strong><br />
         <br />
       </p>
       </div>
    <div id="leftcolumn"><img src="porsche-img/carrera-2s.jpg" alt="noleggio porsche carrera" width="304" height="426" /></div>
    
    <div id="schedaporsche">
     <h1>NOLEGGIO PORSCHE 997 2S </h1>
     <ul><li><strong>Anno: </strong>2005</li>
     <li><strong>Posti:</strong> 5</li>
     <li><strong>Cambio:</strong> manuale</li>
     <li><strong>Colore esterno:</strong> nero</li>
     <li><strong>Colore interno:</strong> bianco</li>
     <li><strong>Alimentazione: </strong>benzina</li>
     <li><strong>Noleggio giornaliero:</strong> Euro 500</li>
     <li><strong>Noleggio mensile:</strong> Euro 5000</li>
       </ul>
     <h2>CARATTERISTICHE TECNICHE</h2>
     <ul>
     <li>Velocit&agrave; massima: 285 km/h</li>
      <li>Da 0 a 100 km/h: 5.0 secondi</li>
       <li>Urbano l/100 km: 16.1 </li>
        <li>Extraurbano l/100 km: 8.1 </li>
    	 <li>Serbatoio carburante: 64 l </li>
    	 <li>Cambio manuale 6 marce</li>
        </ul>
     </div>
     </div>
     
      
      <div id="footer"><strong>Noleggio Porsche Edo Service</strong> |
    Noleggio porsche e auto di lusso <br />
    <strong>Sede:</strong> Via Pacinotti 74 
    Pistoia (PT) -
    Toscana - Italia - 
    Tel  0573   22034 - 
    Mobile 339 1114430 - 
    P.IVA 01576570475 <br />
    <br />
    | <a href="home.html" title="visiona home page"><strong>HOME PAGE</strong></a> | <a href="noleggio-faq.html" title="Domande frequenti sul noleggio porsche">FAQ</a> | <a href="glossario-porsche.html" title="termini particolari per il noleggio">GLOSSARIO</a> | <a href="site-map.html" title="site map del sito">SITE MAP </a> | <a href="contatti-noleggio.html" title="contatta noleggio porsche">CONTATTI</a> | <a href="privacy-policy.html" title="privacy policy del sito">PRIVACY POLICY </a> | <a href="partner.html" title="partner link">PARTNER LINK</a> | <a href="http://www.dedwebdesign.it" title="grafica e sviluppo a cura di Del Cortona">CREDITS</a> |</div>
    
    
    </div>
    </body>
    </html>
    
    

  • Moderatrice

    Questo il css

    body {
    padding: 0px;
    font-size:medium;
    background: url(sfondo.jpg) #333333;
    margin: 0px auto 10px;
    color:#fff;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    
    .bigbox {
    width: 750px;
    background-color:#fff;
    color:#333333;
    padding-right: 3px;
    padding-left: 3px;
    padding-bottom: 0px;
    margin-left:auto;
    margin-right:auto;
    
    }
    
    
    #menu {
    background-color:#fff;
    width: 740px;
    color:#333333;
    position:relative;
    height:80px;
    text-align:left;
    }
     a { font-size: 0.6em; 
    color:#000000;
    background-color:#ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    text-decoration:none;
    padding:50px 0px 0px 0px;
    vertical-align:bottom;
    } img{ 
    padding:0px 42px 0px 0px;
    }
    a img{border:none;}
    
    
    #footer {
    background:#ffffff;
    text-align:center;
    font-size:0.6em;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#000000;
    padding:10px 0px 10px 0px;
    } a {
    color:#000;
    text-decoration:none;
    padding:0px 0px 0px 0px;
    vertical-align:bottom;
    background:#ffffff;
    }
    
    	
    
    h1{ font-size:0.6em; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    background-color:#555555;
    color:#FFFFFF;
    margin:2px 2px 10px 2px;;
    text-align:left;
    padding: 5px;}
    
    h2{font-size:0.6em; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    background-color:#4b4848;
    color:#FFFFFF;
    margin:10px 2px 10px 2px;;
    text-align:left;
    padding: 5px;}
    
    h3{ font-size:0.6em; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    background-color:#332c2c;
    color:#FFFFFF;
    margin:15px 2px 10px 2px;;
    text-align:left;
    padding: 5px;}
    
    p{ font-size: 0.6em;
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    background-color:#ffffff;
    color:#333333;
    margin:0px;
    padding: 0px 10px 0 10px;
    text-align:justify;}
    
    .mainbody {
    	min-height: 426px;
    	PADDING-RIGHT: 0px;
    	PADDING-LEFT: 0px;
    	LEFT: 0px;
    	PADDING-BOTTOM: 0px;
    	MARGIN: 0px;
    	WIDTH: 744px;
    	COLOR:;
    	PADDING-TOP: 0px;
    	POSITION: relative;
    	TOP: 0px;
    	BACKGROUND-COLOR: #ffffff;
    	TEXT-ALIGN: left;
    	border:solid 1px #666666;
    	height: 426px;
    }
    #centerbody {
    	clear: none; 
    	background:#fff;
    	left: 310px;
    	margin: 0px; 
    	width: 197px; 
    	color:; 
    	position: relative;
    	top: 10px;
    	border: 1px solid #999999;
    } img{ 
    padding:0px 0px 0px 0px;
    } p {
    padding-right: 5px;
    padding-left: 5px;
    background-color:#fff;
    color:#333333;
    }
     a{ font-size: 0.6em; color: #555555; background-color:#fff; text-decoration:none;}
     a:hover{ font-size: 0.8em; color:; background-color:#fff; text-decoration: underline;}
     ul {padding:0px; margin:0px 0px 10px 10px; list-style-type: square;}
     li { font-size: 0.8em; padding:0px 0px 2px 1px; margin:0px 0px 0px 10px; color: red;
    	background-color:#fff}
     li a{ font-size: 0.8em; color: red; background-color:#fff; text-decoration:none;}
    	
    #leftcolumn {
    	clear: left; 
    	background:#fff; 
    	left: 0px; 
    	float: left; 
    	width: 304px; 
    	color:; 
    	position: absolute; 
    	TOP: 0px;
    	margin:0px;
    }
    	
    #rightcolumn {
    	background-color:#fff;
    	color:#000;
    	width: 205px;
    	position: absolute;
    	top: 10px;
    	left: 523px;
    	border: 1px solid;
    	}
     h1{ font-size: 0.6em;; 
    	font-family: Verdana, Arial, Helvetica, sans-serif; 
    	background-color:#000;
    	color:#ffffff;
    	margin:2px 2px 10px 2px;;
    	text-align:left;
    	padding: 5px;
    	}
     p {
    	background:#ffffff;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #000000;
    	font-size: 0.6em;
    	padding: 5px 5px 10px 5px;
    	margin: 0px;
    	}
    
     a{ font-size: 0.6em; color:; background-color:#fff; text-decoration:none;}
     a:hover{ font-size: 0.8em; color:; background-color:#fff; text-decoration: underline;}
     ul {padding:0px; margin:0px 0px 10px 10px; list-style-type:square;}
     li { font-size: 0.8em; padding:0px 0px 2px 1px; margin:0px 0px 0px 10px; color: #006699;
    	background-color:#fff}
     li a{ font-size: 0.8em; color:; background-color:#fff; text-decoration:none;}
    	
    #schedaporsche {
    	background-color:#fff;
    	color:#000;
    	width: 205px;
    	position: absolute;
    	top: 10px;
    	left: 523px;
    	border: 1px solid;
    	} h1{ font-size: 0.6em;; 
    	font-family: Verdana, Arial, Helvetica, sans-serif; 
    	background-color:#000;
    	color:#ffffff;
    	margin:2px 2px 10px 2px;
    	text-align:left;
    	padding: 5px;
    	}
    
     ul {padding:0px; margin:0px 0px 10px 10px; list-style-type:square;} li { font-size: 0.6em; padding:0px 0px 2px 1px; margin:0px 0px 0px 10px; color:;
    	background-color:#fff}
    	
    
    #porsche {
    	clear: none; 
    	background:#fff;
    	left: 310px;
    	margin: 0px; 
    	width: 430px; 
    	color:; 
    	position: relative;
    	top: 10px;
    	overflow: auto;
    	z-index:1;
    	height: 400px;
    	border: solid 1px;
    	
    } a{ font-size: 1em; color: #000; background-color:#fff; text-decoration:none;}
     a:hover{ font-size: 1em; color:; background-color:#fff; text-decoration: underline;
    	} ul {padding:0px; margin:0px 0px 10px 10px; list-style-type: square;}
     li { font-size: 0.6em; padding:0px 0px 2px 1px; margin:0px 0px 0px 10px; color: red;
    	background-color:#fff;}
     li a{ font-size: 1em; color: red; background-color:#fff; text-decoration:none;
    	} li a:hover{ font-size: 1em; color: red; background-color:#fff;
    	}
    

  • Super User

    Deborah, io senza immagini non vedo differenze onestamente.
    Forse puoi creare le due pagine e inviarmi il link di entrambe anche in pvt oppure due screenshot.

    Ad ogni modo ti chiedo perchè vuoi realizzarle in strict?
    Seconda cosa, hai provato anche il doctype xhtml 1.1, ti da lo stesso errore dell'xhtml 1.0 strict?