Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Dlaczego inaczej jest pod IE a pod FX
Forum PHP.pl > Forum > Przedszkole
Blon_
Mam pewien problem napisałem stronkę wszystko jest ok ale nie wiem czemu pod IE wszystko jest zupełnie inaczej. Przesunietę chociaż pozycjonuję wzgledem stałego obiektu... Pod firefoxem wszystko dobrze pod IE wszystko poprzesuwane. Jest na to jakaś rada.. Stronka napisana XHTML z CSS może ktoś pomódz.. jest na to sposób
dufia
Rozne przegladarki interpretuja niektore rzeczy na rozne sposoby, to jest przyczyna.

A jaka rada? Usun element ktory jest zle wyswietlany i zbuduj go na nowo, ale inaczej(w inny sposob, ale uzyskujac ten sam efekt).
Blon_
hmmm.. a co masz na myśli zeby stworzyć go od nowa w sensie że jak.. mam dwa problemy tekst zaczyna sie roznie w ie i w fx nie jest to rowne.. no i obrazki ktore wkleilem tez nie sa w tych samych pozycjach i nie wiem czemu..
minolone
Kolego najlepiej to wklej tutaj swój kod, albo wstaw link do strony, bo takie pisanie ze tutaj jest tak a tam inaczej to za duzo nie mowi. Pokaż a napewno pomoc otrzymasz
dufia
Jesli cos jest inaczej w dwoch roznych przegladarkach, to jest zle zbudowane. Jesli np walczysz z tym zle wyswietlajacym sie tekstem, nic nie pomaga. To usun to i zrob od nowa, ale np uzywaj tylko css i div'ow, jesli nie robiles tak wczesniej. Po prostu zrob to troche inaczej, moze sie uda.
DiH
Cytat
Jesli cos jest inaczej w dwoch roznych przegladarkach, to jest zle zbudowane.

Bzdura. IE i starsze przeglądarki nie obsługują standardów w jednolity sposób, stąd rozbieżność w wyglądzie niektórych elementów.

Jeżeli we wszystkich innych przeglądarkach Twoja strona wygląda OK, to napisz oddzielny styl dla IE i kłopot z głowy. Zanim jednak zaczniesz sprawdź, czy na Chrome, Operze, czy Safari wszystko chula, bo wina może leżeć też po stronie błędnego kodu.
Blon_
Mam kilka problemów ze stronką.. oto link do strony.. TUTAJ

kod CSS

Kod
      
  

    BODY {
      background: url(Image/tlo.jpg);
      background-repeat: repeat;
      
      }


      #kartka {
      position: relative;
      
      background-repeat: no-repeat;
      width: 800px;
      height: 820px;
      margin: 0 auto;
      }
      
      /* kropka */
      #kartka h1 {
      position: absolute;
      display: block;
      top: 47px;
      left: 325px;      
      }
      
      /* tekst */
      #kartka h2 {
      position: absolute;
      width: 250px;
      height: 240px;
      display: block;
      top: 460px;
      left: 90px;  
      color: #3f3d3d;  
      font-size: 9.4pt;  
      text-align: justify;
      font-family: Verdana;  
      }
      
      #kartka h4 {
      position: absolute;
      width: 250px;
      height: 240px;
      display: block;
      top: 452px;
      left: 360px;  
      color: #3f3d3d;  
      font-size: 9.4pt;  
      text-align: justify;
      font-family: Verdana;    
      }
      
      #kartka h5 {
      position: absolute;
      width: 500px;
      height: 240px;
      display: block;
      top: 90px;
      left: 100px;  
      color: #3f3d3d;  
      font-size: 10pt;  
      text-align: justify;
      font-family: Verdana;    
      }
      
     /* obrazek_srodek */
      #kartka h3 {
      position: absolute;
      display: block;
      top: 160px;
      left: 180px;      
      }
      
      /* menu */
      #kartka ul {
      overflow: hidden;
      position: absolute;
      top: 48px;
      left: 290px;
      list-style: none;
      }
      
      #kartka ul li{ float: left; }
      #kartka ul li a{ display: block; padding: 5px 8px; color: #3f3d3d;  font-size: 3.4mm; font-family: Verdana;    text-decoration: none;}

      
      /* menu_dol */
      #menu_dol ul {
      overflow: hidden;
      position: absolute;
      top: 690px;
      left: 170px;
      list-style: none;
      }
      
      #menu_dol ul li{ float: left; }
      #menu_dol ul li a{ display: block; padding: 5px 8px; color: #3f3d3d;  font-size: 3.4mm; font-family: Verdana;     text-decoration: none;}

  
      /* kropka_dol */
      #menu_dol h1 {
      position: absolute;
      display: block;
      top: 672px;
      left: 208px;      
      }

       #menu_dol h2 {
      position: absolute;
      display: block;
      top: 696px;
      left: 269px;      
      }

       #menu_dol h3 {
      position: absolute;
      display: block;
      top: 672px;
      left: 330px;      
      }
      
       #menu_dol h4 {
      position: absolute;
      display: block;
      top: 690px;
      left: 401px;      
      }
      
      #menu_dol h5 {
      position: absolute;
      display: block;
      top: 683px;
      left: 434px;      
      }




