Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: table => div
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
wassago
Ostatnio postanowilem zrobic pewien projekt i oczywiscie kozystac z najnowszych technik, tak wiec przyszedl czas aby stronki robic w "XHTML 1.1 Strict" i wszelkie tabele zamienic na div'y. Jak pewnie sie domyslacie troche latwo sie mowi, a nieco gorzej robi. Moj glowny problem to ustawienie obok siebie div'ow - niby "display: inline" rozwiazuje moj problem, lecze nie do konca. Sprawa wyglada tak, ze inline likwiduje mi mozliwosc dodania parametru "width" w stylach (pod IE dziala, pod MOZ juz nie), probowalem juz na kilkanascie sposobow ale nic nie dalo sie zrobic aby rozciagnac div'a liniowego. Wtedy zastosowalem parametry "displat: table" i "display: table-cell", jak wiadomo pod MOZ wyszlo to idealnie tak jak chcialem lecz IE juz nie chce tego interpretowac tak jak MOZ.

Pytanie dosc standardowe: jak zrobic aby pod IE wygladalo to tak jak pod MOZ?

  1. <div style="width: 500px;">
  2.  <div style="display:        table;
  3.              width:          480px;
  4.              padding-left:   10px;
  5.              padding-right:  10px;
  6.              padding-top:    5px;
  7.              padding-bottom: 5px;">
  8.    <div style="display: table-cell;">
  9.        <span>text</span>
  10.    </div>
  11.    <div style="display: table-cell;
  12.                width:   110px;">
  13.    </div>
  14.    <div style="display:    table-cell;
  15.                width:      20px;
  16.                text-align: right">
  17.        <span>^</span>
  18.    </div>
  19.  </div>
  20.  <div>
  21.    <span />
  22.  </div>
  23.  <div style="display:        table;
  24.              width:          480px;
  25.              padding-left:   10px;
  26.              padding-right:  10px;
  27.              padding-top:    5px;
  28.              padding-bottom: 5px;">
  29.    <div style="display: table-cell;">
  30.      <span>text<a href="#">text</a></span>
  31.    </div>
  32.  </div>
  33. </div>
AcidBurnt
  1. <div style="width: 500px;">
  2. <div style="display: table; width: 480px; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px;">
  3. <div style="float:left;display: table-cell;">
  4. <span>text</span>
  5. </div>
  6. <div style="float: right; width: 20px; text-align: right">
  7. <span>^</span>
  8. </div>
  9. </div>
  10. <div>
  11. <span />
  12. </div>
  13. <div style="display: table; width: 480px; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px;">
  14. <div style="display: table-cell;">
  15. <span>text<a href="#">text</a></span>
  16. </div>
  17.  
  18. </div>
  19. </div>


moze byc?
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.