Sistemare per IExplorer

**bako** · 16-11-2007, 19:34

Salve.
pensavo di aver finito il mio progetto, oggi per provare apro explorer e bam: layout tutto sballato.

(il progetto è creato con le jsp, vi incollo l'html generato)
per fare un esempio, si vede così
ie:

ff (che è come dovrebbe essere):

questo è l'html generato:

codice:

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">





<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link href="stile.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="avviso">Versione di PROVA. In caso di malfunzionamenti inviare una mail a: stefano.tranquillini@gmail.com</div>
        

        <div id="contenitore">
            <div id="alto"> 
                [img]img/centrale.gif[/img]
            </div>
            <div id="lingue">

        [img]img/bandiere/1.gif[/img] 
        [img]img/bandiere/2.gif[/img] 

</div>   
            <div id="sinistra">
                <div id="menu">
				<ul>[*]CREAZIONE[*]crea questionario[*]crea risposte standard[*]COSTRUZIONE[*]costruzione[*]REPORT[*]report[*]UTENTI QUESTIONARIO[*]aggiungi[*]rimuovi[*]lista[*]LOGOUT[*]LOGOUT[/list]
 </div>
 </div>
<div id="contenuto">
<div id="errore"></div>
<form name="creaQuestionario" method="post" action="/qo/admin/creaQuestionario.do">
    <div id="tabella">
        <table>
            <tr>   
                <td>
                    lingua
                </td>                
                <td>
                    titolo
                </td>
            </tr>
                <tr>   
                    <td>
                        italiano 
                    </td>                
                    <td>
                        <input type="text" name="dati[0]" value="">
                    </td>
                </tr>
            
                <tr>   
                    <td>
                        English 
                    </td>                
                    <td>
                        <input type="text" name="dati[1]" value="">
                    </td>
                </tr>
            
                <tr>   
                    <td>
                        French 
                    </td>                
                    <td>
                        <input type="text" name="dati[2]" value="">
                    </td>
                </tr>
            
            <tr>   
                <td>
                    anonimo
                </td>                
                <td>
                    sì <input type="radio" name="anonimo" value="true">
                    no <input type="radio" name="anonimo" value="false" checked="checked">
                </td>
            </tr>
            
        </table>
    </div>
    <input type="submit" value="Invia">
    
</form>

            </div>
            <div id="fondo"></div>
        </div>
        <div id="copy">®</div>
    
    </body>
</html>

e questo il mio css:

codice:

body {
	font-family: verdana, arial, helvetica, sans-serif;
	text-align: center;
	background-color: #a7a7a7;
	color: #333333;
   }
img {
     border: none;
     color: none;
     background: #ffffff;

}
#lingue {
        
	margin-top: 3px;
	margin-right: 0px;
	margin-bottom: 3px;
	margin-left: 5px;
    
}
#tabella table {
        width: 100%;
	border: 1px solid #999999;
	border-collapse: collapse;
	border-spacing: 0px;
	empty-cells: hide;
    }
	
#tabella td {
	border: 1px solid #999999;
}
#tabella tr {
	
	border: 1px solid #999999;
}

#tabella_sinistra table {
        width: 100%;
	border: 1px solid #999999;
	border-collapse: collapse;
	border-spacing: 0px;
	empty-cells: hide;
	
    }
	
#tabella_sinistra td {	
        text-align: left;	
	border: 1px solid #999999;
        
}
#tabella_sinistra tr {
	
	border: 1px solid #999999;
}

#tabella_centro table {
        width: 100%;
	border: 1px solid #999999;
	border-collapse: collapse;
	border-spacing: 0px;
	empty-cells: hide;
	
    }
	
#tabella_centro td {
	
        text-align: center;	
	border: 1px solid #999999;
}
#tabella_centro tr {
	
	border: 1px solid #999999;
}



#nascosto{
	display:none;
}

#messaggio{
	background:#FF0000;
	color:#FFFFFF;
	font-size:80%;
	text-align: center;
	font-weight: bold;
}
#spazio{
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
	
}

#sinistra {
	width: 225px;
	float: left;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 5px;
}



#menu {
	width:200px;
	padding: 0px;
	border: 1px solid #333333;
	background:#EBEBEB;
	text-align: left;
	font-size:80%;
	margin-top: 2px;
	margin-right: 20px;
	margin-bottom: 2px;
	margin-left: 5px;
   }