XHTML

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">


<head>

<!--[if lt IE 7]>
<script language="JavaScript" type="text/javascript" src="pngwie.js"></script>
<![endif]-->


<meta name="description" content="opis" />
<meta name="keywords" content="slowa_kluczowe" />
<meta http-equiv="content-language" content="pl" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

<title>www</title>

<link rel="stylesheet" href="style.css" media="screen" type="text/css" />

</head>
<body>


  <div id="kartka">
          
          <h6><image src="Image/kartka.png"></h6>  
          <h1><image src="Image/kropka.png"></h1>
        
          <ul>
          <li><a href="D:">  Glowna </a></li>
          <li><a href="link"> O mnie </a></li>
          <li><a href="link"> Portfolio </a></li>
          <li><a href="link"> CV </a></li>
          <li><a href="link"> Kontakt </a></li>
          </ul>
      
       <h3><image src="Image/image.jpg"> </h3>
       <h2>sjakdhjkfhaskfj jks fjkshfkjashkjlfhasklj lsjkhf jks\hflasj fkljsah fkjasdhfjkl skfljh askjfhaksj flkashf askjdfh askfhlkadsjhfkl sdjhfkjdshfjkas dhkflahjdsklfjhsakjdfhskjdgh jkghakljhd fjksdlfahs fjkl
       </h2>
       <h4>adskjgfjkdfhasklj fsjhakljn ijklsdjfkj8vakdjm i;asdkfm ewalkjisomf  kdfjiawemfk osdkfewm midiowkemfnnda; kdakkfjia'
       </h4>
       <h5>mnzbfsiudhf szcvur;ziuzfndsnh :idfurkj;lkcvjkcxizvujdsf lzkhjkvcnv kjsdhfkjcvnxzkljchv dfkljzhxcjv zlkjdfh
       </h5>
        
        
  
  <div id="menu_dol">
    
        
          <h1><image src="Image/kropka.png"></h1>
          <h2><image src="Image/kropka.png"></h2>
          <h3><image src="Image/kropka.png"></h3>
          <h4><image src="Image/kropka.png"></h4>
          <h5><image src="Image/kropka.png"></h5>  
        
                
          <ul>
          <li><a href="D:">  Glowna </a></li>
          <li><a href="link"> O mnie </a></li>
          <li><a href="link"> Portfolio </a></li>
          <li><a href="link"> CV </a></li>
          <li><a href="link"> Kontakt </a></li>
          </ul>
    
   </div>

</div>
    
      
    
</body>
</html>


Nie wiem czemu pod IE strona nie jest wyśrodkowana pod innymi przeglądarkami wszystko działa ok.. Nie wiem też czemu wszystko jest poprzesuwane.. Te kropki na dole ktore sa kolo menu czemu kazda ma inna wartosc wypozycjonowania.. nawet jak je uloze pod Firefoxem to i tak pod IE beda rozjechane.. Moze ktoś pomódz.. z góry dzięki..

