[xhtml]problema con margini

[LA VALE]

Sto realizzando un sito completamente in xhtml.
L'ho testato con Internet explorer, opera e netscape, e tutto funziona bene.
Ora, testandolo anche con Firerox, mi è sorto un enorme peoblema.

Il sito è così strutturato:
ci sono due colonne laterali con i menu, e una sezione centrale, che contiene tutti i contenuti.
Le colonne laterali sono larghe entrambe 150px.
Per la sezione centrale, ho impostato un margine di questo tipo nel css:

margin {0px 150px};

In questo modo la sezione centrale, viene a disporsi tra le due colonne laterali.

Il problema che mi crea Firefox è il seguente:
il margine laterale di 150px, non viene calcolato dal lato esterno del contenitore in cui sono racchiuse le due colonne e la sezione centrale, ma viene calcolato dai due lati interni delle colonne.
Ho allegato uno screenshot dello strano comportamento di FirefoX.
Se dal css provo a togliere il margine di 150px alla sezione centrale, con Firefox funziona tutto correttamente, ma con gli altri browsers, naturalmente no..

Come posso risolvere?

Grazie

[Marcolino's]

stesso problema e ne sto discutendo con G. Troiani e S. Postai, chi lo risolve vince un premio

[Marcolino's]

Scusa Vale, tu prima sviluppi in IE e poi guardi con FF per caso? Se è così ti complichi enormemente la vita.

[andrea.paiola]

Originariamente inviato da Marcolino's
Scusa Vale, tu prima sviluppi in IE e poi guardi con FF per caso? Se è così ti complichi enormemente la vita.

già è meglio sviluppare per FF (è + standard!)e poi con vari hack e trucchetti risolvi i problemi con gli altri browser...
Mi sembra che anche in questo caso Firefox si comporti meglio di IE... aggiustalo per Firefox e poi puoi servire "pezzi" di CSS alternativo a IE usando per esempio !important o il child selector (>)...

[Marcolino's]

Originariamente inviato da andrea.paiola
già è meglio sviluppare per FF (è + standard!)e poi con vari hack e trucchetti risolvi i problemi con gli altri browser...
Mi sembra che anche in questo caso Firefox si comporti meglio di IE... aggiustalo per Firefox e poi puoi servire "pezzi" di CSS alternativo a IE usando per esempio !important o il child selector (>)...

Sì ma dare una spiegazione di quel comportamento? Servirebbe anche a me

Il problema sta nel float che interrompe il flusso di reindirizzamente dei vari contenitori, un po' come absolute.

[LA VALE]

Io non sviluppo per internet explorer, e poi testo con firefox...
Io sviluppo il sito testandolo contemporaneamente con tutti i browsers che ho a disposizione (Ie, opera, netscape, firefox)...
E questo problema con firefox vorrei riuscire a risolverlo a livello di css, perchè non voglio inserire script o robe simili per adattare i css al browser che usa il visitatore...

[andrea.paiola]

Originariamente inviato da LA VALE
Io non sviluppo per internet explorer, e poi testo con firefox...
Io sviluppo il sito testandolo contemporaneamente con tutti i browsers che ho a disposizione (Ie, opera, netscape, firefox)...
E questo problema con firefox vorrei riuscire a risolverlo a livello di css, perchè non voglio inserire script o robe simili per adattare i css al browser che usa il visitatore...

Niente script: solo hack e trucchetti CSS... posta il codice e vediamo di modificarlo...

[LA VALE]

Il file css è questo:
http://lv4er.altervista.org/varie/style.css

[LA VALE]

ops, il link non funziona...non capisco il perchè...
devo scaricare un nuovo ftp perchè su questo pc non ce l'ho...

[LA VALE]

ok, non riesco a scaricare un ftp funzionante, quindi vi posto di seguito tutto il css...
Confido in voi...

body, html {
margin: 0px;
padding: 0px;
}
*{
margin: 0px;
padding: 0px;
}
body {
background-color: #ffffff;
text-align: center;
padding: 0px;
margin: 2px auto;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #000000;
overflow: hidden;
}
#main {
margin: 0px auto;
padding: 0px;
text-align: left;
width: 780px;
w\idth: 780px;
\width: 780px;
}
#lingua {
margin: 0px;
padding: 0px;
width: 390px;
w\idth: 390px;
\width: 390px;
text-align: left;
border-bottom: 1px solid #000000;
height: 34px;
float: left;
}
#lingua img {
border: 0px;
margin: 0px 0px 0px 40px;
padding: 0px;
}
#headertop {
width: 390px;
w\idth: 390px;
\width: 390px;
overflow: hidden;
background: url(/images/sfondi/header_top.jpg) no-repeat;
height: 35px;
margin: 0px;
padding: 0px;
float: left;
border: 0px;
}
#header {
margin: 0px;
padding: 0px;
background: repeat-y url(/images/sfondi/header.jpg);
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 0px;
clear: both;
height: 80px;
}
#path {
position: relative;
top: 1px;
left: 0px;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
color: #cccccc;
float: left;
width: 385px;
\width: 390px;
w\idth: 385px;
height: 24px;
overflow: hidden;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
padding-top: 5px;
padding-left: 3px;
}
#path a {
color: #cccccc;
}
#path a:hover {
color: #000000;
}
#ricerca {
margin: 0px 0px 0px 5px;
width: 383px;
\width: 390px;
w\idth: 383px;
position: relative;
top: 1px;
float: left;
font-family: Verdana, Arial, sans-serif;
color: #cccccc;
font-size: 11px;
font-weight: bold;
height: 29px;
overflow: hidden;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
.clearer {
clear: both;
padding: 0px;
margin: 0px;
}
/* nel codice html, le due colonne laterali vanno messe prima del contenuto!!! */
#container {
width: 778px;
w\idth: 780px;
\width: 778px;
margin: 0px auto;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
text-align: left;
background: url(/images/sfondi/sfondo_titoli_menu.jpg) repeat-y top left;
}
#menu {
float: left;
width: 146px; /* la larghezza totale del div (incluso il padding) è 150px */
w\idth: 150px; /* IE5 include nel width anche il padding */
\width: 146px;
padding: 0px 0px 0px 2px;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #000000;
overflow: hidden;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
#titolo_menu {
padding: 5px;
margin: 2px;
border: 1px solid #cccccc;
overflow: hidden;
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
color: #ffffff;
text-align: center;
}
.voce_menu {
padding: 5px;
margin: 2px;
border: 1px solid #cccccc;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
}
.voce_menu a {
text-decoration: none;
font-weight: bold;
color: #ffffff;
}
.voce_menu a:hover {
color: #000000;
}
#destra {
float: right;
width: 139px;
w\idth: 150px;
\width: 139px;
padding: 5px;
background: url(/images/sfondi/sfondo_titoli_menu.jpg) repeat-y;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #000000;
overflow: hidden;
border-left: 1px solid #cccccc;
}
#destra a {
text-decoration: none;
font-weight: bold;
color: #ffffff;
}
#destra a:hover {
color: #000000;
}
img {
border: 0px;
}
#contenuto_main {
margin: 0px 150px;
padding: 0px 10px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
overflow: hidden;
font-family: Verdana, Arial, sans-serif;
color: #000000;
font-size: 11px;
text-align: justify;
}
#titolo_sezione {
padding: 3px 0px;
margin: 0px 10px;
text-align: left;
border-bottom: 1px solid #cccccc;
}
#titolo_sezione h1 {
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #000000;
}
.contenuto_testo {
padding: 3px 0px;
margin: 0px 10px;
text-align: justify;
font-family: Verdana, Arial, sans-serif;
color: #000000;
font-size: 11px;
}
.immagine_con_bordo {
border: 1px solid #ff0000;
margin: 3px 0px;
}
.immagine_la_vale_cartoon {
border: 1px solid #cccccc;
margin: 0px 3px 0px 0px;
float: left;
vertical-align: top;
}
.scheda_personale {
border: 0px;
border-collapse: collapse;
padding: 0px;
margin: 0px;
text-align: top;
}
#counter {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #000000;
text-align: left;
border-top: 1px solid #cccccc;
}
.visite {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #ff0000;
text-align: left;
padding: 0px;
margin: 0px;
}
.indirizzo_mail {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #ff0000;
text-decoration: underline;
padding: 0px;
margin: 0px;
}
#footer {
clear: both;
text-align: center;
font-family: Verdana, Arial, sans-serif;
background: repeat-y url(/images/sfondi/header.jpg);
color: #000000;
font-size: 10px;
overflow: hidden;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
#footer a {
color: #cccccc;
}
#footer a:hover {
color: #000000;
}
a {
color: #ff0000;
text-decoration: underline;
}
a:hover {
color: #ff0000;
text-decoration: underline;
}