Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Rozjeżdżające się div-y.
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Jojo
Aktualnie pracuję nad stroną, która miała być w całości zrealizowana w XHTML. Postanowiłem nie korzystać ze znaczników <table>, tylko oprzeć wszystko o <div>. Nie będę dokładnie opisywał problemu. Sądzę, że linki do screenów wszystko wyjaśnią. Oto one:

Tak miały wyglądać ramki i tak wyglądają w Opera 7.51
Mozilla 1.7
IE 6

Jak zapewne zauważyliście w każdej przeglądarce strona wygląda inaczej.

Tak wygląda kod XHTML, który bezbłędnie przechodzisprawdzanie w Validatorze (tekst wyciąłem dla poprawienia czytelności):
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  5.  
  6.  
  7. <title>Test</title>
  8. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  9. <meta http-equiv="content-language" content="pl" />
  10. <link rel="stylesheet" href="stylesheet/style.css" type="text/css" />
  11.  
  12. </head>
  13.  
  14.  
  15. <div class="main">
  16. <div class="info">
  17. Lorem ipsum.<br />
  18. Lorem ipsum.
  19. </div>
  20. <div class="links">
  21. Lorem ipsum.
  22. </div>
  23. <div class="versions">
  24. Lorem ipsum.
  25. </div>
  26. </div>
  27.  
  28. </body>
  29.  
  30. </html>


Tak natomiast wygląda kod CSS:
Kod
body {
    text-align: center;
    font-family: Verdana, sans-serif;
    font-size: 11px;
}

div.main {
    border-style: solid;
    border-width: 1px;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    text-align: justify;
    width: 760px;
}

div.info {
    border-style: solid;
    border-width: 1px;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 5px;
    text-align: justify;
}

div.links {
    border-style: solid;
    border-width: 1px;
    float: left;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin-left: 0px;
    margin-right: auto;
    padding: 5px;
    text-align: center;
    width: 300px;
}

div.versions {
    border-style: solid;
    border-width: 1px;
    float: right;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin-left: auto;
    margin-right: 0px;
    padding: 5px;
    text-align: justify;
    width: 431px;
}


Kombinowałem z tym bardzo długo ale nie mogę nic wymyślić. W jaki sposób zmienić te pliki, aby we wszystkich przeglądarkach strona wyglądała tak jak w Operze?
mpps
niestety, to nie opera właściwie zinterpretowała style - to... ie.
1. opera wyświetliła ci ramkę na 772 zamiast na 760
2. mozilla kompletnie wszystko popaprała

może powoduje to justowanie?
nie wiem...
Jojo
Rzeczywiście, masz rację. Nie zauważyłem tego wcześniej. Co ciekawsze prosta arytmetyka i kilka pomiarów doprowadziły mnie do takich wniosków:
772 = 760 + 5 + 5 + 1 +1
Mówiąc po ludzku to jest dokładnie tyle ile wynoszą razem zadana szerokość diva, 2*wartość padding i 2*szerokość obramowania. Sprawdziłem i dla innych ramek takie sumy również się zgadzają.
Ciekawe jest również to, że Mozilla te wilekości interpretuje tak samo jak Opera - tam też szerokość największej ramki wynosi 772 piksele.

Wie ktoś może dlaczego tak się dzieje?

Justowanie odpada. Po zmianie wszystkich text-align na left jest nadal to samo.
bregovic
napewno pomoze ci wstawienie takiego durnego br'a, z atrybutem clear="all" pod koniec struktury:
  1.  
  2. <div class="main">
  3. <div class="info">
  4. Lorem ipsum.<br />
  5. Lorem ipsum.
  6. </div>
  7. <div class="links">
  8. Lorem ipsum.
  9. </div>
  10. <div class="versions">
  11. Lorem ipsum.
  12. </div><br clear="all" />
  13. </div>
  14.  
  15. </body>


a co do dokladnych pixelowych layoutow, proponuje lektore "Box Model Hack", Tanteka Celicka - http://www.tantek.com/CSS/Examples/boxmodelhack.html
W skrocie: IE zle interpretuje box model i umieszcza ramki i padding w srodku box'a zamiast tak jak powinno byc, czyli na zewnatrz.

edit:
dodam jeszcze ze nieprzebytym zrodlem informacji na temat layoutow jest strona Box Lessons Owena Briggsa, a zwlaszcza jego Little Boxes. polecam kazdem zainteresowanemu designem ponadprzegladarkowym winksmiley.jpg
sobstel
Cytat(mpps @ 2004-09-26 14:59:16)
opera wyświetliła ci ramkę na 772 zamiast na 760

opera wyswietla poprawnie. wedlug standardu CSS bowiem szerokosc wskazuje na sama wewnetarzna czesc BEZ paddingu i obramowania. w IE 5.x liczy sie to wszystko razem na szerokosc, ale to tylko jeden z wielu bugow tej przegladarki. wspomniana wyzej sztuczka tantecka powinna pozwolic ci poradzic sobie z tym problemem.
wassago
tak bedzie lepiej
Kod
clear="all" => style="clear: both"
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.