CSS problém (zapeklité)

Jasně že už to tu bylo a jsem blbej a nemám vás otravovat.

Mám takový dotaz. Celou dobu pracuji na webu ale Preview mám jen pro IE. Ted jsem to zkusil v Opeře a Mozile a víte co se stalo. Je to celé rozhozené. Kdybyste napsali třeba jakej je rozdíl v tom vykreslování u prohlížečů nebo NÁZEV té chyby já už bych si podrobnosti našel. Prošel jsem CSS diskuzi a nic konkrétního k mému problému.



/* CSS Document */

body {
margin: 0em;
padding-top: 0em;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #02711F;
background-image: url(obrazky/poz_cele.jpg);
background-repeat: repeat-x;
background-color: #03AB2F;
}

#cele {
width: 740px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 100px;
background-image: url(obrazky/poz_cele.jpg);
text-align: left;
}

#hlavicka {
width: 740px;
height: 90px;
background-image: url(obrazky/hlava.gif);
background-repeat: no-repeat;
}

/* ------------------------------------- levý sloupek --------------------------------- */

#levy {
width: 175px;
height: auto;
float: left;
}

#logo {
width: 100%;
height: 205px;
background-image: url(obrazky/poz_logo.gif);
background-repeat: no-repeat;
}

#menu {
width: 100%;
height: 300px;
background-image: url(obrazky/poz_menu.jpg);
background-repeat: no-repeat;
padding-top: 45px;
padding-left: 35px;
}

#menu a {
display: block;
float: left;
width: auto;
padding-top: 0px;
padding-left: 20px;
background-image: url(obrazky/sipka.jpg);
background-repeat: no-repeat;
color: #FFFFFF;
font-size: 10pt;
font-family: Verdana;
font-weight: bold;
text-decoration: none ;
text-align:left;
margin-top: 8px;
margin-bottom: 6px;
}

#menu a:hover {
text-decoration: underline ;
}

#menu .active {
color: #03711F;
background-image: url(obrazky/sipka_act.jpg);
background-repeat: no-repeat;
}

#mapa {
width: 100%;
height: 291px;
background-image: url(obrazky/mapa.jpg);
background-repeat: no-repeat;
}

/* ------------------------------------- pravý sloupec --------------------------------- */

#pravy {
width: 565px;
height: auto;
float: right;
padding: 20px;
background: #FFFFFF;
background-image: url(obrazky/poz_obs.gif);
background-repeat:repeat-x;
}

#pravy h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
color: #02711F;
font-weight: bold;
}

#pravy a {
color: #02711F;
text-decoration: underline ;
}

#pravy a:hover {
color: #02711F;
text-decoration: none ;
}

#pravy li {
color: #F27A06;
list-style-image: url(obrazky/sipka_obs.jpg);
font-size: 14pt;
padding-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
}

#pravy p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color: #02711F;
}
.obrazek {
border: 10px;
border-color: #E1E1E1;
border-style: solid;
}


/* ------------------------------------- pravý sloupec - zápatí--------------------------------- */

#zapati {
width: 565px;
height: auto;
float: right;
padding-left: 7px;
padding-right: 7px;
padding-top: 3px;
padding-bottom: 3px;
font-size:10pt;
color: #FFFFFF;
background: #03A62E;
}

#zapati a {
text-decoration: none;
color: #FFFFFF;
}

#zapati a:hover {
text-decoration: underline;
}

.leva {
float:left;
width: 50%;
}
.prava {
float:right;
width: 50%;
text-align:right;
}

#zpet {
width: 80px;
height: 20px;
float:left;
padding: 0px;
background-image: url(obrazky/zpet.gif);
background-repeat: no-repeat;
}

Celá stránka má 740px na šířku

175 + 565 = 740 ... prohlížeče počítají jinak ?

Jo už to vidím je to ten box model ... už vidím že chyboval IE a ne Opera s Mozilou ... děkuji moc ... pokusím se to vyřešit.

Radek Hušek

Děkuji všem

Není nic hezčího, než vidět jak Vaše stránka opravdu funguje !

:D Já věděl že někdo todle napíše ... Myslel jsem v internetovém světě ... Uvědomil jsem si to při stisknutí "Poslat zprávu" a už se mi to nechtělo doplnovat.

Stránka už je hotová a celá funguje ale nefunguje mi patička ...

V kódu je i to moz-sizing-box (...), pokusil jsem se podle návodu implentovat i "matrjošku" ale to problém nevyřešila. Pouze stanovila výšku objektu na zadaných 21px ale text byl stále pod tím, pokud by jts chtěli obrázek napište.

BTW: zapomněl jsem na script

#zapati {
width: 564px;
height: auto;
float: left;
padding-left: 7px;
padding-right: 7px;
padding-top: 3px;
padding-bottom: 3px;
font-size:10pt;
color: #FFFFFF;
background: #03A62E;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #000000;
}

Asi si každý myslí že to téma skončilo ... UP