Problema IE e FF

[iceberg]

Tempo fa avevo letto di un problema nella gestione dei CSS tra IE e FF, non so se è questo il caso ma la pagina risulta centrata in modo differente (leggermente piu a DX quella in FF)

questo è il CSS

div#container_wrap {
margin: 0px auto;
padding: 0px;
border-width: 0px 1px; }

div#container {
margin: 0px auto;
width: 780px;
background: #ffffff; }


come posso risolverlo??

Grazie

[H5N1_Aviaria]

div#container_wrap {
margin: 0px auto;
padding: 0px;
border-width: 0px 1px;
text-align : center;}

div#container {
margin: 0px auto;
width: 780px;
background: #ffffff; 
text-align : left;}

Guarda se così va meglio

[iceberg]

Grazieeeee


provo subito!

[iceberg]

Ho ancora lo stesso problema

la struttura è questa


<div id="container_wrap">
<div id="container">
<div id="sidebar">

div#container_wrap {
    margin: 0px auto;
    padding: 0px;
    border-width: 0px 1px; }

      div#container {
        margin: 0px auto;
        width: 780px;
          background: #ffffff; }





div#sidebar a {
    font: 11px arial;
    color: #E72447;
    text-decoration: none; 
    font-weight: bold}

    div#sidebar a:hover {
        text-decoration: underline; }
        
        
div#footer a {
    font: 11px arial;
    color: #ffffff;
    text-decoration: none; 
    font-weight: bold}

    div#sidebar a:footer {
        text-decoration: underline; }


/* ********** [ SIDEBAR FORMS ] ********** */

div#sidebar div.loginbox {
    margin: 10px 0px 10px 10px;
    padding: 5px;
    background: #FFFCDA;
    border: 1px solid #F5DFC3; }

    div#sidebar div.loginbox input.text {
        width: 105px; }


/* ********** [ SIDEBAR FORMS ] ********** */

div#sidebar div.ext_poll_wrap {
    margin: 10px 0px 10px 10px;
    background: #F3FFDA;
    border: 1px solid #DCF5C3; }

    div#sidebar div.ext_poll { }

        div#sidebar div.poll p {
            margin: 0px;
            padding: 0px;
            font: 11px arial;
            color: #404040; }

            div#sidebar div.poll p.question {
                padding: 5px;
                font-weight: bold;
                background: #D7F398; }

            div#sidebar div.poll p.results {
                padding: 5px;
                font: 11px verdana;
                background: #E2F4A9; }

            div#sidebar div.poll p label {
                margin: 0px;
                padding: 0px; }

        div#sidebar div.poll table {
            margin: 5px 0px; }

            div#sidebar div.poll td p.answers {
                padding-left: 3px;
                font: 10px verdana;
                width: 100%; }


/* ********** [ SIDEBAR NAV ] ********** */

div#sidebar div#usernav {
    margin: 0px;
    padding: 0px;
    position: relative; }

    div#sidebar div#usernav ul {
        margin: 0px;
        padding: 0px;
        list-style: none; }

        div#sidebar div#usernav ul li a {
            padding-left: 20px;
            height: 30px;
            display: block;
            font: 12px/30px arial;
            font-weight: bold;
            color: #D52525;
            text-decoration: none;
            border: 1px solid #cccccc;
            border-width: 0px 0px 1px 0px; }

        div#sidebar div#usernav ul li a:hover {
            color: #2274D9; } 

[H5N1_Aviaria]

Credo di aver capito.
Innanzitutto FF e IE così come altri browser hanno un diverso valore iniziale delle proprietà margin e padding di "body".
In secondo luogo è probabile che tu utilizzi un documento che o non ha la dichiarazione doctype o ha la dichiarazione xml, per cui IE entra in quirks mode. Il box model in quirks mode è molto diverso.
Detto questo ti consiglio di utilizzare un reset-style che azzeri le proprietà standard di base.
Ti consiglio questo di Eric Meyer: http://meyerweb.com/eric/thoughts/20...eset-reloaded/

[iceberg]

Grazie mille!!!

intendi aggiungere questo?

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}



ho provato ogni singolo attributo ed alla fine quello che genera lo spostamento è questo

vertical-align: baseline;

il problema è che ora il layout è un po' "cambiato" ... dovrò sistemarlo...è normale questa cosa vero??

[H5N1_Aviaria]

Sì, ma ti aiuta molto nella visualizzazione crossbrowser poichè proprietà base che vengono diversamente interpretate dai browser sono azzerate

[iceberg]

Grazie mille

Ora non riesco a sistemare la pagina!!

ho un div presente in un TD che genera uno sfondo e non c'è verso di "alzarlo" nel TD

ho provato a mettere di tutto per "far alzare" la posizione ma niente!!

ho notato che mettendo un float: left di sistema ma col float:left ritorna il vecchio problema della differente visualizzazione tra IE e FF

il mio CSS è questo

div#search_area {
vertical-align: top;
top: 0px;
padding: 0px;
margin-top: 0px;
margin: 0px;
padding: 0px;
width: 380;
height: 163px;
float: none;
background-image: url(../images/search_box.gif);}

div#menuarea {
vertical-align: top;
width: 313px;
height: 150px;
float: none;
background-image: url(../images/menu.gif);}

con:

<TD valign="top">
<div id="search_area">
<table width="423" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>



</td>
<td width="221"></td>
</tr>
</table>
</div>


cosa ho combinato??