Pawel_W
ehh, żeby można było mówić o różnicach między przeglądarkami to kod musi być poprawny, a u ciebie tak nie jest

po 1:
  1. <script type="text/javascript">
  2. window.google_analytics_uacct = "UA-7539432-13";
  3. </script>
  4. #catfish111eae22{PADDING: 0px;MARGIN: 0px 0px -90px;WIDTH: 100%;HEIGHT: 90px;BOTTOM: 0px;POSITION: fixed;}
  5. </style>
  6. <!--[if IE]>
  7. <style>
  8. #catfish111eae22{ Z-INDEX: 1000; OVERFLOW: hidden; POSITION: absolute;}
  9. HTML,BODY {OVERFLOW: hidden;WIDTH: auto;HEIGHT: 100%;}
  10. DIV#zip111eae22{PADDING: 0px;MARGIN: 0px;OVERFLOW: auto;WIDTH: 100%;HEIGHT: 100%;POSITION: relative;}
  11. </style>
  12. <![endif]-->
  13. <div id="topad111eae22"></div>
  14. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  15. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

przed Twoim kodem masz pełno syfu reklamowego, jeżeli nie możesz tego usunąć to niestety, musisz liczyć się z tym że przez to strona może ci się rozjechać

po 2:
  1. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
  2. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

po co ci 2 kodowania znaków? wystarczy jedno i najlepiej UTF
po 3:
cały tekst, który znajduje się na stronie, dosłownie wszystko, znajduje się między znacznikami <h1>, <h2> itd.
nagłówki nie służą do prezentacji tekstu tylko wyróżniania jego części, jak np. tytuły itp., do zwykłej treści są paragrafy

i jeszcze jakiś syf na dole
  1. </style></noframes></pre></xmp></noscript>
modern-web
Przegladarki dziela się na 2 grupy:
1. IE
2. Chrome, Mozilla, Opera, Safari

Te 2 grupy maja zupelnie rozne sposoby interpretowania Kody HTML. 2 grupa jest nowoczesniejsza winksmiley.jpg Trudno robi się strony ze wsparciem obu grup naraz ;/
Blon_
co do tych reklam to fakt i to przez nie ten syf w kodzie ale to tylko tak tymczasowo wrzuciłem na ten serwer.. Kodowanie znaków zmienilem zeby było tylko jedno..co do tekstu to jak użyć paragrafów za pomocą znacznika p1 p2 itd bo to coś mi nie działa tzn oczywiści tylko pod IE. A jak rozwiązać sprawę tych kropek żeby było równo ułożone..
DiH
Wynocha do kursu.
  1. <h1> do <h6>
Blon_
fakt w znacznikach h umieszcza sie naglowki w znacznikach <p> umieszcza sie tekst akapitu.. ale dlaczego nie moge zdefiniowac w css pozycji p nie mozna ustalic polozenia oraz szerokosci okna znacznik p. Mozna uzyc tylko na cala szerokosc diva.. Trzeba by bylo stworzyc diva o takich rozmaiar jaki chcemy i w nim umiescic paragraf to chyba bez sensu czy nie..
DiH
Chętnie odpowiedziałbym na Twoje pytania - niestety - mój poziom znajomości języka polskiego nie pozwala mi na zrozumienie Twojej wypowiedzi. Używaj zdań prostych, niezłożonych, stosując interpunkcję poprawnie.

Nie da się naprawdę zmienić szerokości paragrafu?
  1. <p style="width:300px;background:red;">Lorem ipsum, bla bla bla. Lorem ipsum, bla bla bla. Lorem ipsum, bla bla bla. Lorem ipsum, bla bla bla. Lorem ipsum, bla bla bla. Lorem ipsum, bla bla bla. Lorem ipsum, bla bla bla. </p>

Reszty problemu nie zrozumiałem.
Blon_
myślałem że można to zrobić jakoś za pomoca cssa. zrobilem w xmlu coś takiego