#menu img {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 0px;
}
   #menu ul {
      list-style: none;
      margin: 0px;
      padding: 0px;
      border: 0px;
      }
      #menu ul li {
         margin: 0px;
         padding: 0px;
         border: 0px;

         }

         #menu ul li a {
            display: block;
            height: 20px;
            margin: 0px;
            padding: 0px;
            border: 0px;
            text-decoration: none;
            color: #333333;
            padding-left: 20px;
            border-top: 1px solid #D3D3D3;
            border-bottom: 1px solid #333333;
            }

            #menu ul li a:hover, #menu ul a.menu_selected {
                                background:#006699;
                                border-top: 1px solid #006699;
				color:#FFFFFF;
			}

#login{
	font-size:80%;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	text-align: center;
}
	#login a:link {
		color: #333333;
		text-decoration: underline;
		font-weight: bold;
		}
	
	#login a:visited {
		color: #333333;
		text-decoration: underline;
		font-weight: bold;
		}
	
	#login a:hover {
		color: #ffffff;
		background:#006699;
		font-weight: bold;
		}
	
	#login a:active {
		color: #333333;
		text-decoration: underline;
		font-weight: bold;
		}
				  
#textarea, input, button {
  	 border: 1px solid #333333;
   }



#contenuto{
        min-height: 400px;
	text-align: left;
	font-size: 80%;
	margin-left: 225px;
	margin-top: 0px;
	padding: 5px;
	margin-right: 5px;
	margin-bottom: 10px;

}
	#contenuto h1 {
		font-size: 110%;
		font-weight: bold;
		color: #0099FF;
		}
	#contenuto h2 {
		font-size: 105%;
		color:  #003366;
		}
        #contenuto h3 {
		 font-size:90%;
	     font-weight: bold;
		}
	#contenuto a:link {
		color: #333333;
		text-decoration: underline;
		font-weight: bold;
		}
	
	#contenuto a:visited {
		color: #333333;
		text-decoration: underline;
		font-weight: bold;
		}
	
	#contenuto a:hover {
		color: #ffffff;
		background: #006699;
		font-weight: bold;
		}
	
	#contenuto a:active {
		color: #333333;
		text-decoration: underline;
		font-weight: bold;
		}
	

#bordo{
		height: 100%;
		border: 10px solid #FFFFFF;
}
#avviso{
	background:#006699;
	color:#FFFFFF;
	font-size:100%;
	text-align: center;
	font-weight: bold;
}
#errore{
	background:#FF0000;
	color:#FFFFFF;
	font-size:100%;
	text-align: center;
	font-weight: bold;
}
#contenitore {
	width: 80%;
	margin: 0px auto 0px auto;
	background:#FFFFFF;
	border: 1px solid #000000;
   }
   			   
#alto{
	height: 75px;
	font-size: 400%;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFFFFF;
	text-align: left;
	vertical-align: bottom;
	background-color: #006699;
	border-bottom: 5px solid #000000;
	background-image: url(img/sfondo.gif);
}


#fondo{
	height: 5px;
	background-color: #000000;
  
}

qualcuno sa darmi una mano per sistemare??
cos'è che nn va??

**zino** · 21-11-2007, 17:46

Subito nel body prova a impostare una table con width="100%" e align="center"
ed una sola cella;
dentro questa tabella ci metti un'altra table di dimensioni fisse contenente tutto il tuo codice.
A questo punto, anche facendo il resizing della finestra, dovresti avere il contenuto della tua jsp sempre centrato all'interno del browser (a meno che le dimensioni della finestra non siano inferiori a ciò che deve essere visualizzato).

Spero di essere stato di aiuto

ciao

**RobinHoood** · 22-11-2007, 22:12

potresti fare qualche ricerca sugli hack

**fcaldera** · 22-11-2007, 22:26

#sinistra {
width: 225px;
float: left;
display: inline;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 5px;
}

**bako** · 22-11-2007, 23:38

era la prima riga della jsp che mandava tutto a farsi benedire.
e qualche tag img non chiuso.
grazie

Discussione: Sistemare per IExplorer

Strumenti discussione

Ricerca discussione

Visualizza

Sistemare per IExplorer

Permessi di invio