|
| Precedente :: Successivo |
| Autore |
Messaggio |
xbandx
Eroe
Registrato: 31/05/06 22:12
Messaggi: 41
|
 Inviato: 31 Mag 2006 22:17 Oggetto: problemi CSS IE e FF chi mi aiuta? |
 |
|
ragazzi ho un piccolo problemino di copatibilita' la seguente pagina
http://www.cremeriascirocco.it/tst/test6/gusti_salati/zucca_pepe.htm
ha un menu sulla dx che con IE e' perfetto mentre con FF si "sbiancia" tutto a DX!!! come devo fare?
allego il fileCSS
| Codice: |
body {
background-color: #4A4A4A;
background-image: url(../images/kl-pbgtexture.jpg);
color: #333333;
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 20px 0;
padding: 0;
}
#masthead {
background-image: url(../images/logo_top.jpg);
background-repeat: no-repeat;
height: 162px;
}
/********LAYOUT WRAPPER**********/
#layout {
width: 766px;
margin: 0 auto;
background-color: #FFFFFF;
background-image: url(../images/kl-shadow1.jpg);
background-repeat: repeat-y;
}
/********MENU WRAPPER**********/
#menubar {
font-size: 0.8em;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0 auto;
width: 750px;
}
/********COLUMN WRAPPER**********/
#columnwrapper {
margin: 0 auto;
width: 750px;
padding: 1em 0 0 0;
}
/*MAIN and SIDEBAR COLUMNS
Width of both must equal width of columnwrapper
540 + 210 = 750 */
#mainbox {
float: left;
width: 540px;
}
#sidebox {
float: left;
width: 210px;
}
/********CONTENT CONTAINERS*********/
/*Main Content*/
#maincontent {
padding: 0 30px 20px 30px;
font-size: 0.95em;
background-image: url(../images/kl-vrule.gif);
background-repeat: repeat-y;
background-position: right top;
}
#maincontent p{
line-height: 1.5em;
margin: 8px 0 12px 0;
}
/*META class is used to style the META section of the MENU and the FILED UNDER
text in the posts */
.meta {
font-size: 10px;
/*Use this font size here to eliminate any inheritance problem*/
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.meta {
color: #808080; /*META class text and anchors this colour, please */
font-weight: normal; /*No thin or heavy text weights*/
letter-spacing: 0; /*Ensure letter spacing is this to avoid inheritance problem*/
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.meta ul {
display: inline; /*Display the UNORDERED LIST horizontally*/
margin: 0; /*You know what this is */
padding: 0; /*This you know as well*/
list-style: none; /*Don't use bullets for the list*/
}
.meta li {
display: inline; /*Let's display each LIST item horizontally too */
}
.callout {
float: left;
width: 132px;
margin: 6px 8px 0px 0px;
padding: 10px;
border: 1px solid #333333;
font-size: 0.75em;
}
.calloutMED {
float: left;
width: 205px;
margin: 6px 8px 0px 0px;
padding: 10px;
border: 1px solid #333333;
font-size: 0.75em;
}
.calloutGUSTI {
float: left;
width: 150px;
margin: 6px 8px 0px 0px;
padding: 10px;
border: 1px solid #333333;
font-size: 0.85em;
}
.calloutBIG {
float: left;
width: 450px;
margin: 6px 8px 0px 0px;
padding: 10px;
border: 1px solid #333333;
font-size: 0.75em;
}
.calloutR {
float: right;
width: 132px;
margin: 0px 0px 8px 6px;
padding: 10px;
border: 1px solid #333333;
font-size: 0.75em;
}
.calloutN {
float: left;
width: auto;
margin: 6px 8px 0px 0px;
border: 0px solid #333333;
font-size: 0.75em;
padding: 10px;
}
.calloutCENTER {
float: none;
width: 450px;
margin: 0px 0px 0px 0px;
padding: 10px;
border: 1px solid #333333;
font-size: 0.75em;
}
/*Sidebar*/
#sidecontent {
font-size: 0.7em;
padding: 0 20px 20px 20px;
margin: 0 0 0 0;
background-image: url(../images/kl-yellowgradient.jpg);
background-repeat: no-repeat;
background-position: right top;
}
#sidecontent p{
line-height: 1.35em;
margin: 12px 0;
}
/********HEADINGS*******/
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 1.75em;
}
h1, h2, h3, h4 {
line-height: normal;
font-family:"Trebuchet MS", Arial, sans-serif;
}
h2 {
margin: 1.5em 0 0 0;
font-size: 1.35em;
}
h3 {
margin: 1.5em 0 0 0;
font-size: 1.25em;
}
#sidecontent h3.topheading {
margin: 0;
}
/*CLEARING the LAYOUT FLOATS*/
.clearit {
font-size: 0;
line-height: normal;
height: 0px;
clear: both;
}
/********BOTTOM SHADOW GRAPHIC**********/
#bottom {
background-image: url(../images/kl-footer1.jpg);
background-repeat: no-repeat;
height: 48px;
background-position: left bottom;
}
/***********FOOTER************/
/*Footer Container*/
#footerbox {
width: 750px;
margin: 0 auto;
font-size: 0.7em;
color: #CECCC4;
}
/*Footer Content*/
#footer {
padding: 0 0 0 30px;
}
/******SKIP LINKS********/
/*Skip Links Container*/
#skips {
position: absolute;
top: 6px;
right: 15px;
margin: 0 15px 0 0;
}
/*Skip Link Link Styles*/
#skips a, #skips a:visited, #skips a:hover {
color: #7D7865;
cursor: default;
font-size: 0.1em;
}
.p7fix a:active, #skips a:active, #skips a:focus {
color: #FFFFFF;
background-color: #4a4a4a;
cursor: pointer;
font-size: .8em;
}
/*********PAGE LINK STYLES********/
#columnwrapper a:hover, #columnwrapper a:active, #columnwrapper a:focus,
#footer a:hover, #footer a:active, #footer a:focus {
background-color: #4D4D4D;
color: #FFFFFF;
text-decoration: none;
}
/******TAB BAR MAGIC NAVBAR STYLES********/
#p7TBMroot {
font-size: 1em;
border-top: 1px solid #333333;
background-image: url(../images/kltab_bevel_bottom.jpg);
padding: 0 0 16px 0;
background-repeat: repeat-x;
background-position: left bottom;
}
#p7TBMrootbox {
background-image: url(../images/kl-mbar.jpg);
background-repeat: repeat-x;
background-color: #97AD73;
}
#p7TBMroot ul {
padding: 0;
margin: 0;
}
#p7TBMroot li {
list-style-type: none;
display: inline;
}
#p7TBMroot li a {
float: left;
color: #333333;
padding: 5px 10px;
text-decoration: none;
border-right: 1px solid #333333;
background-image: url(../images/klb_roots.jpg);
background-repeat: repeat;
background-position: 0px 0px;
background-color: #97AD73;
}
#p7TBMrootuberlink {
color: #333333!important;
background-color: #FFFFFF!important;
background-position: 0px -200px !important;
background-repeat: repeat;
}
/*
The Root Level Hover.
DO NOT CHANGE SELECTOR NAMES*/
#p7TBMroot li a:hover,
#p7TBMroot li a:focus,
#p7TBMroot li a:active {
color: #ECE9D8;
background-position: 0px -100px;
background-repeat: repeat;
background-color: #FFFFFF;
}
#p7TBM br {
clear: both;
height: 0;
line-height: 0.0;
font-size: 1px;
}
/*Example CSS for the two demo scrollers*/
#pscroller1{
width: 450px;
height: 1.2em;
border: 1px dashed black;
padding: 5px;
background-color: #FFFFCC;
}
#pscroller2{
width: auto;
height: 150px;
border: 1px solid black;
padding: 5px;
background-color: #F0F0F0;
}
.rssclass .rsstitle{
font-weight: bold;
}
.rssclass .rssdate{
color: gray;
font-size: 85%;
}
.rssclass a{
text-decoration: none;
}
.main {
width:160px;
border:1px solid black;
}
.month {
background-color:black;
font:bold 10px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 10px verdana;
color:white;
}
.days {
font-size: 10px;
font-family:verdana;
color:black;
background-color: #FFFFCC;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
ul.MenuGusti li a {
border-width:5px;
border-style:none solid; /* aggiungo dei bordi laterali */
}
ul.MenuGusti li a:link, ul.menu2 li a:visited {
border-color:#009
}
ul.MenuGusti li a:hover, ul.menu2 li a:active {
border-color:#66c;
}
ul.menu1 {
width:140px;
list-style:none; /* elimino i punti elenco */
margin:0; padding:0; /* elimino i rientri delle liste */
}
ul.menu1 li a {
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
height:2em;
line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */
}
ul.menu1 li { display:inline } /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/
ul.menu1 li a:link, ul.menu1 li a:visited {
color: #009;
background-color: #FFFFFF;
} /* colori per il link */
ul.menu1 li a:hover, ul.menu1 li a:active {
color:#FFCC33;
background-color: #FFCC33;
} /* colori per l'effetto roll-over */
#leftbar .headers{
color: white;
font: bold 110% Arial;
background-color: #008000;
padding: 2px;
text-align: center;
}
#leftbar .menuitems{
list-style-type: disk;
list-style-image: url(arrow.gif); /*CUSTOM CHANGE*/
margin: 5px auto 10px 17px;
padding: 0;
line-height: 1.2em;
}
#leftbar .menuitems li{
padding-bottom: 8px;
background-image: url(menuline.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
#leftbar .menuitems li a{
text-decoration: none;
font-weight: bold;
}
/*- Menu 5--------------------------- */
#menu5 {
width: 200px;
margin: 10px;
}
#menu5 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu5 li a:link, #menu5 li a:visited {
color: #FFF;
display: block;
background: url(/tst/test6/images/menu5.gif);
padding: 8px 0 0 10px;
}
#menu5 li a:hover {
color: #FFF;
background: url(/tst/test6/images/menu5.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 10--------------------------- */
#menu10 ul {
width: 150px;
margin: 0px;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu10 ul li {
list-style:none; /* elimino i punti elenco */
margin:0; padding:0; /* elimino i rientri delle liste */
}
#menu10 ul li a {
height: 24px;
voice-family: "\"}\"";
voice-family: inherit;
height: 14px;
text-decoration: none;
}
#menu10 ul li a:link, #menu10 ul li a:visited {
color: #4D4D4D;
display: block;
background: url(menu10a.gif);
padding: 8px 0 0 10px;
background-image: url(menu10c.gif);
background-repeat: no-repeat;
}
#menu10 ul li a:hover {
color: #FF9834;
background: url(menu10c.gif) 0 -24px;
padding: 8px 0 0 10px;
background-repeat: no-repeat;
}
|
|
|
| Top |
|
 |
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 01 Giu 2006 00:04 Oggetto: |
|
|
ciao xbandx, ben arrivato all'olimpo 
prova a dare l'altezza a questo div:
| Codice: |
#p7TBMrootbox {
background-image: url(kl-mbar.jpg);
background-repeat: repeat-x;
background-color: #97AD73;
height: 26px;
}
|
dovrebbe essere sufficiente |
|
| Top |
|
|
xbandx
Eroe
Registrato: 31/05/06 22:12
Messaggi: 41
|
| Inviato: 01 Giu 2006 16:03 Oggetto: |
|
|
grazie , ho provato e si e' sistemato un piccolo difettuccio in FF che mancava la continuazione della grafica verde, mentre in IE era tutto ok.
il menu che fa le bizze e' quello azzurrino (menu10) che in FF e' tuutto spostato sulla destra, mentre in IE e' OK.
grazie e attendo notizie!!!  |
|
| Top |
|
|
xbandx
Eroe
Registrato: 31/05/06 22:12
Messaggi: 41
|
| Inviato: 03 Giu 2006 23:05 Oggetto: |
|
|
tutto fatto, ho sistemato, grazie a tutti
salutoni |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 04 Giu 2006 10:38 Oggetto: |
|
|
meglio cosi'
hai voglia di dirci cos'era successo? cosi' restera' a chi eventualmente avra' lo stesso problema in futuro |
|
| Top |
|
|
xbandx
Eroe
Registrato: 31/05/06 22:12
Messaggi: 41
|
| Inviato: 04 Giu 2006 13:28 Oggetto: |
|
|
ok
allego le modifiche apportate al menu 10
/*- Menu 10--------------------------- */
#menu10 ul {
width: 150px;
margin: 0px;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 8px 0 8px 10px;/*- top, right, bottom, left */
}
#menu10 ul li {
list-style:none; /* elimino i punti elenco */
margin:0; padding:0; /* elimino i rientri delle liste */
}
#menu10 ul li a {
height: 24px;
voice-family: "\"}\"";
voice-family: inherit;
height: 14px;
text-decoration: none;
}
#menu10 ul li a:link, #menu10 ul li a:visited {
color: #4D4D4D;
display: block;
background: url(menu10a.gif);
padding: 8px 0 1px 10px;
background-image: url(menu10c.gif);
background-repeat: no-repeat;
}
#menu10 ul li a:hover {
color: #FF9834;
background: url(menu10c.gif) 0 -24px;
padding: 8px 0 1px 10px;
background-repeat: no-repeat;
}
la modiica riguarda l'inserimento del padding e sua relativa centratura.
ecco il link per la verifica del menu:
http://www.cremeriascirocco.it/tst/test6/gusti_salati/sedano_olio.htm
salutoni a tutti |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 04 Giu 2006 13:34 Oggetto: |
 |
|
grazie mille!
ciao, alla prossima |
|
| Top |
|
|
|
|
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
