Css compatibile

[Barra&Co]

Buonasera a tutti, chiedo un vostro aiuto in quanto è ormai da settimane che cerco una soluzione al mio problema. Ho creato un sito web ma mi sono accorto solo ora che solo con IE lo vedo correttamente, con Firefox, Safari ecc è un vero disastro..come faccio a rendere compatibile il miei css anche per gli altri browser? ho provato il reset css elaborato da Eric Meyer, ho provato anche quello utilizzato da Yahoo,ma senza successo..la verità che non ne capisco molto di css..sono proprio alle prime basi. Qualche anima pia che mi aiuta?
posto qui sotto i miei css speranzoso di avere delle risposte che mi possino aiutare.

1°css

.vbULdkjgt {
position: absolute;
visibility: hidden;
display: block;
overflow: auto;
font-size: 1px;
background-color: #FFFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666666;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #666666;
border-right-width: 1px;
border-bottom-width: 5px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #666666;
border-bottom-color: #666666;
}

.vbULdkjgt tr.over {
background-color:#dbd4c0;
color: #FFFFFF;
}

.vbULdkjgt td {
border :1px solid #FFFFFF;
padding: 2px;
text-align: left;
}

.vbULdkjgt td a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
}

/*.vbULdkjgt tr.over a{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}*/

.header-menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
text-decoration: none;
color: #7e6c35;
}

.header-menu:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
text-decoration: none;
color: #000000;
}

.menu{
PADDING-LEFT: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;

}


.menu:hover{
color: #000000;
}

.recent{
background-image:url(images/td-back.gif);
background-repeat: repeat-x;
}

.recent-over{
background-image:url(images/td-back-roll.gif);
background-repeat: repeat-x;
}

.recent-link{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
padding-left: 20px;
}

.recent-link:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: underline;
padding-left: 20px;
}

.search-text{
color: #666666;
font-family: Arial, Helvetica, sans-serif;
height: 12px;
padding-left: 5px;
width: 130px;
text-decoration: none;
font-size: 12px;
}

.news{
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
text-decoration:none;
}

.news:hover{
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
text-decoration: underline;
}

.featured-text-title{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
}

.featured-text-title:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #126198;
text-decoration: none;
}

.featured-text{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
text-align: justify;
}

.penality-bottomline{
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #3c91cd;

}

.heading-link{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #996600;
text-decoration: none;
}

.heading-link:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
text-decoration: none;
}

.penality-text{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
border-left-width: 1px;
border-left-style: dashed;
border-left-color: #999999;
padding: 5px;
text-align: justify;
}

.featured-bottomline{
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999999;
}

.featured-border{
border:#999999 solid 1px;
}

#footer{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
}

#footer a{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
}

#footer a:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
text-decoration: underline;
}

2°css

ul.vbULdkjgt {
position: absolute;
visibility: hidden;
}

.vbULdkjgt {
position: absolute;
visibility: hidden;
display: block;
overflow: auto;
font-size: 1px;
background-color: #FFFFFF;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #666666;
border-right-width: 1px;
border-bottom-width: 5px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #666666;
border-bottom-color: #666666;
}

.vbULdkjgt tr.over {
background-color:#f5033c;
}

.vbULdkjgt td {
border :1px solid #FFFFFF;
padding: 2px;
text-align: left;
}

.vbULdkjgt td a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
}
.vbULdkjgt tr.over a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}

.search-text{
border: 1px solid #000000;
color: #666666;
font-family: Arial, Helvetica, sans-serif;
height: 12px;
padding-left: 5px;
width: 120px;
font-size: 11px;
vertical-align: middle;
text-decoration: none;
margin-bottom: 2px;
}

.menu{
PADDING-LEFT: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #666666;
text-decoration: none;

}
.menu:hover{

PADDING-LEFT: 0px;
color: #000000;
}

.header-content{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #999999;
text-decoration: none;
line-height:16px;
margin: 4px;
padding-top: 22px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 26px;
border-right-width: 1px;
border-right-style: dashed;
border-right-color: #CCCCCC;
text-align: justify;
}

.more{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #133690;
text-decoration: none;

}

