Salve a tutti,
Ho realizzato un semplicissimo layout a due colonne, per un piccolo sito web. Il layout è di tipo table-less con float, a due colonne.
Solo che non capisco perchè con Internet Explorer 7 si vede perfettamente, e cioè così:
Mentre su firefox 3 è tutto sballato, così:
e il codice CSS:Codice PHP:<!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=utf-8" />
<title>Eureka!</title>
<link rel="Stylesheet" href="css/base.css" />
<link rel="Stylesheet" href="css/menu.css" />
</head>
<body>
<div id="testata">
<div align="center">[img]images/eurekatestatamini.jpg[/img]</div>
</div>
<div id="generale">
<div id="sottotitolo">
<div align="center">Periodico di informazione ed opinione degli studenti del Liceo Classico "De La Salle" - Benevento</div>
</div>
<div id="menu" align="center">
<div class="invertedshiftdown">
<ul>[*][url="/Default.aspx"]Home[/url][*][url="/infoeureka.aspx"]Cos'è[/url][*][url="/redazione.aspx"]La redazione[/url][*][url="/archivio.aspx"]Archivio numeri[/url][*][url="/contatti.aspx"]Contatti[/url][/list]
</div>
</div>
<div id="colonne2">
<div id="menuleft">
<ul>[*]POLITICA ESTERA[*][url="cicciponci"]POLITICA INTERNA[/url][*]CRONACA LOCALE[*]CRONACA NAZIONALE[*]CARA SCUOLA[*]EUREKA MAGAZINE[*]EUREKA VIAGGI[*]EUREKA FEDE[*]CULTURA-SPETTACOLO[*]MUSICA[*]SPORT
[/list]</div>
<div id="contenuto">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</div>
<div id="footer">©2008 nomesitoeureka.it | "Eureka!" è un progetto realizzato dai ragazzi dell'istituto De La Salle di Benevento - Per contatti: [email]info@nomesitoeureka.it[/email]</div>
</div>
</body>
</html>
QUI c'è l'archivio zip con tutto il codice già pronto.Codice PHP:body {
background-color:#FFFFCC;
font-family: Arial, Helvetica, sans-serif;
}
#generale {
width: 800px;
margin: 0px auto;
border-left-width: 1px;
border-left-style: solid;
background-color: #FFFFFF;
border-right-width: 1px;
border-right-style: solid;
}
#testata {
margin-top: 10px;
margin-bottom: 0px;
padding-right: 2px;
width: 800px;
margin: 0px auto;
}
#sottotitolo {
margin-top: 10px;
margin-bottom: 10px; /*border-bottom-style: dashed;
border-bottom-width: 1px;
border-bottom-color:#000000;*/;
padding-top: 10px;
width: 80%;
margin: 0px auto;
color: #000099;
font-weight: bold;
font-size: small;
font-style: oblique;
}
#menu {
margin-top: 8px;
margin-bottom: 0px;
margin: 0px auto;
padding: 8px 2px 0px 2px;
text-align: center;
width: 80%;
}
#contenuto {
margin-top: 2px;
padding: 15px;
font-size: small;
width: 75%;
border-left: dotted 2px;
border-color: #000099;
background-color:white;
min-height: 380px;
}
#colonne2
{
}
#menuleft
{
float: left;
width:18%;
padding: 15px 5px 3px 10px;
margin-right: 2px;
font-size: 9.3pt;
font-weight: bolder;
}
#menuleft ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
line-height: 1.7;
text-align: center;
font-family: Garamond, Times New Roman, Arial;
}
#menuleft li
{
border-bottom: ridge 1px;
background-color: lightblue;
margin: 7px 0px 7px 0px;
}
#menuleft li a
{
text-decoration: none;
color: Black;
}
#menuleft li a:hover
{
border-bottom: ridge 1px;
background-color: #000099;
padding: 3px 10px 3px 10px;
color: White;
}
#menuleft .long li a:hover
{
border-bottom: ridge 1px;
background-color: #000099;
padding: 3px 0px 3px 0px;
color: White;
}
#footer {
margin-top: 5px;
border-top: 1px ridge;
border-bottom: 2px solid;
padding: 0px 2px 0px 2px;
font-size: x-small;
text-align: center;
background-color: #000099;
color: white;
clear: left;
}
Grazie mille in anticipo a chiunque sappia darmi una mano.
Rispondi quotando
