Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Problem z IE 6.0
Forum PHP.pl > Forum > Przedszkole
krzychu0808
24.06.2008, 23:20:06
Witam....
Mam problem robie sobie szablon allegro i napotkałem pewien problem gdy podlinkowałem elementy grafiki pomiędzy nimi powstał odstęp ale ten odstęp jest tylko w IE 6.0 a w Mozilla Firefox nie ma tego...
Link do szablonu

[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <style type="text/css">
  4.       body {background-color: #202632;}
  5.  
  6. #strona {
  7.     margin     : auto;
  8.     padding    : 0px;
  9.     width      : 862px;
  10. }
  11. #heder1 {
  12.     margin     : auto;
  13.     padding    : 0px;
  14.     width      : 611px;
  15.     height       : 227px;
  16.     float        : left;
  17.     background     : url(http://www.elaz.eu/allegro/rapid/images1/1_04.gif)
  18. }
  19. #heder2 {
  20.     margin     : auto;
  21.     padding    : 0px;
  22.     width      : 170px;
  23.     height       : 227px;
  24.     float        : left;
  25. }
  26. #heder3 {
  27.     margin     : auto;
  28.     padding    : 0px;
  29.     width      : 81px;
  30.     height       : 227px;
  31.     float        : left;
  32.     background     : url(http://www.elaz.eu/allegro/rapid/images1/1_06.gif)
  33. }
  34.  
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <div id="strona">
  39.     <div id="heder1"></div>
  40.     <div id="heder2">
  41.     <img src="http://www.elaz.eu/allegro/rapid/images1/1_05.gif" border="0">
  42.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_07.gif" border="0"></a>
  43.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_08.gif" border="0"></a>
  44.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_09.gif" border="0"></a>
  45.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_10.gif" border="0"></a>
  46.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_11.gif" border="0"></a>
  47.     <img src="http://www.elaz.eu/allegro/rapid/images1/1_12.gif" border="0">
  48.     </div>
  49.     <div id="heder3"></div>
  50.  
  51.     </div>
  52.   </body>
  53. </html>
[HTML] pobierz, plaintext


Proszę o pomoc...
nevt
25.06.2008, 07:02:37
dodaj do stylów:

Kod
a, a img {padding: 0; margin:0}
piotrekkr
25.06.2008, 08:44:56
Możliwe że pomoże też nadanie 
[HTML] pobierz, plaintext 
  1. a img {display:inline}
[HTML] pobierz, plaintext
.
krzychu0808
25.06.2008, 10:00:15
Zrobiłem coś takiego 

[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <style type="text/css">
  4.       body {background-color: #202632;}
  5. a img {
  6.     padding: 0;
  7.     margin:0;
  8.     display: inline;
  9. }
  10. #strona {
  11.     margin     : auto;
  12.     padding    : 0px;
  13.     width      : 862px;
  14. }
  15. #heder1 {
  16.     margin     : auto;
  17.     padding    : 0px;
  18.     width      : 611px;
  19.     height       : 227px;
  20.     float        : left;
  21.     background     : url(http://www.elaz.eu/allegro/rapid/images1/1_04.gif)
  22. }
  23. #heder2 {
  24.     margin     : auto;
  25.     padding    : 0px;
  26.     width      : 170px;
  27.     height       : 227px;
  28.     float        : left;
  29. }
  30. #heder3 {
  31.     margin     : auto;
  32.     padding    : 0px;
  33.     width      : 81px;
  34.     height       : 227px;
  35.     float        : left;
  36.     background     : url(http://www.elaz.eu/allegro/rapid/images1/1_06.gif)
  37. }
  38.  
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div id="strona">
  43.     <div id="heder1"></div>
  44.     <div id="heder2">
  45.     <img src="http://www.elaz.eu/allegro/rapid/images1/1_05.gif" border="0">
  46.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_07.gif" border="0"></a>
  47.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_08.gif" border="0"></a>
  48.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_09.gif" border="0"></a>
  49.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_10.gif" border="0"></a>
  50.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_11.gif" border="0"></a>
  51.     <img src="http://www.elaz.eu/allegro/rapid/images1/1_12.gif" border="0">
  52.     </div>
  53.     <div id="heder3"></div>
  54.  
  55.     </div>
  56.   </body>
  57. </html>
[HTML] pobierz, plaintext


Ale niestety nic to nie dało.... ma ktoś jakiś pomysł może błąd gdzieś zrobiłem... proszę o pomoc
l0ud
25.06.2008, 10:08:20
(do pierwszej wersji). Dodaj wyświetlanie blokowe obrazkom w tej warstwie smile.gif