Kod
<p style=" width: 300px;height: 240px;display: block;top: 10px; left: 100px;>dsfsfsdfds </p>



wszystko git szerokość wysokość wyrównanie czcionka działa git ale wypozycjonowanie już nie. Jak zaznaczam żeby było w jakieś odległości od góry to tak nie jest. Zaczyna sie od razu pod tą kartką z dlugopisem co mam na stronie nie da się tekstem wjechać na kartkę czemu..

No i jeszcze problem z tymi żółtymi kropkami co mam w menu jest jakiś pomysł żeby je ułożyć i dobrze to wyglądało..
thek
A czytałeś w CSS o pozycjonowaniu chociaż?
modern-web
Thek ma racje... Faktycznie używając arkusza styli CSS możesz niezależnie ustalić parametry tekstu i obiektów od reszty strony. Tego typu style przeglądarki interpretują podobnie winksmiley.jpg
Wejdź na http://www.kurshtml.boo.pl. Znajdziesz tam przydatne porady (CSS) ;D
Blon_
Wszyscy na mnie nakrzyczeli a podkresliłem że jestem początkujący tj moja pierwsza przykładowa stronka.. dopiero się uczę.. no i niestety tydzień czasu siedziałem nad tym i potrzebuję pomocy.. oto stronka: http://studio-www.pl/

kod css:

Kod
  

      
    BODY {
      background: url(Image/tlo.jpg);
      background-repeat: repeat;
      
      }


      #kartka {
      position: relative;
      
      background-repeat: no-repeat;
      width: 800px;
      height: 820px;
      margin: 0 auto;
      }
      
      
      
      /* tekst */
      #kartka p1 {
      position: absolute;
      width: 250px;
      height: 240px;
      display: block;
      top: 520px;
      left: 100px;  
      color: #3f3d3d;  
      font-size: 9.4pt;  
      text-align: justify;
      font-family: Verdana;  
      }
      
      #kartka p4 {
      position: absolute;
      display: block;
      top: 480px;
      left: 98px;  
      color: #e1941a;  
      font-size: 15pt;  
      font-family: Verdana;  
      }
      
       #kartka p5 {
      position: absolute;
      display: block;
      top: 480px;
      left:   370px;  
      color: #e1941a;  
      font-size: 15pt;  
      font-family: Verdana;  
      }
      
      #kartka p2 {
      position: absolute;
      width: 250px;
      height: 240px;
      display: block;
      top: 520px;
      left: 370px;  
      color: #3f3d3d;  
      font-size: 9.4pt;  
      text-align: justify;
      font-family: Verdana;    
      }
      
      #kartka p3 {
      position: absolute;
      width: 500px;
      height: 240px;
      display: block;
      top: 110px;
      left: 100px;  
      color: #3f3d3d;  
      font-size: 10pt;  
      text-align: justify;
      font-family: Verdana;    
      }
      
     /* obrazek_srodek */
      #kartka h3 {
      position: absolute;
      display: block;
      top: 160px;
      left: 180px;      
      }
      
      /* menu */
      #kartka ul {
      overflow: hidden;
      position: absolute;
      top: 49px;
      left: 302px;
      list-style: none;
      }
      
      #kartka ul li{ float: left; }
      #kartka ul li a{ display: block; padding: 5px 8px; color: #3f3d3d;  font-size: 3.4mm; font-family: Verdana;    text-decoration: none;}

      
      /* menu_dol */
      #menu_dol ul {
      overflow: hidden;
      position: absolute;
      top: 687px;
      left: 219px;
      list-style: none;
      }
      
      #menu_dol ul li{ float: left; }
      #menu_dol ul li a{ display: block; padding: 5px 8px; color: #3f3d3d;  font-size: 3.4mm; font-family: Verdana;     text-decoration: none;}



kod xhtml

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">


<head>

<!--[if lt IE 7]>
<script language="JavaScript" type="text/javascript" src="pngwie.js"></script>
<![endif]-->


<meta name="description" content="opis" />
<meta name="keywords" content="slowa_kluczowe" />
<meta http-equiv="content-language" content="pl" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">


