Gecko vs Opera&&IE

[Gandalf]

hej.
Dostalem od znajomego kawalek kodu i proboje zgadnac kto dziala dobrze, a kto zle.

Spojrzcie na to:

Kod: Zaznacz cały

<html>
<head>
<style>
  #k {
  float:left;
  width:100px;
  height:100px;
  margin:5px;
  position:relative;
  background:yellow;
  overflow:hidden;
}
</style>
</head>
<body>

<div id="k">
  <div style="position:absolute;
    width: 100%;
    height: 100%;
    left:0px;
    top:0px;
    padding:10px;
    border:1px solid green">
  test<hr><hr>
</div>
</div>
</body>
</html>


Gecko bierze 100% jako 100px ORAZ dodaje mu po 10px paddingu. Aby dobrze zrozumiec o czym mowie, zdejmijcie overflow.
Natomiast IE i Opera wpychaja padding do srodka tych 100px. dzieki czemu prostokat ma pelny border.

Kto ma racje?

[jasiu]

DOCTYPE na początku i wszędzie jest tak samo.

[marcoos]

Gecko. Paddingu nie wlicza się do wymiarów.

Przełączenie na standards mode powinno pomóc. Ewentualnie dla Gecko można wymusić błędne zachowanie poprzez:

Kod: Zaznacz cały

 -moz-box-sizing: border-box;


[quiris]

Gecko bierze 100% jako 100px ORAZ dodaje mu po 10px paddingu. Aby dobrze zrozumiec o czym mowie, zdejmijcie overflow.
Natomiast IE i Opera wpychaja padding do srodka tych 100px. dzieki czemu prostokat ma pelny border.

To wygląda na klasyczny efekt działania QuirksMode: http://www.opera.com/docs/specs/doctype/

Box-sizing is based on the IE/Windows border-box model in quirks mode.

The CSS 'width' property specifies content width. In IE/Win 3.0-5.5 it specifies content width + padding width + border. The same applies to the 'height' property. Opera in Quirks Mode emulates this behavior. Opera 7 and IE/Mac, but unfortunately not IE/Win, support the box-sizing CSS property proposed for CSS 3. Netscape and Mozilla supports the equivalent -moz-box-sizing property.

[Eluś]

No więc wiadomo już w czym problem.
Width:100% sprawia że div#k przyjmuje 100% szerokości rodzica, czyli 100px. Pytanie jednak brzmi - w jakim modelu? W border-box czy padding-box?
Brak DTD sprawia że przeglądarki znajdują się w quirks mode. Z wszystkich wspomnianych jedynie Gecko domyślnie w tym stanie nalicza rozmiary zgodnie z modelem box-sizing:content-box. W standards mode zarówno Gecko, Opera jak i IE6 wyświelą przykład identycznie.
Domyślam się że koledze chodzi by wyświetlic przykład zgodnie z border-box'em (który w tym przypadku MZ jest wygodniejszy). Nie pozostaje więc nic innego jak "rozrypać" IE (np. prologiem), dla Opery dać box-sizing:content-box zaś dla geckowatych -moz-box-sizing:content-box

[Eluś]

...albo można obejść problem inaczej (dla tych co nie lubią 'hackować CSS'). Nalezy zrezygnować z paddingów w div#k i dodać wewnątrz niego kolejnego diva - transparentnego, bez określonych rozmiarów, posiadającego jedynie owe paddingi...

[Eluś]

... a zresztą, ta metoda załatwia jedynie sprawę z paddingami. Z borderem już nie.

Zrobiłem kilka testów i znalazłem alternatywną (bez użycia [-moz-]box-sizing) technikę:

Kod: Zaznacz cały

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#k {
  float:left;
  width:100px;
  height:100px;
  margin:5px;
  position:relative;
  background:yellow;
  overflow:hidden;
}
#k div {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
  padding:10px;
  border:1px solid green;
}
* html #k div {height:100%}
</style>
</head>
<body>
<div id="k">
  <div>
    test<hr /><hr />
  </div>
