Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] padding property
Forum PHP.pl > Forum > Po stronie przeglądarki
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?
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
Cytat
(..) 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).
mike
Cytat(Black-Berry @ 24.06.2007, 13:13:46 ) *
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 tongue.gif
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.

  1. <style type="text/css">
  2. div {
  3. position:absolute;
  4. width: 100px;
  5. padding-right: 50px;
  6. }
  7.  
  8. <!--[if lte IE 6]>
  9. <style type="text/css">
  10. div {
  11. width: 200px;
  12. }
  13. </style>
  14. <![endif]-->


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) smile.gif:
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 smile.gif
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.
revyag
Nie ma racji, bo do zwiększania odstępów między elementami służy margin, a nie padding.
Black-Berry
Cytat(revyag @ 25.06.2007, 11:07:30 ) *
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 ?
mike
Cytat(Black-Berry @ 25.06.2007, 12:19:52 ) *
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 tongue.gif
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ć?
Black-Berry
Cytat(abc667 @ 25.06.2007, 12:36:30 ) *
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 ?smile.gif Nawet jak w obu przypadkach padding =0 to nam nie pomoze.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.