Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Pozioma linia przerwy pomiędzy obrazkami.
what
post
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 27.10.2008

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

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 (IMG:http://forum.php.pl/style_emoticons/default/wstydnis.gif)
Dorzucam kod HTML i css ponieważ jest tego mało:
Kod

    </head>
     <body>
            <!-- GRAFIKA CZESC GORNA: -->    
            <div class="gornaRamka">
            <!-- LINIA 1: -->
                   <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>
            <!-- LINIA 2: -->
                   <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;
}
Go to the top of the page
+Quote Post
Maxik
post
Post #2





Grupa: Zarejestrowani
Postów: 726
Pomógł: 129
Dołączył: 10.01.2008
Skąd: Gdańsk

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

Od kiedy to zamyka się tag img? Czy coś mi umknęło?
Go to the top of the page
+Quote Post
siemieng
post
Post #3





Grupa: Zarejestrowani
Postów: 101
Pomógł: 7
Dołączył: 16.01.2007

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

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 
  1. <div>
  2. <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.
Go to the top of the page
+Quote Post
nevt
post
Post #4





Grupa: Przyjaciele php.pl
Postów: 1 595
Pomógł: 282
Dołączył: 24.09.2007
Skąd: Reda, Pomorskie.

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

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 
  1. <!-- błędny jest zapis -->
  2. <img src='...' ></img>  
  3.  
  4. <!-- poprawnie -->
  5.  <img src='...' />
  6.  
  7. <!-- w CSS zamiast -->
  8.  img { border: 0px; padding: 0px; margin: 0px; }
  9. div { margin: 0px; padding: 0px; border: 0px; }
  10.  
  11. <!-- daj -->
  12.  
  13. * { border: 0; padding: 0; margin: 0; }
[HTML] pobierz, plaintext

powodzenia.
Go to the top of the page
+Quote Post
what
post
Post #5





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 27.10.2008

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

dziękuje bardzo za pomoc, zaraz poprawie i w razie problemów na pewno napiszę (IMG:http://forum.php.pl/style_emoticons/default/snitch.gif) ,
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>
Go to the top of the page
+Quote Post
nevt
post
Post #6





Grupa: Przyjaciele php.pl
Postów: 1 595
Pomógł: 282
Dołączył: 24.09.2007
Skąd: Reda, Pomorskie.

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

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 
  1. <!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...
Go to the top of the page
+Quote Post
what
post
Post #7





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 27.10.2008

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

ah zapomniałbym, oto adres strony:

www.twenty.pl/NEW/index.php

poprawiłem, tak jak powiedział siemieng, niestety dalej mam to samo (IMG:http://forum.php.pl/style_emoticons/default/sciana.gif) , 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 (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) (www.twenty.pl/NEW/index2.php, ten sam plik CSS)

Kod
<!-- GRAFIKA CZESC GORNA: -->    
            <div class="gornaRamka">
            <!-- LINIA 1: -->
                 <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>


Ten post edytował what 27.10.2008, 22:50:56
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.09.2025 - 06:46
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn