Forum PHP.pl > [HTML+CSS] IE + Float + Height = tajemniczy margines

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML+CSS] IE + Float + Height = tajemniczy margines

Forum PHP.pl > Forum > Po stronie przeglądarki

Luciano

6.06.2007, 11:29:10

Witam wszystkich,

Natrafilem dzisiaj na bardzo dziwaczny problem. Stworzylem bardzo prosty kod HTML z wpisanymi CSSami

[HTML] pobierz, plaintext 
<html>
<body>
	<div style="float:left;height:500px;background-color:yellow;width:100px;margin-right:0px;">xxxxxx</div>
	<div style="background-color:red;">111</div>
	<div style="background-color:blue;height:30px;margin-left:100px;">222</div>
	<div style="background-color:green;">333</div>
</body>
</html>
[HTML] pobierz, plaintext

Jest sobie kolumna z lewej storny na wysokosc 500px a do niej przylegaja od prawej 3 wiersze z tlem w roznych kolorach. Srodkowy wiersz ma na sztywno ustawiona wysokosc. Okazuje sie ze jesli zdazy sie sytuacja ze jedna warstwa przylaga do drugiej i w warstwie przylegajacej ustawi sie parametr height IE robi cos czego nie rozumiem i nie potrafie obejsc a mianowicie tworzy przerwe miedzy przylegajacymi do siebie warstwami.. tak jakbym procz height dal jeszcze margin-left:2px;. Kazda przegladarka interpretuje to poprawnie ale nie IE. Czy spotkal sie ktos z podobnym problemem? Ja kompletnie zglupialem i nie wiem jak to obejsc.

Zamieszczam jeszcze print screena z w/w kodem w IE
http://img291.imageshack.us/my.php?image=glupiie2dc6.jpg

Pozdrawiam.

ps. kod celowo uproszczony, nawet gdy strona poprawnie sie waliduje mam ten sam efekt

barat

6.06.2007, 13:10:44

do warstwy z float dopisz display: inline;

http://www.positioniseverything.net/explor...loatIndent.html

Powinno dac radę

Luciano

6.06.2007, 13:30:35

Dodanie display:inline nie pomoglo

barat

6.06.2007, 15:10:06

to dopisz do pozostałych z floatem... to musi w końcu zadziałać

Kombinuj - próbuj

Luciano

6.06.2007, 15:30:36

Zapewniam Cie, ze z miejsca sprawdzalem rozne mozliwe kombinacje z owym atrybutem i nie dziala.

jaskooo

6.06.2007, 18:26:46

A sprobuj w

[HTML] pobierz, plaintext 
<div style="background-color:blue;height:30px;margin-left:100px;">222</div>
[HTML] pobierz, plaintext

wykasowac

[HTML] pobierz, plaintext 
margin-left:100px;
[HTML] pobierz, plaintext

tylko tym sie różni ten Div od pozostałych, które przylegają idealnie.

Notabene to po co tak zrobiłeś

babejsza

6.06.2007, 20:05:58

Odpowiedź treści kodu

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="pl">
 
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>DODAJ DOCTYPE</title>
	</head>
 
	<body>
		<div style="float: left; height: 500px; background-color: yellow; width: 100px; margin-right: 0px;">xxxxxx</div>
		<div style="background-color: red;">111</div>
		<div style="background-color: blue; height: 30px; margin-left: 100px;">222</div>
		<div style="background-color: green;">333</div>
	</body>
 
</html>
[HTML] pobierz, plaintext

Luciano

7.06.2007, 10:05:26

Zaznaczylem ze tresc kodu celowo uproszczona, nawet z doctypem w pelni walidowany posiada ten sam blad (twoj kod rowniez daje ten efekt).
Co do kolegi wczesniej margina przez przypadek nie wykasowalem. Ponadto margin obok floatowanej warstwy ma bardzo sensowny powod.
Tak czy siak to wciaz nie dziala, mozna oszukac przegladarke i zorbic flaot left dla niebieskiej warstwy ale wtedy nie bedzie auto rozciagnieta do konca strony.

Tak czy siak wciaz nie dziala jak powinno.

^bmb

7.06.2007, 15:57:54

Wrzuć te 3 po prawej w odrębny element blokowy tez floatowany i nie powinno być problemu

[HTML] pobierz, plaintext 
<div style="float: left; height: 500px; background-color: yellow; width: 100px; margin: 0; padding: 0;">xxxxxx</div>
<div style="float: left;height: 500px;width: 500px;">
	<div style="background-color: red;">111</div>
	<div style="background-color: blue;height: 20px;">222</div>
	<div style="background-color: green;">333</div>
</div>
[HTML] pobierz, plaintext

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.