Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][css] Problem z wyglądem
Forum PHP.pl > Forum > Przedszkole
redelek
18.02.2008, 15:18:01
Witam,

Może ktoś mi podpowiedzieć co robię źle i dlaczego ta stronka w IE 6.0 z SP2 wygląda jak ucięta?

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=ISO8859-2">
  5.   <meta name="generator" content="PSPad editor, www.pspad.com">
  6.   <title></title>
  7. <style>
  8. body {
  9.     font: bold 14px Verdana Geneva Arial Helvetica sans-serif;
  10.     color: #d6d6d5;
  11.     text-align  : center;
  12. }
  13. #div_glowny {
  14.     background-image: url(image/logowanie2.png);
  15.     background-repeat: no-repeat; 
  16.     margin: auto;
  17.     margin-top: 100px;
  18.     border     : none;
  19.     width      : 460px;
  20.  
  21. }
  22.  
  23.  
  24. #div_prawy {
  25.     background-image: url(image/logowanie2.png);
  26.     background-repeat: no-repeat;
  27.     border        : none;
  28.     width         : 460px;
  29.     height        : 220px;
  30.     clear         : none;
  31.  
  32. }
  33.  
  34. </style>
  35. </head>
  36.   <body>
  37. <div id="div_glowny">
  38.     <div id="div_prawy"><br><br><br>
  39.     <form name="login" action="login.php" method="post">
  40.     <p>
  41.     <label>Użytkownik:</label>
  42.     <label>&nbsp;<input type="text" size="20" name="f_user"></label></p>
  43.     <p>
  44.     <label>Hasło:</label>
  45.     <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" size="20" name="f_passwd"></label></p>
  46.     <p><label><input value="Zaloguj się .." type="submit" name="d56b699830e77ba53855679cb1d252da"></label></p>
  47.  
  48.     </form>
  49.     </div>
  50.  
  51.  
  52.  
  53. </div>
  54.  
  55.   </body>
  56. </html>
[HTML] pobierz, plaintext


Chodzi o dolne zaokrąglenia, całe tło przygotowałem w GIMP w FF, Opera i SeaMonkey wygląda super tylko IE ją rozwala ?
Tu jest link by potestować
http://redelek.net/screen/login_test.php

Dzięki za pomoc
Redelek
MMX3
18.02.2008, 15:23:18
PNG 24 śię nie wyświetla kanał alpha w IE6 zamień na png8 i tak jest białe tło to schodów nie będzie widać. Albo przygotuj 2 wersje i zastosuj trick z !important w css pozdro
Kowalikus
18.02.2008, 15:24:04
PNG przeźroczystośc w IE6
MMX3
18.02.2008, 15:33:10
Nie zawsze działa js tongue.gif
iron77
18.02.2008, 15:40:09
w tym 'haku' nie trzeba wcale uzywac JS. Ja rozwiazuje problem PNGow na IE6 w nastepujacy sposob:

Kod
.elementWithPNG {
  _background-image: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/sciezda/do/pliku/image.png');
}


trzeba tutaj uwazac tylko przy sciezce do pliku, nie dziala path relatywny do css-a, najlepiej przejsc przez wszystkie foldery od root-a w dol. Problemem moze byc rozniez to ze nie mozna ustawic background-position np. bottom. Powyzsza metoda daje obrazek z background-position:top left i background-repeat:no-repeat. Co do samego filtra DXImageTransform.Microsoft.AlphaImageLoader , odsylam na MSDN winksmiley.jpg
.radex
19.02.2008, 09:35:21
nie do końca. To co ty podajesz wymaga włączonego JS.
redelek
19.02.2008, 09:49:12
Panowie jest akcja udało mi się dojść bez przerabiania rysunku.
Mam teraz tylko problem z załadowaniem odpowiedniego stylu.

Zrobiłem tak
[HTML] pobierz, plaintext 
  1. <link href="css/style.css" rel="stylesheet" type="text/css" />
  2. <!--[if lte IE 6]>
  3. <link href="css/IE_style.css" rel="stylesheet" type="text/css" />
  4. <![endif]-->
[HTML] pobierz, plaintext


Ale działa tylko IE, w FF i Opera nie pobiera stylu style.css. Czy jest jakaś instrukcja dla FF i Opera ?

Redelek
mike
19.02.2008, 09:50:35
Cytat(redelek @ 19.02.2008, 09:49:12 ) *
Ale działa tylko IE, w FF i Opera nie pobiera stylu style.css. Czy jest jakaś instrukcja dla FF i Opera ?
Nie ma. A po co miałaby być skoro to właśnie badzIEwIE jest jedyna przeglądarką źle interpretującą style?
redelek
19.02.2008, 09:55:59
Cytat(mike @ 19.02.2008, 09:50:35 ) *
Nie ma. A po co miałaby być skoro to właśnie badzIEwIE jest jedyna przeglądarką źle interpretującą style?


