Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] tabela zajmująca całą szerokość diva o nieznamym obszarze w IE
Forum PHP.pl > Forum > Przedszkole
dawidoff86
13.05.2010, 10:34:03
Witam!
Mam następujący problem. Otóż zrobiłem sobie prosty, płynny szablon:
[CSS] pobierz, plaintext 
  1. #naglowek
  2.             {
  3.                 background-color: aqua;
  4.                 margin: 0 auto 0 auto;
  5.                 padding: 0px;
  6.                 width: 100%;
  7.             }
  8.  
  9.             #menu
  10.             {
  11.                 background-color: green;
  12.                 width: 220px;
  13.                 float: left;
  14.                 overflow: hidden;
  15.                 position: relative;
  16.                 padding: 0px;
  17.                 margin: 0px;
  18.                 text-align: left;
  19.             }
  20.  
  21.             #prawy
  22.             {
  23.                 background-color: orange;
  24.                 width: 200px;
  25.                 padding: 0px;
  26.                 margin: 0px;
  27.                 float: right;
  28.                 overflow: hidden;
  29.                 position: relative;
  30.                 text-align: left;
  31.             }
  32.  
  33.             #strona
  34.             {
  35.                 margin: 0px;
  36.                 padding: 0px;
  37.                 margin-left: 220px;
  38.                 margin-right: 200px;
  39.                 text-align: left;
  40.                 background-color: yellow;
  41.             }
  42.  
  43.             #stopka
  44.             {
  45.                 clear: both;
  46.                 background-color: olive;
  47.             }
[CSS] pobierz, plaintext

ważne jest, że div strona nie ma przypisanej stałej szerokości. teraz wewnątrz niego chcę umieścić tabelę, która będzie miała 100% jego długości: 
[CSS] pobierz, plaintext 
  1. table.tablica
  2.             {
  3.                 background-color: blue;
  4.                 margin: 0px;
  5.                 padding: 0px;
  6.                 width: 100%;
  7.             }
[CSS] pobierz, plaintext

i tutaj pojawia się problem. otóż cywilizowane przeglądarki (ff, opera) interpretują że 100% szerokości diva jest to cały jego obszar zawartości (bez marginesów i obramowań. efekt uzyskany wygląda następująco:


IE7 interpretuje inaczej inaczej 100% szerokości diva jako jego obszar zawartości + marginesy, przez co tabela rozciąga się (i przy okazji diva) na całą dostępną szerokość ekranu oraz wyjeżdża poza region prawy.


moje pytanie więc brzmi, jak zrobić tabelę, która wypełni 100% diva o automatycznej szerokości w IE7?

poniżej zamieszczam cały kod strony jakby ktoś był tak dobry i chciał to przetestować u siebie winksmiley.jpg
[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.         <style type="text/css">
  5.             #naglowek
  6.             {
  7.                 background-color: aqua;
  8.                 margin: 0 auto 0 auto;
  9.                 padding: 0px;
  10.                 width: 100%;
  11.             }
  12.  
  13.             #menu
  14.             {
  15.                 background-color: green;
  16.                 width: 220px;
  17.                 float: left;
  18.                 overflow: hidden;
  19.                 position: relative;
  20.                 padding: 0px;
  21.                 margin: 0px;
  22.                 text-align: left;
  23.             }
  24.  
  25.             #prawy
  26.             {
  27.                 background-color: orange;
  28.                 width: 200px;
  29.                 padding: 0px;
  30.                 margin: 0px;
  31.                 float: right;
  32.                 overflow: hidden;
  33.                 position: relative;
  34.                 text-align: left;
  35.             }
  36.  
  37.             #strona
  38.             {
  39.                 /* lewy margines = szerokosc lewego menu + jego margines*/
  40.                 margin: 0px;
  41.                 padding: 0px;
  42.                 margin-left: 220px;
  43.                 margin-right: 200px;
  44.                 text-align: left;
  45.                 background-color: yellow;
  46.             }
  47.  
  48.             #stopka
  49.             {
  50.                 clear: both;
  51.                 background-color: olive;
  52.             }
  53.  
  54.             table.tablica
  55.             {
  56.                 background-color: blue;
  57.                 margin: 0px;
  58.                 padding: 0px;
  59.                 width: 100%;
  60.             }
  61.         </style>
  62.         <title></title>
  63.     </head>
  64.     <body>
  65.         <div id="naglowek">Nagłówek</div>
  66.         <div id="menu">Lewy</div>
  67.         <div id="prawy">Prawy</div>
  68.         <div id="strona">
  69.             Środek
  70.             <table class="tablica">
  71.                 <tr><td>1</td><td>2</td></tr>
  72.                 <tr><td>3</td><td>4</td>
  73.                 </tr>
  74.             </table>
  75.         </div>
  76.         <div id="stopka">Stopka</div>
  77.     </body>
  78. </html>
[HTML] pobierz, plaintext
Pilsener
13.05.2010, 14:11:22
Musisz ustawić tabelę na 98 lub 99%, jeśli potrzebujesz 100% dla innych przeglądarek to nie widzę innej rady jak dodanie komentarza warunkowego. Można też spróbować różnych innych sztuczek - np. dać tabeli float czy position:relavite (czasem działa cuda w IE).
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.