Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] tabelka rozciągająca diva w IE
Forum PHP.pl > Forum > Przedszkole
dawidoff86
1.04.2010, 11:00:04
witam! mam problem z działaniem strony pod przeglądarką IE, a mianowicie tabelka umieszczona wewnątrz diva rozciąga go w szerz, a po za tym wyświetlana jest na samym dole diva. efekt jaki chce osiągnąć, i otrzymuje go w firefoxie, wygląda następująco:

natomiast w IE rozjeżdża się to tak:


mój kod css wygląda następująco:
div przechowujący zawartość:
[CSS] pobierz, plaintext 
  1. #region_srodkowy
  2. {
  3.     /* lewy margines = szerokosc lewego menu + jego margines*/
  4.     margin-left: 250px;
  5.     margin-right: 20px;
  6.     margin-bottom: 20px;
  7.     border: 2px solid #c3dbc4;
  8.     background-color: #fff;
  9.     padding: 5px;
  10. }
[CSS] pobierz, plaintext

oraz tabela
[CSS] pobierz, plaintext 
  1. table.head
  2. {
  3.     width: 100%;
  4.     border: 2px solid fuchsia;
  5.     text-align: left;
  6.     margin: 0 auto;
  7.     padding: 0px;
  8. }
  9.  
  10. td.grupa2{
  11. 	border: 2px solid blue;
  12.         width: 100%;
  13.         height: 26px;
  14. 	text-align: left;
  15. 	font-size: 12px;
  16. 	color: white;
  17. 	font-family: tahoma;
  18. 	font-style: normal;
  19. 	font-weight: bold;
  20. 	background-image: url(grafika/tlo-nieb.gif);
  21. 	background-repeat: repeat;
  22. 	padding-left: 5px;
  23. }
[CSS] pobierz, plaintext
mortus
1.04.2010, 12:03:53
Przydałby się do tego jakiś HTML, bo tak to możemy myśleć i myśleć, a nic nie wymyślimy. Jedyne co mnie w Twoim css-ie zastanawia, to width: 100%; dla table.thead i td.grupa2. Zapis width: 100%; oznacza "niech element ma szerokość równą szerokości elementu nadrzędnego, który również ma ustawioną szerokość", jeżeli zatem żaden element nadrzędny nie ma ustanowionej szerokości, to wtedy bierze się szerokość strony.
Dziadzia
1.04.2010, 12:17:38
nie dasz rady zrobić tak, żeby przy jednym kodzie i jednych stylach strona wyglądała tak samo w ie oraz pozostałych przeglądarkach jednocześnie. najlepiej jak dodasz ten kod pomiędzy znacznikami <head></head> i zrobisz oddzielnie style dla ie i dla pozostałych przeglądarek.
Od razu informuje, że taki skrypt jest tylko do IE, pod operą google chrome, mozilla strona powinna wyglądać tak samo przy jednych stylach.
[HTML] pobierz, plaintext 
  1. <!--[if IE]>
  2. 	<link rel="stylesheet" type="text/css" href="style_ie.css">
  3. 	<![endif]-->	
[HTML] pobierz, plaintext


dawidoff86
1.04.2010, 12:19:52
dobrze, ale jak zrobić żeby właśnie pod IE się tak nie rozjeżdżała, bo nie mam już pomysłów questionmark.gif
Pawel_W
1.04.2010, 12:23:31
Cytat(Dziadzia @ 1.04.2010, 13:17:38 ) *
nie dasz rady zrobić tak, żeby przy jednym kodzie i jednych stylach strona wyglądała tak samo w ie oraz pozostałych przeglądarkach jednocześnie. najlepiej jak dodasz ten kod pomiędzy znacznikami <head></head> i zrobisz oddzielnie style dla ie i dla pozostałych przeglądarek.
Od razu informuje, że taki skrypt jest tylko do IE, pod operą google chrome, mozilla strona powinna wyglądać tak samo przy jednych stylach.
[HTML] pobierz, plaintext 
  1. <!--[if IE]>
  2. 	<link rel="stylesheet" type="text/css" href="style_ie.css">
  3. 	<![endif]-->	
[HTML] pobierz, plaintext

da się, są wyjątki, ale w większości przypadków da się znaleźć obejście, wystarczy po prostu na bieżąco monitować efekt

co do kodu, to jeżeli ustawisz width: 100% i dodasz do tego padding-left: 5px; to width wyjdzie ci 100% + 5px, więc trochę za dużo...
Ravik
1.04.2010, 12:26:05
Pokombinuj z długością tabeli, spróbuj usunąć margin dla tabeli, ustawic kilka atrybutów, ustawić position dla nadrzędnego diva, po prostu musisz kombinować, nie ma jednego przepisu na wszystko.
Dziadzia
1.04.2010, 12:37:32
najprościej będzie Ci zrobić tak jak napisałem wcześniej, po prostu nowy styl tylko do IE, oszczędzi Ci to nerwów i czasu.
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.