</div>
</body>
</html>

PS.1. IE coś sobie nie może poradzić z top:0 i bottom:0 jednocześnie. Sprawę dla niego rozwiązuje height:100%. No ale po wywaleniu prologu to height:100% powoduje z kolei wiadomy problem z paddingiem i borderem w pionie...

PS.2. Tak, wiem że zbaczam z "obsługi standardów" w stronę "tworzenia stron www"...

PS.3. Już się zarejestrowałem. Nie będę więcej wysyłac postów jeden pod drugim

[mibla]

Kod: Zaznacz cały

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<div style="background:#FF0000;width:200px;height:100px"><br />200 pixeli</div>
<div style="background:#FF0000;width:200px;height:100px;padding:4px"><br />208 pixeli w firefox</div>
</body>
</html>


czyli w firefoxie > http://mibla.com/test.png
a w op i ie dobrze czyli padding wewnątrz bez dotykania rozmiaru bloku. A jakie to pieniące jest jak sie walczy z tabelką, ktora ma miec padding i do tego by sie chcialo miec sztywne rozmiary kolumn hehe ...[/url][/code]

[marcoos]

a w op i ie dobrze czyli padding wewnątrz bez dotykania rozmiaru bloku. A jakie to pieniące jest jak sie walczy z tabelką, ktora ma miec padding i do tego by sie chcialo miec sztywne rozmiary kolumn hehe ...[/url][/code]

Tak jest dlatego, że używasz Transitional (quirks mode). Zmień doctype na strict, wtedy wszystkie browsery będą się zachowywać jak Firefox, albo dołóż -moz-box-sizing: content-box, wtedy Firefox się będzie zachowywać jak IE.

Poczytaj o box modelu.

[Eluś]

Tak jest dlatego, że używasz Transitional (quirks mode). Zmień doctype na strict, wtedy wszystkie browsery będą się zachowywać jak Firefox

Ciekawa teza. Niestety jednak nie moge się z nią zgodzić.

[...]albo dołóż -moz-box-sizing: content-box, wtedy Firefox się będzie zachowywać jak IE.

chyba border-box (wiem, ja też się wcześniej pomyliłem 'z rozpędu')

"Transitionalowy" doctype nie przełącza browsery w quirks mode. Każdy poprawnie zapisany doctype od HTML 4.01 Transitional 'w górę' przełącza (a raczej powinien) przeglądarkę w standard mode (Fix Your Site With the Right DOCTYPE!).
Zwróc uwagę na to że przykład mibli wyświetli się identycznie w IE6, Gecko i Operze gdy poprawisz doctype na odpowiedni:

Kod: Zaznacz cały

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Powracając do istoty pytania mibli - tak, może wydawać się to uciążliwe. Zwłaszcza dla grafików, projektantów, webdesignerów którzy chcieliby szybko i sprawnie panować nad wygladem nie wnikając szczegółowo w analizę kodu. Często po zaprojektowaniu strony trzeba dokonac kilku drobnych poprawek, ot choćby takich jak zwiększenie paddingów w celu poprawienia czytelności strony. Okazuje się wtedy że zgodnie z modelem content-box zmieniają się też rozmiary bloków.
No cóż, nie pozostaje wtedy nic innego jak przeliczać samemu wartosci pamiętając o tym że prawdziwa szerokość/wysokośc elementu wynosi width/height + padding. Choć wciąż nie rozwiązuje to problemów z IE5.x (który trzeba specjalnie hackować).
Oczywiście można tez obrać metodę dla projektanta najwygodniejszą - sprawić by wszystkie przeglądarki wyświetlały stronę zgodnie z modelem border-box. W IE6 by tego dokonać trzeba przełączyć go w quirks mode (np. dodając prolog), Operze dać box-sizing:border-box a Gecko -moz-box-sizing:border-box...
Ale ja miałbym pewne obawy. Choćby dlatego że moga istnieć przegladarki (nie sprawdzałem) które domyślnie wyświetlają w modelu content-box i nie rozumieją [-moz-]box-sizing...