Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML+CSS] IE + Float + Height = tajemniczy margines
Luciano
post 6.06.2007, 11:29:10
Post #1





Grupa: Zarejestrowani
Postów: 102
Pomógł: 1
Dołączył: 26.07.2006
Skąd: Londyn

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


Witam wszystkich,

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

  1. <div style="float:left;height:500px;background-color:yellow;width:100px;margin-right:0px;">xxxxxx</div>
  2. <div style="background-color:red;">111</div>
  3. <div style="background-color:blue;height:30px;margin-left:100px;">222</div>
  4. <div style="background-color:green;">333</div>
  5. </body>
  6. </html>


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

Ten post edytował Luciano 6.06.2007, 11:35:35


--------------------
Go to the top of the page
+Quote Post
barat
post 6.06.2007, 13:10:44
Post #2





Grupa: Zarejestrowani
Postów: 183
Pomógł: 0
Dołączył: 19.05.2007

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


do warstwy z float dopisz display: inline;

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

Powinno dac radę smile.gif
Go to the top of the page
+Quote Post
Luciano
post 6.06.2007, 13:30:35
Post #3





Grupa: Zarejestrowani
Postów: 102
Pomógł: 1
Dołączył: 26.07.2006
Skąd: Londyn

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


Dodanie display:inline nie pomoglo sad.gif


--------------------
Go to the top of the page
+Quote Post
barat
post 6.06.2007, 15:10:06
Post #4





Grupa: Zarejestrowani
Postów: 183
Pomógł: 0
Dołączył: 19.05.2007

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


to dopisz do pozostałych z floatem... to musi w końcu zadziałać smile.gif
Kombinuj - próbuj smile.gif
Go to the top of the page
+Quote Post
Luciano
post 6.06.2007, 15:30:36
Post #5





Grupa: Zarejestrowani
Postów: 102
Pomógł: 1
Dołączył: 26.07.2006
Skąd: Londyn

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


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


--------------------
Go to the top of the page
+Quote Post
jaskooo
post 6.06.2007, 18:26:46
Post #6





Grupa: Zarejestrowani
Postów: 28
Pomógł: 0
Dołączył: 24.04.2004
Skąd: Warszawa

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


A sprobuj w

  1. <div style="background-color:blue;height:30px;margin-left:100px;">222</div>



wykasowac

  1. margin-left:100px;


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

Notabene to po co tak zrobiłeś


--------------------
to tylko ja jaskooo :)
Go to the top of the page
+Quote Post
babejsza
post 6.06.2007, 20:05:58
Post #7





Grupa: Zarejestrowani
Postów: 407
Pomógł: 1
Dołączył: 4.03.2003
Skąd: warszawa

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


Odpowiedź treści kodu winksmiley.jpg.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html lang="pl">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>DODAJ DOCTYPE</title>
  7. </head>
  8.  
  9. <body>
  10. <div style="float: left; height: 500px; background-color: yellow; width: 100px; margin-right: 0px;">xxxxxx</div>
  11. <div style="background-color: red;">111</div>
  12. <div style="background-color: blue; height: 30px; margin-left: 100px;">222</div>
  13. <div style="background-color: green;">333</div>
  14. </body>
  15.  
  16. </html>
Go to the top of the page
+Quote Post
Luciano
post 7.06.2007, 10:05:26
Post #8





Grupa: Zarejestrowani
Postów: 102
Pomógł: 1
Dołączył: 26.07.2006
Skąd: Londyn

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


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.


--------------------
Go to the top of the page
+Quote Post
^bmb
post 7.06.2007, 15:57:54
Post #9





Grupa: Zarejestrowani
Postów: 69
Pomógł: 2
Dołączył: 12.12.2005

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


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


  1. <div style="float: left; height: 500px; background-color: yellow; width: 100px; margin: 0; padding: 0;">xxxxxx</div>
  2. <div style="float: left;height: 500px;width: 500px;">
  3. <div style="background-color: red;">111</div>
  4. <div style="background-color: blue;height: 20px;">222</div>
  5. <div style="background-color: green;">333</div>
  6. </div>


Ten post edytował ^bmb 7.06.2007, 15:58:25


--------------------
Cogito Ergo Sum
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 Wersja Lo-Fi Aktualny czas: 18.07.2025 - 23:09