<title>Studio DESIGN</title>

<link rel="stylesheet" href="style.css" media="screen" type="text/css" />

</head>
<body>


  <div id="kartka">
          
          <h6><image src="Image/kartka.png"></h6>  
          
        
          <ul>
          <li><a href="D:">  Glowna </a></li>
          <li><a href="link"> O mnie </a></li>
          <li><a href="link"> Portfolio </a></li>
          <li><a href="link"> CV </a></li>
          <li><a href="link"> Kontakt </a></li>
          </ul>
      
       <h3><image src="Image/image.jpg"> </h3>
      
       <p4>
       Projektowanie stron www
       </p4>
       <p1>Proces tworzenia strony internetowej odbywa się w kilku etapach. Rozmowa z klientem odno?nie tematu oraz formy layoutu strony. Przygotowanie projektu wstępnego w celu akceptacji przez klienta. Projekt końcowy, zakodowanie strony www, umieszczenie strony na serwerze.  Cały proces tworzenia strony www zajmuje nie więcej niż dwa tygodnie
       </p1>
      
       <p5>Grafika komputerowa </p5>
      
       <p2>Projekt plakatów, wizytówek, ulotek, gazetek reklamowych, banerów. Praca grafika komputerowego jest bardzo ciekawa. Proces stworzenia plakatu czy wizytówki to zaledwie jeden czy dwa dni. Ci?gle zmieniaj?cy się temat pracy sprawia, że bardzo szybko można doj?ć do wprawy. Żadne wyzwanie nie stanowi dla mnie problemu.
       </p2>
      
      
       <p3>Witam, nazywam się Mariusz Błoński. Jestem absolwentem Politechniki Szczecińskiej wydziału Informatyki. Moj? pasj? jest grafika komputerowa. Od dłuższego czasu zajmuję się tworzeniem grafiki na potrzeby stron www. Zachęcam do przejrzenia strony oraz zapoznania się z moim portfolio.
       </p3>
        
        
  
  <div id="menu_dol">
    
        
          
        
                
          <ul>
          <li><a href="D:">  Glowna </a></li>
          <li><a href="link"> O mnie </a></li>
          <li><a href="link"> Portfolio </a></li>
          <li><a href="link"> CV </a></li>
          <li><a href="link"> Kontakt </a></li>
          </ul>
    
   </div>

</div>
    
      
    
</body>
</html>



Może mi ktoś powiedzięć czy mniej więcej dobrze to zrobiłem bo według mnie zle.. coś z tymi paragrafami z tekstem pokręciłem... Czemu pod IE wszystko wygląda inaczej poprzesuwane a pod Firefoxem czy inna przeglądarką w miarę ok.. proszę o pomoc.. to tylko przykladowa stronka na której się uczę ale nie wiem czemu tak się dzieje..

i jak może ktoś pomódz w temacie.. bo szukam już wszedzie i nigdzie nie mogę znaleźć odpowiedzi na to pytanie..
piotrooo89
proszę używać odpowiedniego bbcode, w przeciwnym razie zamknę temat.
mortus
Podajesz link do jednej strony (http://studio-www.pl/), a tutaj w kodzie pokazujesz inną. Naprawdę weź poszukaj jakiegoś kursu (x)html, bo brak Ci podstaw. W (x)html-u nie ma znaczników <p1></p1>, <p2></p2>,...,<pn></pn>, jest jeden znacznik <p></p>. W css dosłownie wszystko pozycjonujesz, a takie elementy jak <ul></ul>, <p></p>, i wiele innych są elementami typu inline i z założenia nie powinny być pozycjonowane (oczywiście można im nadać styl display: block;), ale to mija się z celem. Wspomniane elementy wykorzystuje się raczej do formatowania treści, a nie do wyświetlania jej w odpowiednim miejscu. Ogólnie źle się do tego zabierasz, ale to wynika z braku jakichkolwiek podstaw. Naprawdę odsyłam do Wujka Google. Powodzenia
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.