Kod
div#heder2 img {
    display: block;
}
krzychu0808
25.06.2008, 10:14:59
Wielkie dzięki.... ale mam jeszcze jeden problem w IE 6.0 nie wyśrodkowuje mi tej głównej tabeli

Zrobiłem tak:

[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <style type="text/css">
  4.       body {background-color: #202632;}
  5.  
  6.  
  7. div#heder2 img {
  8.     display: block;
  9. }
  10.  
  11. #strona {
  12.     margin     : auto;
  13.     padding    : 0px;
  14.     width      : 862px;
  15. }
  16. #heder1 {
  17.     margin     : auto;
  18.     padding    : 0px;
  19.     width      : 611px;
  20.     height       : 227px;
  21.     float        : left;
  22.     background     : url(http://www.elaz.eu/allegro/rapid/images1/1_04.gif)
  23. }
  24. #heder2 {
  25.     margin     : auto;
  26.     padding    : 0px;
  27.     width      : 170px;
  28.     height       : 227px;
  29.     float        : left;
  30. }
  31. #heder3 {
  32.     margin     : auto;
  33.     padding    : 0px;
  34.     width      : 81px;
  35.     height       : 227px;
  36.     float        : left;
  37.     background     : url(http://www.elaz.eu/allegro/rapid/images1/1_06.gif)
  38. }
  39.  
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <div id="strona">
  44.     <div id="heder1"></div>
  45.     <div id="heder2">
  46.     <img src="http://www.elaz.eu/allegro/rapid/images1/1_05.gif" border="0">
  47.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_07.gif" border="0"></a>
  48.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_08.gif" border="0"></a>
  49.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_09.gif" border="0"></a>
  50.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_10.gif" border="0"></a>
  51.     <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_11.gif" border="0"></a>
  52.     <img src="http://www.elaz.eu/allegro/rapid/images1/1_12.gif" border="0">
  53.     </div>
  54.     <div id="heder3"></div>
  55.  
  56.     </div>
  57.   </body>
  58. </html>
[HTML] pobierz, plaintext


Jestem początkujący jeżeli widzi ktoś jeszcze jakieś błędy w kodzie to proszę napisać...
l0ud
25.06.2008, 10:31:04
Dodaj doctype (przed <html>):
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


albo bardziej restrykcyjny strict, jeżeli będziesz umiał się do niego stosować winksmiley.jpg

Kod
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
gnowak
25.06.2008, 12:38:58
Prawidłowy plik html według w3c.org 1 warning o typu encoding (No Character Encoding Found! Falling back to UTF-8.).



I tak jak l0ud zaproponował. Główna tabela teraz jest wyśrodkowana.

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
      
      <title>Tytuł strony</title>
    <style type="text/css">
      body {background-color: #202632;}
            div#heder2 img {
                    display: block;
            }
            
            #strona {
                    margin     : auto;
                    padding    : 0px;
                    width      : 862px;
            }
            #heder1 {
                    margin     : auto;
                    padding    : 0px;
                    width      : 611px;
                    height       : 227px;
                    float        : left;
                    background     : url(http://www.elaz.eu/allegro/rapid/images1/1_04.gif)
            }
            #heder2 {
                    margin     : auto;
                    padding    : 0px;
                    width      : 170px;
                    height       : 227px;
                    float        : left;
            }
            #heder3 {
                    margin     : auto;
                    padding    : 0px;
                    width      : 81px;
                    height       : 227px;
                    float        : left;
                    background     : url(http://www.elaz.eu/allegro/rapid/images1/1_06.gif)
            }
                        
        </style>
  </head>
  <body>
    <div id="strona">
    <div id="heder1"></div>
    <div id="heder2">
    <img src="http://www.elaz.eu/allegro/rapid/images1/1_05.gif" border="0" alt="img">
    <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_07.gif" border="0" alt="img"></a>
    <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_08.gif" border="0" alt="img"></a>
    <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_09.gif" border="0" alt="img"></a>
    <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_10.gif" border="0" alt="img"></a>
    <a href="index.html"><img src="http://www.elaz.eu/allegro/rapid/images1/1_11.gif" border="0" alt="img"></a>
    <img src="http://www.elaz.eu/allegro/rapid/images1/1_12.gif" border="0" alt="img">
    </div>
    <div id="heder3"></div>
    
    </div>
  </body>
</html>
krzychu0808
25.06.2008, 12:57:10
to będziesz szablon allegro więc "<title>Tytuł strony</title>" niepotrzebne....
gnowak
25.06.2008, 13:01:30
OK, ale

[HTML] pobierz, plaintext 
  1. alt="img"
[HTML] pobierz, plaintext


tak winksmiley.jpg
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.