.more:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ef0707;
text-decoration: none;

}

.dot-bottom-line{
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCCCCC;
}

.footer{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
padding: 8px;
}

.footer-link{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
}

.footer-link:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
}

.side-link{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #333333;
text-decoration: none;
letter-spacing: .2em;
}

.side-link:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #333333;
text-decoration: underline;
letter-spacing: .2em;
}

.side-text{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #999999;
text-decoration: none;
font-weight: normal;
padding-top: 10px;
padding-right: 4px;
padding-bottom: 10px;
padding-left: 6px;
text-align: justify;
white-space: normal;
}

p{
PADDING-RIGHT: 0px; FONT-SIZE: 8pt; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000000; LINE-HEIGHT: 12pt; PADDING-TOP: 0px; FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
}

.navigation{
color: #003596;
text-decoration: none;
}

.navigation:hover{
color: #003596;
text-decoration: underline;
}

.heading{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #003596;
}

.sideheading{
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
font-weight: bold;
}

.paragraph-padding{
padding-top: 5px;
padding-right: 13px;
padding-bottom: 5px;
padding-left: 13px;
}

.text-link{
color: #003596;
text-decoration:none;
}

.text-link:hover{
color: #ef0707;
text-decoration:none;
}

3° css

ul.vbULdkjgt {
position: absolute;
visibility: hidden;
}


.vbULdkjgt {
position: absolute;
visibility: hidden;
display: block;
overflow: auto;
font-size: 1px;
background-color: #FFFFFF;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #666666;
}

.vbULdkjgt table {
border-collapse: separate;
border-spacing: 0px;
}
/*.vbULdkjgt tr {
font-size: 1px;
cursor: pointer;
background-color: #908f8f;
}*/
.vbULdkjgt tr.over {
background-image: url(../images/drop-menu-back.gif);
background-repeat: repeat-x;
/* background-color: #ececec;*/
}
.vbULdkjgt td {
border :1px solid #FFFFFF;
padding: 2px;
text-align: left;
}
/*.vbULdkjgt tr.over td {
border-color: #fff;
}*/
.vbULdkjgt td a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
}
.vbULdkjgt tr.over a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #333333;
text-decoration: none;
}
/*.vbULdkjgt tr.popup {
background-color: #FFFFFF;
}*/
/*.vbULdkjgt tr.popup td {
border-color: #FFFFFF;
}*/
/*.vbULdkjgt tr.popup a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #0c478d;
text-decoration: none;
}*/
/*.vbULdkjgt tr.separator div {
border-style: solid none none none;
height: 0px;
border-width: 1px;
border-color: #0c478d;
}*/

Grazie.

[codencode]

Sarebbe opportuno avere anche il codice HTML o meglio un link al sito.
Un consiglio: nel postare il codice, utilizzare la funzione CODE prevista nell'editor di questo forum e rispettare l'indentazione.

[Barra&Co]

Scusate per non aver utilizzato il CODE, linko qui l'html..in particolare le ultime foto vengono sfalsate con Firefox, la visualizzazione corretta la ho solo con IE.
Grazie 1000.

Link Html

[Barra&Co]

Nessuna soluzione al mio problema? sono in crisi :S

[Mich_]

Hai iniziato da una pagina piuttosto complessa.

Anzitutto elimina il JS, che rende piu` complesso lavorare con i CSS. Potrai reinserirlo alla fine (se prorpio e` necessario), quando il layout e` a posto.

Poi devi eliminare le tabelle: la formattazione non si puo` piu` fare con le tabelle che da un lato inseriscono contenuto semantico sbagliato, e dall'altra inseriscono anche formattazione propria (che poi` e` complicato togliere).

E` sempre sconsigliabile iniziare a formattare per IE(modalita` retrocompatibile), perche` poi e` impossibile adattare il layout ai brwoser standard.
Se proprio devi usare IE, usalo in maniera standard, cambiando la DTD in
XHTML 1.0 Strict

Comunque in rete ci sono vari esempi di layout corretti. Alcuni sono stati raccolti tra i "link utili" del forum, per cui ti consiglio di andare a farrti un giro in rete partendo da li`.