Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] odstęp pomiędzy div z img
kossa
post
Post #1





Grupa: Zarejestrowani
Postów: 1 165
Pomógł: 9
Dołączył: 9.04.2002
Skąd: Toruń

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


Witam,
mam problem z ustawieniem dwóch div'ów obok siebie w których są obrazki.

Mam div kontener (display: inline) a w nim dwa div'y i w każdym obrazek.

W IE pomiędzy tymi dwoma div'ami nie ma odstępu, natomiast w FF i O jest odstęp:

W FF i O jest odstęp (czarne tło)
(IMG:http://www.kossakowski.isp.net.pl/forum1.gif)

W IE nie ma odstępu:
(IMG:http://www.kossakowski.isp.net.pl/forum2.gif)

Oto kod html:

  1. <div id="kontener">
  2.  
  3. <div id="img_div"><img src="images/box_gps.gif" alt="" /></div>
  4. <div id="img_div"><img src="images/box_gps.gif" alt="" /></div>
  5.  
  6. </div>


Kod CSS (już trochę zakręcony, bo próbowałem różnych kombinacji, jak jest ok w FF i O to W IE jest źle...)

body {background-color: #000000;}

  1. #kontener {
  2. display: inline;
  3. float: left;
  4.  
  5. }
  6.  
  7. #img_div {
  8. display: inline;
  9. clear: left;
  10. padding: 0px;
  11. margin: 0px;
  12. }
  13.  
  14. div {
  15. padding: 0px;
  16. margin: 0px;
  17. }
  18.  
  19. img {
  20. border: none;
  21. padding: 0px;
  22. margin: 0px;
  23. }


Proszę o pomoc w rozwiązaniu tego problemu.

Pozdrawiam,
Łukasz
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
Zoltarianie
post
Post #2





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 4.08.2006

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


Miałem podobny problem tylko że w pionie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Do obrazka w FF był dziwny margin 3px i usunąłem go dodając styl img "vertical-align: top;" można też "display: block;" ale wtedy będzie problem z treścią.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <title>test</title>
  3. <style type="text/css">
  4. img {vertical-align: top;}
  5. </style>
  6. </head>
  7. <body style="padding: 0px; margin:0px;">
  8. <div id="kontener">
  9. <div style="border: 1px solid #0000ff;">
  10. <img style="border: 1px solid #ff00ff;" src="http://www.opera.com/graphics/logos/linux.gif" alt="" />
  11. </div>
  12. <div style="border: 1px solid #0000ff;">
  13. <img style="border: 1px solid #ff00ff;" src="http://www.opera.com/graphics/logos/linux.gif" alt="" />
  14. </div>
  15. </div>
  16. </body>
  17. </html>


Ten post edytował Zoltarianie 11.04.2007, 10:34:41
Go to the top of the page
+Quote Post

Posty w temacie


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 Aktualny czas: 10.10.2025 - 02:43