Problem z wyświetlaniem, Firefox inaczej interpretuje padding... Opcje

[radac78]

W IE co dziwne all gra. Niestety przegladarki konkurencyjne nieco inaczej interpretuja moje ustawienia. Kodu strony nie wklejam bo mozna zobaczyc go w zrodle strony (test2). Plik CSS ma nastepujaca tresc:

body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center; /*Srodkowanie calosci*/
/* part 1 of 2 centering hack */
}

#all {
/*Srodkowanie calosci*/
width: 720px;
padding: 0px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
/* opera does not like 'margin:20px auto' */
text-align:left;
/* part 2 of 2 centering hack - nie wiem po co to - 4 linie*/
/* width: 720px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 720px;*/
/*Srodkowanie calosci*/
}

#cointainer {
margin: 0;
padding: 0;
}

#left {
border: none;
margin-left: 0px;
padding: 0px;
float: left;
width: 160px;
background-color: #white;
}

ul#mainnav {
list-style: none;
margin: 0;
padding:0;
background-color: #CCCCFF;
border: 1px solid #000;
}

ul#mainnav li a:link, ul#mainnav li a:visited {
display: block;
text-decoration: none;
width: 100%;
padding: 6px;
background-color: #5C6F90;
font-size: 12px;
color: #fff;
}

ul#mainnav li {
border-top: 1px solid #A5B5C6;
}

ul#mainnav li a:hover {
background-color: #43616B;
color: #eee;
}

ul#pozostale {
list-style: none;
margin: 0;
padding: 0;
background-color: #CCCCFF;
border: 1px solid #000;
}

ul#pozostale li {
border-top: 1px solid #A5B5C6;
}

#center {
font-size: 12px;
margin-left: 164px;
padding:5px;
background-color: white;
border: 1px solid black;
}

#clear {
clear: both;
}

#footer {
color: #5C6F90;
width: 720px;
font-size: 9px;
background-color: #fff;
margin-top: 10px;
padding-top: 5px;
border-top: 1px solid #5C6F90;
}

p.nazwa {
color: #0F1130;
font-weight: bold;
font-size: 12px;
margin: 0;
padding: 6px;
border-bottom: 1px solid #000;
}

p.pustka {
margin: 0;
padding: 0;
}

li.niemenu {
display: block;
width: 100%;
padding: 6px;
background-color: #5C6F90;
font-size: 12px;
color: #fff;
}

li.kursy {
width: 100%;
padding: 6px;
background-color: #5C6F90;
font-size: 12px;
color: #fff;
}


Jak widac chociazby w Firefox'ie tlo pod linkami listy jest zbyt rozlegle w prawo oraz stopka zbyt przylega do ostatniego elementu. Calosc nie wystepuje w IE. Po zmniejszeniu opcji padding do 0 oczywiscie problem dla menu nie wystepuje jednak calosc traci na swoim wygladzie,... nie za bardzo juz mam pomysl jak to zlikwidowac (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) Bede wdzieczny za wszelkie wskazowki.

[wassago]

Cały problem jest w tym, że IE inaczej interpretuje procenty. 100% to jest trochu ponad 100%...
[...]
Jeśli coś ma obramowanie np 1px i szerokość 200px to dla każdej normalnej przeglądarki szerokść tego elementu wynosi 200px a dla IE 202px  (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

caly problem to popsuty BOX-MODEL w IE (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) a dla ciekawskich powiem ze IE7 nie bedzie mialo naprawionego BOX-MODEL'u - heheh >:]

@radac78: dobrze gadasz z tym Quirk Mode i Compilance Mode - problem jednak w tym, ze nawet jezeli okreslimy definicje dokumentu to przy duzej ilosci zaawansowanych dzialan CSS, nawet w CM, IE pokazuje swoj popsuty BOX-MODEL.

Oczywiscie sa tzw. hack'i aby pod FMOS'ami jak i IE strona wyswietlala sie prawidlowo - jeden z nich to faktycznie komentowane instrukcje warunkowe (MS sam na siebie podpisal wyrok), a drugi to uzywanie w CSS'ach natywnej metody "!important", ktora jak sie mozna domyslec nie dziala pod IE - ale o to chodzi :]

Ten post edytował wassago 11.03.2005, 14:23:47