GoldenLine
Zaloguj się
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: display: table - czym zastapic?

Jak wiadomo display: table (i inne z table w nazwie) bylo bojkotowane przez IE. W IE8 display: table wyglada poprawnie (mimo info na w3.org, ze IE8 tez tego nie obsluguje). jednak strona ma byc zgodna w dol (do IE6) co powoduje, ze nie moge tego uzyc.

A chaialm osiagnac efekt 2 divow lezacych obok siebie otoczonych ramka (border z diva zewnetrznego). 2 divy moge ulozyc obok siebie uzywajac odpowiedniej szerokosci, floatow i/lub display: inline w divie zewnetrznym. Ale jak wyrysowac ramke dookola tych 2 divow? Nawet jak calosc umieszczam w jeszcze jedym divie zewnetrznym, to mi rysuje ramke pustego diva NAD divami wyswietlajacymi sie w rzedzie :/



<div id="divZRamka" style="border: 1px solid black;">

	<div id="div1wRzedzie" style="float: left;">

		<a href=""><img src="" alt="okladka" class="okladka2" /></a>

	</div>

	<div id="div2wRzedzie" style="float: right">

		jakis tekst

	</div>

</div>
Link do wypowiedziLink
Piotr B.

Piotr B. Grafik - projektant

Temat: display: table - czym zastapic?

div id="divZRamka" też musi mieć float, ewentualnie jakiś clear: both pod dwoma div'ami wewnętrznymi.
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: display: table - czym zastapic?

No tak... mam wiecej divow ze style="clear: both" w kodzie niz czegokolwiek innego...

Dzieki wielkie :)
Link do wypowiedziLink

konto usunięte

Temat: display: table - czym zastapic?

div id="divZRamka" nie musi mieć właściwości float - konieczna jest za to inna właściwość:
#divZRamka {overflow: hidden;}
Link do wypowiedziLink
Waldemar Jonik

Waldemar Jonik właściciel,
webmaster,
programista, JW Web
Development

Temat: display: table - czym zastapic?

można też dla zewnętrznego DIV dać overflow-y:auto;
Link do wypowiedziLink
Piotr B.

Piotr B. Grafik - projektant

Temat: display: table - czym zastapic?

Waldek Mazurek:
div id="divZRamka" nie musi mieć właściwości float - konieczna jest za to inna właściwość:
#divZRamka {overflow: hidden;}

Można, tylko nie zatrybi to pod IE6 ;)
Link do wypowiedziLink
Tomasz Nowakowski

Tomasz Nowakowski frontend developer

Temat: display: table - czym zastapic?

Piotr B.:
Można, tylko nie zatrybi to pod IE6 ;)
Wystarczy wymusić hasLayout na #divZRamka. Najprościej tak:
#divZRamka {zoom: 1;}

Oczywiście zoom nie jest porawnym elementem css, więc wrzucamy go do pliku ładowanego tylko pod IE6:
<!--[if ie 6]><link rel="stylesheet" type="text/css" href="IE6fix.css" /><![endif]-->

Więcej na temat hasLayout i sposóbów jego wymuszania tutaj:
http://www.satzansatz.de/cssd/onhavinglayout.htmlTomasz Nowakowski edytował(a) ten post dnia 22.02.10 o godzinie 13:26
Link do wypowiedziLink

konto usunięte

Temat: display: table - czym zastapic?

Piotr B.:
Można, tylko nie zatrybi to pod IE6 ;)

Jak dla mnie działa bez hacków - także w IE6 ;)
Link do wypowiedziLink
Piotr B.

Piotr B. Grafik - projektant

Temat: display: table - czym zastapic?

Waldek Mazurek:
Piotr B.:
Można, tylko nie zatrybi to pod IE6 ;)

Jak dla mnie działa bez hacków - także w IE6 ;)

edit

źle skumałem;)

No faktycznie Twój przykład działa:)Piotr B. edytował(a) ten post dnia 22.02.10 o godzinie 18:42
Link do wypowiedziLink
Tomasz Nowakowski

Tomasz Nowakowski frontend developer

Temat: display: table - czym zastapic?

Waldek Mazurek:
Piotr B.:
Można, tylko nie zatrybi to pod IE6 ;)
Jak dla mnie działa bez hacków - także w IE6 ;)

Bo ustawiłeś szerokość dla #divZRamka co włączyło hasLayout dla elementu.
Link do wypowiedziLink
Szymon Piłkowski

Szymon Piłkowski Senior JavaScript
Developer

Temat: display: table - czym zastapic?

a ja polecam metodę z wykorzystaniem pseudoelementu "after" - http://www.positioniseverything.net/easyclearing.html - pozwala uniknąć zbędnego markupu (i nadmiaru overflow:hidden, które przeszkadzają, kiedy z elementów ma coś wystawać - np tooltip)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

CSS table/div i problem z IE




Wyślij zaproszenie do
Anuluj