Forum PHP.pl > [CSS] Pozioma linia przerwy pomiędzy obrazkami.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Pozioma linia przerwy pomiędzy obrazkami.

what

27.10.2008, 21:37:14

Witam, chciałem zaznaczyć że jestem dość nowy w tematyce CSS. Problem jest dość dziwny a mianowicie:

http://img396.imageshack.us/my.php?image=33253931jv8.png

tak wygląda rozjechany element graficzny pod IE, natomiast pod FF jest wszystko ok:

http://img261.imageshack.us/my.php?image=27804103gl2.png

Zauważyłem, że gdy wszystkie tagi zamykam i otwieram jeden po drugim, to jest np:

<img ......></img><img .... >

jest wszystko w porządku, wystarczy jednak że zrobię spację pomiędzy, lub wstawię elementy w oddzielnych <div> a wszystko się posypie (jak w 1 linku) pod IE (pod FF jest wszystko w porządku), np:

<img ......></img>
<img .... >

czy
<div>
<img ......></img>
</div><div>
<img .... >
</div>

Dziękuje za wszelką pomoc

Dorzucam kod HTML i css ponieważ jest tego mało:

Kod

</head>
     <body>
            
            <div class="gornaRamka">
            
                   <div class="obrazki" style="height:42px; line-height:42px;">
                            <img src="gfx/Slice_1.jpg" style="width:638px; height:42px;"></img><img src="gfx/Slice_2.jpg" style="width:318px; height:42px;"></img>
                   </div>
            
                   <div class="obrazki" style="height:48px; line-height:48px;">
                           <img src="gfx/Slice_3.jpg" style="width:209px; height:48px;"></img><img src="gfx/Slice_4.jpg" style="width:222px; height:48px;"></img><img src="gfx/Slice_5.jpg" style="width:207px; height:48px;"></img><img src="gfx/Slice_6.jpg" style="width:318px; height:48px;"></img>
                   </div>
            <div>


     </body>
</html>

Kod

body {
       background-color: #dfce7e;
}

img {
       border: 0px;
       padding: 0px;
       margin: 0px;
}

div {
       margin: 0px;
       padding: 0px;
       border: 0px;

}

.calaRamka{

           margin-top: 0px;
           margin-left: auto;
           margin-right: auto;
           width: 956px;
           background-image:url(../gfx/Slice_29.jpg);
}

.gornaRamka{
           margin: 0px;
           padding: 0px;
           width: 956px;
}

.obrazki {
       float: left;
}

Maxik

27.10.2008, 21:41:40

Od kiedy to zamyka się tag img? Czy coś mi umknęło?

siemieng

27.10.2008, 21:49:36

po pierwsze:
<img src="ścieżka dostępu" alt="Tekst alternatywny" />

po drugie:
IE tak faktycznie ma, że enter po <img> powoduje odstęp przy wyświetlaniu w stosunku do kolejnego elementu strony.

Przykład na poprawne działanie w IE:

[HTML] pobierz, plaintext 
<div>
<img src="" alt="" /></div>
[HTML] pobierz, plaintext

Podobna sytuacja jest w tabelkach, tyczy się to jedynie znacznika <img>.

Inaczej możesz obrazek możesz umieścić jako tło elementu <div> i będzie też ok i bez uważanie na enter.

nevt

27.10.2008, 21:51:21

a jaki masz nagłówek <DOCTYPE> ? bo coś mi się wydaje, ze IE chodzi w quirks mode. możesz podać link do tej strony? poza tym:

[HTML] pobierz, plaintext 
<!-- błędny jest zapis -->
<img src='...' ></img>  
 
<!-- poprawnie -->
 <img src='...' />
 
<!-- w CSS zamiast -->
 img { border: 0px; padding: 0px; margin: 0px; }
div { margin: 0px; padding: 0px; border: 0px; }
 
<!-- daj -->
 
* { border: 0; padding: 0; margin: 0; }
[HTML] pobierz, plaintext

powodzenia.

what

27.10.2008, 22:01:33

dziękuje bardzo za pomoc, zaraz poprawie i w razie problemów na pewno napiszę

,
odnośnie nagłówka:

Kod

     <head>
          <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=utf-8">
          <META HTTP-EQUIV="Content-Language" content="pl" />
          <title>TYTUŁ</title>
          <link rel="Stylesheet" type="text/css" href="css/styl.css" />
     </head>

nevt

27.10.2008, 22:17:08

nagłówek <DOCTYPE> to nie nagłówek <HTML> czyli prawdopodobnie go nie masz...

dopisz na samym początku pliku html (w 1 linijce, przed tagiem <html>):

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[HTML] pobierz, plaintext

inaczej IE ZAWSZE będzie wyświetlał strony inaczej niż pozostałe przeglądarki...

what

27.10.2008, 22:22:33

ah zapomniałbym, oto adres strony:

www.twenty.pl/NEW/index.php

poprawiłem, tak jak powiedział siemieng, niestety dalej mam to samo

, spróbowałem także ustawić te obrazki jako tło elementu <div> jednak w takim wypadku w ogóle nic się nie wyświetla

(www.twenty.pl/NEW/index2.php, ten sam plik CSS)

Kod

<div class="gornaRamka">
            
                 <div style="height:42px; line-height:42px;">
                      <div class="obrazki" style="width:638px; heigth:42px; background-image:url(/gfx/Slice_1.jpg);"></div>
                      <div class="obrazki" style="width:318px; heigth:42px; background-image:url(/gfx/Slice_2.jpg);"></div>
                 </div>
            </div>

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.