Ciao ragazzi, sono entrato da poco nel mondo di Joomla e sto provando a fare un sito per una scuola di lingue di un amico.
Il problema che mi si presenta non è tanto riguardante Joomla in sè, ma la solita differenza di visualizzazione tra internet explorer e tutto il resto..
Nel sito ho dei <ul> disposti in orizzontale (uno anche riguardante il compontente GKtab_manager - o qualcosa del genere -); mentre in Firefox tutto va come deve andare, in Internet Explorer (ho provato la versione 8 sia sulla mia macchina virtuale che su un altro pc con Xp) i menu vengono visualizzati verticalmente.
Ho inserito 2 immagini per far notare la differenza.
Un altro problema che si può notare dalle immagini, nel menu principale (in verticale sulla sinistra) ho inserito una piccola freccia come sfondo del tag <a> e ovviamente in firefox si vede ed in internet explorer no.
Mi permetto di inserire anche il css, spero possa esservi utile per darmi una mano...
body {
text-align: center;
color: #333333;
}
a {
color: #000066;
text-decoration: none;
}
a:hover {
color: #819DFF;
text-decoration: underline;
}
div#header {
position: relative;
background: url("../images/head_back.png") scroll transparent 0 0 repeat;
height: 185px;
text-align: center;
margin: auto;
padding-top: 20px;
border-bottom: 7px solid #819DFF;
}
div#headercont {
text-align: left;
}
h1.logo {
margin-top: 7px;
}
h1.logo a {
background: url("../images/logo_international_club.png") no-repeat scroll center center;
width: 500px;
height: 150px;
display: block;
}
h1.logo a span {
position: absolute;
left: -9999px
}
/* -- Sezione Menu Orizzontale nell'header -- */
div#menu_tab {
position: absolute;
bottom: 0px;
}
div#menu_tab ul {
list-style: none outside none;
margin: 0px;
overflow: hidden;
padding: 20px 20px 0px;
}
div#menu_tab li {
float: left;
display: inline;
}
div#menu_tab li a {
border-bottom: 2px solid transparent;
display: block;
padding-bottom: 7px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: arial;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
}
div#menu_tab li a:hover{
border-bottom: 2px solid #FFCC00;
}
/* -- Fine Sezione Menu Orizzontale nell'header -- */
div#wrap {
text-align: left;
background-color: #FFFFFF;
padding-top: 5px;
}
div#left {
padding-top: 5px;
}
div#left ul.menu {
list-style: none outside none;
margin 0px;
padding 0px;
width: 100%;
}
div#left ul.menu li {
display: inline;
border-bottom: 1px dotted #777777;
margin: 0px;
padding: 0px;
}
div#left ul.menu li a {
background: url("../images/arrow.gif") scroll no-repeat 3px center transparent;
padding: 10px 25px;
display: block;
color: #333333;
}
div#left ul.menu li a:hover {
color: #819DFF;
text-decoration: none;
}
div#left ul.menu li.active a{
color: #819DFF;
font-weight: bold;
}
div#navigation {
padding: 2px 5px;
margin: 3px;
background-color: #FFFFCC;
}
.breadcrumbs {
font-size: 10px;
font-weight: bold;
color: #819DFF;
}
div#gktab {
padding: 2px 5px;
margin: 3px;
border: 2px solid #819DFF;
}
div.moduletable {
margin: 5px 0px 0px;
padding: 3px;
}
div.moduletable h3,
div.moduletable_default h3,
div.moduletable_menu h3,
div.moduletable_text h3,
div.moduletable_hilite h3 {
background: url("../images/bullet.gif") left center no-repeat;
padding: 0px 0px 1px 25px;
margin-bottom: 10px;
}
h2.contentheading {
font-size: 17px;
color: #000066;
margin-bottom: 10px;
}
form#form-login fieldset, form#form-login p {
margin-bottom: 7px;
}
form#form-login input {
background: #819DFF;
color: #FFFFFF;
padding: 2px;
border: 1px solid #000066;
}
form#form-login input:focus {
border: 1px solid #FFCC00;
}
form#form-login ul a{
text-decoration: none;
color: #333333;
}
form#form-login ul a:hover{
text-decoration: none;
color: #819DFF;
}
/* -- Inizio Sezione Contenuto -- */
div#page h3, div#page h4, div#page h5 {
margin-bottom: 7px;
}
div#page h6 {
color: #333333;
font-weight: bold;
margin-bottom: 5px;
}
table#tablevels {
border: 1px solid #000066;
width: 100%;
}
table#tablevels td {
border: 1px solid #000066;
padding: 3px;
text-align: center;
vertical-align: middle;
}
table#tablevels thead td {
vertical-align: bottom;
font-weight: bold;
}
ul.check {
list-style: url("../images/check.gif");
}
li h6 {
margin-bottom: 0px !important;
}
table.category td {
font-size: 125%;
padding: 10px 0px 10px 30px;
}
/* -- Fine Sezione Contenuto -- */
/* -- Inizio Contattaci -- */
div.img_con {
float:right;
}
div.img_con img.contatto{
align: middle;
width: 100px;
height: 100px;
}
div.contact_address {
font-size: 125%;
font-style: normal;
}
div.contact_address span.marker {
margin: 0px 4px 0px 0px;
}
div.contact_address span.marker img {
margin: 10px 0px 0px;
}
div.contact_email label, div.contact_email_checkbox label {
color: #000066;
font-size: 95%;
}
div.contact_email input, div.contact_email textarea{
margin: 2px 0px;
border: 1px solid #000066;
}
button.validate {
margin: 5px 0px 5px 250px;
}
/* -- Fine Contattaci -- */
/* -- Inizio sezione Footer -- */
div#footer_back {
width: 100%;
height: 200px;
border-top: 15px solid #3366FF;
background-color: #C5E8FF;
}
div#footer {
background: none;
margin-top: 5px;
}
div#footer_inc {
color: #060E3F;
padding: 5px 0px;
background: none;
}
div#footer_inc a {
color: #3366FF;
}
div#footer_inc #foot {
text-align: right;
}
div#footer_inc #validate {
text-align: left;
}
/* -- Fine sezione Footer -- */Ah, sto usando il framework 960 Grid System.
Scusate la lunghezza ma non so più che pesci pigliare.
Grazie in anticipo per l'aiuto