Nie no chciałbym żeby działało w IE FF i Opera sad.gif
mike
19.02.2008, 10:13:43
Cytat(redelek @ 19.02.2008, 09:55:59 ) *
Nie no chciałbym żeby działało w IE FF i Opera sad.gif
Przeciez Opera i FF czyta style.
Daj linka to Ci powiemy co źle zrobiłeś, że nie czytają.
redelek
19.02.2008, 10:22:00
Cytat(mike @ 19.02.2008, 10:13:43 ) *
Przeciez Opera i FF czyta style.
Daj linka to Ci powiemy co źle zrobiłeś, że nie czytają.


Proszę
http://redelek.net/login/login.php

Jak jest to wpisane to w IE 6 działe, ale w FF i OPERA nie sad.gif

Redelek
mike
19.02.2008, 11:07:00
Cytat(redelek @ 19.02.2008, 10:22:00 ) *
Jak jest to wpisane to w IE 6 działe, ale w FF i OPERA nie sad.gif
1. Jak odświerzysz cache to zobaczysz że to w ogóle nie nie działa nawet pod IE;
2. Stosuj ścieżki relatywne. Folder z obrazkami masz wyżej niż folder z CSS. Więc nie url(image/logowanie3.png) tylko url('../image/logowanie3.png');
redelek
19.02.2008, 11:10:26
Cytat(mike @ 19.02.2008, 11:07:00 ) *
1. Jak odświerzysz cache to zobaczysz że to w ogóle nie nie działa nawet pod IE;
2. Stosuj ścieżki relatywne. Folder z obrazkami masz wyżej niż folder z CSS. Więc nie url(image/logowanie3.png) tylko url('../image/logowanie3.png');

No to znalazłem że skopałem
Ale czy można podłączyć dwa style i jeśli to będzie IE6 to załaduje IE_style.css a jeśli inna przeglądarka to załaduje style.css??


Redelek
mike
19.02.2008, 11:14:33
Cytat(redelek @ 19.02.2008, 11:10:26 ) *
Ale czy można podłączyć dwa style i jeśli to będzie IE6 to załaduje IE_style.css a jeśli inna przeglądarka to załaduje style.css??
tylko kontrolując to w PHP. Za pomocą samej przeglądarki źle to rozumiesz.
Nie jest tak że albo to, albo to.

Jeśli dasz tak:
Kod
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="css/IE_style.css" rel="stylesheet" type="text/css" />
<![endif]-->

to dla IE zostaną wczytane style style.css a później zostaną nadpisane przez style IE_style.css, natomiast da FF/Opera zostaną wczytane tylko style style.css
redelek
19.02.2008, 11:38:27
Cytat(mike @ 19.02.2008, 11:14:33 ) *
tylko kontrolując to w PHP. Za pomocą samej przeglądarki źle to rozumiesz.
Nie jest tak że albo to, albo to.

Jeśli dasz tak:
Kod
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="css/IE_style.css" rel="stylesheet" type="text/css" />
<![endif]-->

to dla IE zostaną wczytane style style.css a później zostaną nadpisane przez style IE_style.css, natomiast da FF/Opera zostaną wczytane tylko style style.css

No nie dokońca nadpisze. Jak czytałeś problem mam z PNG i przezroczystością.
w Style.css mam tak
[HTML] pobierz, plaintext 
  1. background-image: url(../image/logowanie3.png);
[HTML] pobierz, plaintext

w IE_style.css tak
[HTML] pobierz, plaintext 
  1. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../image/logowanie3.png',sizingMethod='scale');
[HTML] pobierz, plaintext

I to muszę mieć bo dzięki temu mój rysunek PNG wygląda dobrze w IE 6. Problem w tym że w pierwszym stylu jest background-image a
w drugim nie ma i rysunek pozostaje bez zmian i jest kiepski zobacz sam
http://redelek.net/login/login.php

Rysunek się wczytuje ale ta opcja filter nie kuka sad.gif

Redelek
mike
19.02.2008, 11:54:17
Cytat(redelek @ 19.02.2008, 11:38:27 ) *
No nie dokońca nadpisze.
Nadpisze, nadpisze. To, że źle zastosowałeś to to nie znaczy, że nie działa tongue.gif

Jeżeli chcesz za pomocą komentarzy alternatywnych załatwić podmianę .png na filter to musisz zrobić tak:

Dla FF/Opera:
Kod
background: url('image/png');

Dla IE:
Kod
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',sizingMethod='scale');
redelek
19.02.2008, 12:05:33
Cytat(mike @ 19.02.2008, 11:54:17 ) *
Nadpisze, nadpisze. To, że źle zastosowałeś to to nie znaczy, że nie działa tongue.gif

Jeżeli chcesz za pomocą komentarzy alternatywnych załatwić podmianę .png na filter to musisz zrobić tak:

Dla FF/Opera:
Kod
background: url('image/png');

Dla IE:
Kod
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',sizingMethod='scale');


Zrobiłem jak przykazałeś smile.gif i nie działa w IE nie wyświetla rysunku sad.gif

Jak ja nie cierpię IE
Redelek
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.