[CSS] padding property, Błedna irterpretacja przeglądarek ? Opcje

[Black-Berry]

mam element typu div takiej wielkosci:

Kod

|--------|
|  text  |
|--------|

jesli teraz zastosuje na nim styl CSS postaci

Kod

div{
    position:absolute;
    padding-right: 50px;
}

to w firefoksie zamiast zwiekszac odstep pomiedzy prawym brzegiem diva a tekstem przy zachowaniu jego szerokosci, div ten zwieksza sie o 50px; po prawej. W IE jest poprawnie. Mozna cos z tym zrobic?

Ten post edytował Black-Berry 24.06.2007, 12:14:58

[abc667]

a mógłbyś zobrazować o które odległości ci chodzi? imo jeśli dodaje się padding to div musi się zwiększyć żeby ten padding zachować

[Black-Berry]

(..) jeśli dodaje się padding to div musi się zwiększyć żeby ten padding zachować

Tak, ale problem w tym ze w ff wielkosc diva sie zwieksza, a w IE zostaje taka sama (w ie tekst wewnatrz sie zwęża).

Ten post edytował Black-Berry 24.06.2007, 12:32:30

[mike]

to w firefoksie zamiast zwiekszac odstep pomiedzy prawym brzegiem diva a tekstem przy zachowaniu jego szerokosci, div ten zwieksza sie o 50px; po prawej. W IE jest poprawnie. Mozna cos z tym zrobic?

Można wywalić IE
Bo widzisz tak się składa że to IE postępuje wbrew standardowi XHTML i wbrew temu co ustaliło konsorcjum W3C.

Wielkość elementu to width (bądź height) + padding natomiast dla IE wielkośc elementu to tylko width (bądź height).

Jeśli chcesz mieć uniwersalnie polecam komentarze warunkowe: Conditional comments.

[HTML] pobierz, plaintext 
<style type="text/css">
div {
    position:absolute;
    width: 100px;
    padding-right: 50px;
}
</style>
 
<!--[if lte IE 6]>
<style type="text/css">
div {
    width: 200px;
}
</style>
<![endif]-->
[HTML] pobierz, plaintext 

I teraz pod badzIEwIEm i pod innymi przeglądarkami <div> zajmuje 200px wzdłuż.

[JaRoPHP]

Firefox interpretuje to w sposób właściwy (zgodnie z założeniami CSS) :
Aby obliczyć całkowitą szerokość ramki, należy zsumować wielkości obszarów zawartości, dopełnienia i krawędzi. Np. szerokość diva wynosi 200px, krawędź ma szerokość 2px a dopełnienie wynosi 5px, to całkowita szerokość wynosi 214px.
IE (nie wiem jak z wersją 7) łamie ów model ramkowy - całkowita szerokość ramki dla tej przeglądarki jest zdefiniowana poprzez szerokość elementu, a obszar zawartości będzie się zmniejszał.

// małe spóźnienie

Ten post edytował JaRoPHP 24.06.2007, 12:41:33

[abc667]

padding-right :-p
bedzie 150

[Black-Berry]

Wydaje mi się jednak ze tym razem IE ma troche racji. Ustalam szerokosc na 200px; i mam pewność, że blok będzie miał 200px a nie muszę latać z kalkulatorem żeby mi się stronka nie rozjechała... trochę kiepsko że tak jest tak jak jest... ale chyba będę się musiał z tym pogodzić.

[edit]
najgorsze że nie ma jednego standardu w tej kwestii.

Ten post edytował Black-Berry 24.06.2007, 12:47:06

[revyag]

Nie ma racji, bo do zwiększania odstępów między elementami służy margin, a nie padding.

[Black-Berry]

Nie ma racji, bo do zwiększania odstępów między elementami służy margin, a nie padding.

No więc skoro padding ma działać na wewnętrznych odstępach to czemu ingeruje w szerokość diva. Nie było by lepiej jesli "width" zapewnialo nas o stałej szerokosci diva ?

Ten post edytował Black-Berry 25.06.2007, 11:20:01

[mike]

Nie było by lepiej jesli "width" zapewnialo nas o stałej szerokosci diva ?

Nie lepiej.
width odnosi się do zawartości, padding wewnętrzny margines i dopiero to tworzy razem długość elementu (pomijam tutaj border) i kropka

[abc667]

Black-Berry
i co? treść miałaby być skracana?
poza tym pomyśl o zagnieżdżeniu divów, rodzic ma szerokość 200px i padding 10px, dziecko ma szerokość 190px to co teraz zrobić? z które strony uciąć diva? która ważniejsza? bo chyba nie z obu znowu ucinać?

Ten post edytował abc667 25.06.2007, 11:37:17

[Black-Berry]

Black-Berry
i co? treść miałaby być skracana?
poza tym pomyśl o zagnieżdżeniu divów, rodzic ma szerokość 200px i padding 10px, dziecko ma szerokość 190px to co teraz zrobić? z które strony uciąć diva? która ważniejsza? bo chyba nie z obu znowu ucinać?

A co jak dziecko ma 220px ? Nawet jak w obu przypadkach padding =0 to nam nie pomoze.