Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> table => div, dalsze zmagania
wassago
post
Post #1





Grupa: Przyjaciele php.pl
Postów: 701
Pomógł: 0
Dołączył: 26.06.2002
Skąd: Londyn

Ostrzeżenie: (0%)
-----


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>


--------------------
Go to the top of the page
+Quote Post
AcidBurnt
post
Post #2





Grupa: Zarejestrowani
Postów: 215
Pomógł: 1
Dołączył: 13.04.2003
Skąd: z ławki przed blokiem

Ostrzeżenie: (0%)
-----


  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?
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 19.08.2025 - 20:12