Fastidioso problema di incompatibilità di un mio CSS su vari Browser
Gent. Utenti di Altervista ho un fastidioso problema di incompatibilità di un CSS della famiglia ZEN GARDEN da me riadattato nel nuovo browser della Microsoft e con estremo dispiacere o constatato che in pratica viene ben interpretato solo nella versione precedente di IE in quanto anche altri browser come FireFox Mal lo digeriscono.
Il sito in questione è questo: http://biba.altervista.org/index.php è il file CSS è cosi composto:
Codice:
BODY#css-zen-garden {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 11px; BACKGROUND: #a1b4cd; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: verdana, arial, sans-serif
}
ACRONYM {
CURSOR: help
}
#container {
WIDTH: 100%; TEXT-ALIGN: left
}
#intro {
WIDTH: 100%; HEIGHT: 276px
}
UNKNOWN {
RIGHT: 0px; BOTTOM: 0px; POSITION: fixed
}
HTML #intro {
BOTTOM: -10px; BORDER-BOTTOM: #fff 3px solid; POSITION: fixed
}
#intro {
HEIGHT: auto; voice-family: inherit
}
#pageHeader {
RIGHT: 0px; BACKGROUND: url('pageHead_bg.jpg') no-repeat left top; WIDTH: 332px; POSITION: absolute; TOP: 0px; HEIGHT: 283px
}
#pageHeader IMG {
RIGHT: 0px;
POSITION: absolute;
TOP: 33px;
WIDTH: 332px;
HEIGHT: 250px;
}
UNKNOWN {
RIGHT: 0px; POSITION: absolute
}
#pageHeader H1 {
DISPLAY: none
}
#pageHeader H2 {
DISPLAY: none
}
#preamble {
padding:0px; BACKGROUND: #a1b4cd url('preamble_bg.gif') repeat-y right top; LEFT: 0px; MARGIN: 0px; WIDTH: 312px; POSITION: absolute; TOP: 0px; HEIGHT: 283px
}
UNKNOWN {
LEFT: 0px; POSITION: absolute
}
#preamble H3 {
padding:0px; BACKGROUND: url('preamble_h3_bg.gif') no-repeat left top; MARGIN: 0px; WIDTH: auto; HEIGHT: 48px
}
#preamble H3 SPAN {
DISPLAY: none
}
#preamble P {
MARGIN: 0px 10px 10px; COLOR: #2e3c55; LINE-HEIGHT: 16px
}
#quickSummary {
BORDER-RIGHT: 3px solid #fff; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url('quickSum_bg.gif') repeat-x right top; PADDING-BOTTOM: 0px; PADDING-TOP: 52px; HEIGHT: 231px; voice-family: inherit; margin-left:312px; margin-right:332px; margin-top:0px; margin-bottom:0px
}
#quickSummary P {
MARGIN: 0px 10px 10px; COLOR: #fff
}
#quickSummary A:link {
COLOR: #fff
}
#quickSummary A:active {
COLOR: #fff
}
#quickSummary A:active {
COLOR: #fff
}
#quickSummary A:hover {
COLOR: #ddd
}
#supportingText {
MARGIN-TOP: -3px; FLOAT: left; WIDTH: 100%; MARGIN-RIGHT: -332px
}
#supportingText H3 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#supportingText P {
MARGIN: 10px 10px 0px; COLOR: #2e3c55; LINE-HEIGHT: 16px; max-width: 525px
}
#explanation {
BORDER-RIGHT: #fff 3px solid; BACKGROUND: #e7f0ff; MARGIN: 0px 332px 0px 0px
}
#participation {
BORDER-RIGHT: #fff 3px solid; BACKGROUND: #e7f0ff; MARGIN: 0px 332px 0px 0px
}
#benefits {
BORDER-RIGHT: #fff 3px solid; BACKGROUND: #e7f0ff; MARGIN: 0px 332px 0px 0px
}
#requirements {
BORDER-RIGHT: #fff 3px solid; BACKGROUND: #e7f0ff; MARGIN: 0px 332px 0px 0px
}
#participation {
PADDING-TOP: 15px;
}
#benefits {
PADDING-TOP: 15px
}
#requirements {
PADDING-TOP: 15px
}
#requirements {
PADDING-BOTTOM: 25px
}
#explanation H3 {
BACKGROUND: url('exp_h3_bg.gif') no-repeat left top; HEIGHT: 51px
#benefits H3 {
BACKGROUND: url('ben_h3_bg.gif') no-repeat left top; HEIGHT: 51px
}
#requirements H3 {
BACKGROUND: url('req_h3_bg.gif') no-repeat left top; HEIGHT: 51px
}
#explanation H3 SPAN {
DISPLAY: none
}
#participation H3 SPAN {
DISPLAY: none
}
#benefits H3 SPAN {
DISPLAY: none
}
#requirements H3 SPAN {
DISPLAY: none
}
#supportingText A:link {
COLOR: #4f5e77
}
#supportingText A:active {
COLOR: #4f5e77
}
#supportingText A:visited {
COLOR: #4f5e77
}
#supportingText A:hover {
COLOR: #0c1a33
}
#preamble A:link {
COLOR: #4f5e77
}
#preamble A:active {
COLOR: #4f5e77
}
#preamble A:visited {
COLOR: #4f5e77
}
#preamble A:hover {
COLOR: #0c1a33
}
UNKNOWN {
PADDING-BOTTOM: 300px
}
#footer {
BORDER-RIGHT: #fff 3px solid; PADDING-RIGHT: 0px; BORDER-TOP: #fff 3px solid; PADDING-LEFT: 0px; BACKGROUND: #d6e0ee; PADDING-BOTTOM: 15px; MARGIN: 0px 332px 0px 0px; PADDING-TOP: 15px; BORDER-BOTTOM: #fff 3px solid; TEXT-ALIGN: center
}
UNKNOWN {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; RIGHT: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 160px 0px 0px; BOTTOM: 261px; PADDING-TOP: 0px; POSITION: fixed; TEXT-ALIGN: left; BORDER-RIGHT-WIDTH: 0px
}
#footer A:link {
COLOR: #1e2e43
}
#footer A:active {
COLOR: #1e2e43
}
#footer A:visited {
COLOR: #1e2e43
}
#footer A:hover {
COLOR: #fff
}
#linkList {
BORDER-RIGHT: #fff 3px solid; BACKGROUND: #cbd6e5; FLOAT: right; PADDING-BOTTOM: 453px; WIDTH: 180px; MARGIN-RIGHT: 149px; BORDER-BOTTOM: #fff 3px solid
}
UNKNOWN {
PADDING-BOTTOM: 700px
}
#linkList H3 {
FONT-SIZE: 12px; BACKGROUND: #bac5d4; COLOR: #4f5e77; FONT-FAMILY: georgia, serif
}
H3.select {
PADDING-RIGHT: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px 0px 5px; PADDING-TOP: 10px; BORDER-BOTTOM: #4f5e77 1px dotted
}
H3.archives {
PADDING-RIGHT: 0px; BORDER-TOP: #4f5e77 1px dotted; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 10px 0px 5px; PADDING-TOP: 10px; BORDER-BOTTOM: #4f5e77 1px dotted
}
H3.resources {
PADDING-RIGHT: 0px; BORDER-TOP: #4f5e77 1px dotted; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 10px 0px 5px; PADDING-TOP: 10px; BORDER-BOTTOM: #4f5e77 1px dotted
}
#linkList H3:hover {
BACKGROUND: #a9b4c3; COLOR: #fff
}
#linkList UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 5px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#linkList UL LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 15px; FONT-SIZE: 10px; PADDING-BOTTOM: 5px; COLOR: #6f7f99; PADDING-TOP: 5px
}
#linkList UL LI:hover {
BACKGROUND: url('listBullet.gif') no-repeat 5px 10px;
}
#linkList UL LI A:link {
DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #4f5e77
}
#linkList UL LI A:active {
DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #4f5e77
}
#linkList UL LI A:visited {
DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #4f5e77
}
#linkList UL LI A:hover {
COLOR: #fff
}
#linkList UL LI A.c {
DISPLAY: inline; FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #6f7f99
}
@media Unknown
{
DIV#intro {
RIGHT: 0px; WIDTH: 100%; BORDER-BOTTOM: #fff 3px solid; POSITION: absolute; TOP: 0px; HEIGHT: 283px
}
DIV#supportingText {
MARGIN-TOP: 280px
}
DIV#footer {
RIGHT: 0px; POSITION: absolute; TOP: 12px
}
DIV#linkList {
MARGIN-TOP: 280px
}
}
#extraDiv1 {
DISPLAY: none
}
#extraDiv2 {
DISPLAY: none
}
#extraDiv3 {
DISPLAY: none
}
#extraDiv4 {
DISPLAY: none
}
#extraDiv5 {
DISPLAY: none
}
#extraDiv6 {
DISPLAY: none
}
form {
border: 1px dashed #666;
width: 90%;
padding: 1em;
}
label {
display: block;
width: 100px;
float: left;
text-align: right;
padding-right: 0.5em;
}
select {
border: none;
background: #cbd6e5;
color: #4f5e77;
font: bold 1em verdana;
letter-spacing: .1em;
word-spacing: .2em;
}
input {
width: 150px;
border: none;
border-bottom: 1px dashed #666;
background: #cbd6e5;
color: #4f5e77;
font: bold 1em verdana;
letter-spacing: .1em;
word-spacing: .2em;
}
textarea {
width: 90%;
height: 150px;
border: none;
background: #cbd6e5;
color: #4f5e77;
font: bold 1em verdana;
letter-spacing: .1em;
word-spacing: .2em;
}
In pratica il problema è il seguente:
I DIV concatenati all'interno di INTRO dovrebbero comparire in alto su Browser mostrando a sinistra gli orari e la mission del negozio mentre a destra dovrebbe comparire una Gallery random con delle foto. Mentre invece questi DIV vengono inseriti nel nuovo IE in fondo a destra rendendo illegibile il contenuto dello stesso e in browser come Firefox vengono piazzati in basso dando come l'effetto di un FRAME piazzato male.
Richiedo il vostro aiuto in quanto io di CSS non ne capisco molto...E non so come riportare alla normalità l'idea che avevo per questo layout.
Grazie in anticipo aspetto vostri consigli
