Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] komentarze warunkowe dla IE, gdzie jest błąd
eol
post
Post #1





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 20.09.2008

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

Witam.

Trzy dni temu zacząłem przygodę z webmasterką (tak, tak, wy też kiedyś zaczynaliście) i nie bardzo mogę znależć błąd w komentarzu warunkowym który wstawiłem dla stylow IE

Chcę żeby pobierał osobny plik z stylami dla IE

Kod
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">


<title>MSGIE</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if gte ie 6]>
<link rel="stylesheet" href="exstyle.css" type="text/css">
<![endif]-->
                  
</head>


Pod FF na szczęście już to jakoś wygląda...

I jeszcze jedno pytanie. Czy dużo trzeba modyfikować w style.css, aby pod IE to jakoś wyglądało?

Ten post edytował eol 20.09.2008, 22:10:02
Go to the top of the page
+Quote Post
Shili
post
Post #2





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

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

Napisz co chcesz osiągnąć. Bardzo możliwe, że da się to spokojnie zrobić bez komentarzy warunkowych i powinieneś się uczyć tego, że komentarze warunkowe należy stosować w ostateczności, albo tam, gdzie są potrzebne jakieś zaawansowane fix'y. Raczej nie dla tego, co w miarę prosto da się osiągnąć innymi metodami, a wiele rzeczy z którymi nie radzą sobie początkujący da się poprawić w ie6/7 prostym sposobem (oczywiście, nie wszystko (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) )

Poza tym chcę zwrócić uwagę na jedną rzecz: po co stosujesz komentarze warunkowe, skoro i tak importujesz dokładnie ten sam arkusz stylów?!

Ten post edytował Shili 20.09.2008, 22:07:48
Go to the top of the page
+Quote Post
matssuda
post
Post #3





Grupa: Zarejestrowani
Postów: 25
Pomógł: 5
Dołączył: 7.02.2008

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

dobrze kombinujesz,
[HTML] pobierz, plaintext 
  1. <link rel="stylesheet" href="exstyle.css" type="text/css" />
  2.  <!--[if gte ie 6]>
  3.  <link rel="stylesheet" href="exstyle.css" type="text/css">
  4.  <![endif]-->
[HTML] pobierz, plaintext


tylko pobierasz w komentarzu warunkowym ten sam plik co dla innych przeglądarek. Powinieneś stworzyć plik css tylko dla IE, czyli np:

[HTML] pobierz, plaintext 
  1. <link rel="stylesheet" href="exstyle.css" type="text/css" />
  2.   <!--[if gte ie 6]>
  3.   <link rel="stylesheet" href="ie_exstyle.css" type="text/css">
  4.   <![endif]-->
[HTML] pobierz, plaintext

w nim umieszczać kod dla IE
Go to the top of the page
+Quote Post
eol
post
Post #4





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 20.09.2008

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

Mój błąd przy wklejaniu kodu. Oczywiście już to poprawiłem i komentarz warunkowy też działa:) (nie, nie... to wcale nie przez to, że zmieniłem nazwę pliku, bo na serwerze była poprawna; coś nie tak mam u siebie z IE, bo sprawdziłem na innym kompie i działają te warukowe)

Hmm.
W zasadzie to nie muszę używać tych komentarzy warunkowych, ale wyczytałem w innych postrach, że tak najczęściej zmieniają style pod IE, żeby to jakoś wyglądało.

Nie mniej, jeżeli są jakieś inne (łatwiejsze, bardziej pożądane czy jeszcze jakiś tam inny argument) sposoby, to ja bardzo chętnie się tego nauczę.

A co chcę osiągnąć? W zasadzie to nie wiele. Ot, żeby stronka wyglądała pod IE podobnie jak pod FF

oto link do strony

www.msgie.prv.pl

Obecnie pliki ze stylami dla FF i IE - odpowiednio style.css i exstyle.css - różnią się tylko kolorem tła dla banneru, więcej zmian na razie nie zdążyłem zrobić. Jak widać pod IE, DIVy są porozjeżdżane i w zasadzie to (póki nie ujawnią się jakieś inne niedogodności związane z IE, to potrzebuję tylko, aby pod IE to "jakoś" wyglądało.

HTML
Kod
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">


<title>MSGIE</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if gte ie 6]>
<link rel="stylesheet" href="exstyle.css" type="text/css">
<![endif]-->
                  
</head>

<body>

<div id="banner"> Tekst w banerze </div>        

<div id="menu">

<h2>Menu</h2>

<ul>
<li><a href="home.php">HOME</a></li>
<li><a href="tresc.php">Spis treść</a></li>
<li><a href="nowosci.php">Nowości</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>

<h2>Menu 2</h2>

</div>

<div id="tresc">
<h1> Treść </h1>

<p>Tu treść teraz musze tylko cos duzego nowe, świeże prace czekają przez całą dobę na Twej wirtualnej półce. Znajdziesz tu oprócz dzieł zachwycających, twórczość często nieporadną chociaż na pewno ambitną.Jeśli masz trochę zapału, to możesz przekazać autorom swoje wskazówki, albo po prostu - podziękować za chwile wzruszeń.
albo daj jakiś długi własny eżeli lubisz czytać, to znajdziesz u nas lekturę na wiele godzin. Nie musisz kupować książek - nowe, świeże prace czekają przez całą dobę na Twej wirtualnej półce. Znajdziesz tu oprócz dzieł zachwycających, twórczość często nieporadną chociaż na pewno ambitną. Jeśli masz trochę zapału, to możesz przekazać autorom swoje wskazówki, albo po prostu - podziękować za chwile wzruszeń</p>
</div>

<div id="prawa">

<p><span>Superważna wiadomość</span>
To jest naprawdę ważna wiadomośc, tak ważna,
że nawet nie moge jej tu napisać:-)</p>
<p><span>Imieniny:</span>
Dziś imieniny obchodzą Bonifacy i Kunegunda</p>
</div>
      
</body>
</html>


style.css
Kod
body {
margin: 0px;
padding: 0px;
background-color: black; }              

div {
                        
margin: 0;
padding: 0;
border: 1px solid silver;
color: black;
position: absolute; }      


div#banner {
top: 28px;                  
left: 28px;                
right: 138px;                
height: 100px;
width: 990px;
padding:15px;
background-color: black;
font: bold italic 18px verdana;
text-align: left;
color: #FF9;
z-index:10; }

div#menu {          
top: 168px;
left: 28px;
width: 200px;
background-color: #6e6e6e;
z-index: 15; }

div#menu h2 {  
padding: 5px;
margin: 2px; /*tutaj jest 2px dla menu i od wszystkich krawedzi jest oddalone o 2px, w przeciwieniskie do hiperlaczy*/
border: 1px solid black;
background-color: silver;                              
letter-spacing: 0.5em;
font: bold 13px verdana;
  }                      

div#menu ul {                    
padding: 0;

list-style-type: none;
font: bold 13px verdana;                                    
width: 180px; }

div#menu ul a {
display: block;
color: black;
background-color: silver;
padding: 5px 15px;
margin: 0 0 2px 0;
text-decoration: none;
border: 1px solid black }

div#menu ul a:hover {
color: gray;
background-color: #cdcdcd; }

div#menu ul a:hover {
background-image: url(1.gif);
background-position: 120px 50%;
background-repeat: no-repeat; }

div#tresc {
top: 168 px;
left: 10 px;                    
margin: 168px 315px 0 238px;        
background-color: #646464;
z-index: 25;
width: 600px; }

div#tresc h1 {
background-color: silver;
margin: 5px 3px 3px 3px;
padding: 10px;
font: bold 16px verdana;      
border: 1px solid black; }

div#tresc p {
background-color: silver;
margin: 10px 3px 5px; 3px;
padding: 5px;
font: normal 13px verdana;
border: 1px solid black; }

div#prawa {
top: 168px;
left: 848px;
width: 200px;
background-color: #6e6e6e;
z-index: 16;
}

div#prawa p {
background-color: silver;
margin: 10px 0 4px; 0;
padding: 5px;
font: bold 11px verdana;
border: 1px solid black; }

div#prawa p span {
margin: -3px -5px 3px -5px;    
padding: 3px;
border: 0;
background-color:  #cdcdcd;
display: block;
text-align: center; }



Nie bardzo wiem jak włączyć w pajączku/na forum numerowanie wierszy. Jakby ktoś pokazał gdzie to się robi to będę bardzo wdzięczny

EDIT: Niemalże siłą zostaję właśnie oderwany od kompa, także do wszelkich pomocnych uwag będę mógł się odnieść dopiero jutro z rana. W końcu życie nie kończy się tylko na kompie - i w sumie to bardzo dobrze. Pzdr i miłej nocki

Ten post edytował eol 20.09.2008, 22:34:57
Go to the top of the page
+Quote Post
Shili
post
Post #5





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

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

Jak rozumiem chodzi o menu i jego odsunięcie od lewej?

Problem jest bardzo prosty do rozwiązania (na szczęście, bo dzisiaj jakoś nie mam cierpliwości do siedzenia i rozmyślania (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif) )
Do reguły css div#menu ul musisz dodać:
Kod
margin-right: 0;
margin-left: 0;


Już wyjaśniam czemu (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Każda przeglądarka ma pewne domyślne reguły - na przykład dla list, bo z tą był problem:
rodzaj domyślnych znaczników, marginesy i paddingi. IE wyświetlało inaczej niż firefoks.

Polecam swoją drogą dwie rzeczy:
firebug dla Firefoksa (jeśli jeszcze nie słyszałeś) oraz Developer Toolbar dla IE (duuuużo gorszy niż Firebug, ale pozwala zidentyfikować błędy - w tym przypadku od razu mi powiedział, że margines lewy jest ustawiony na 30 punktów (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) )

Dobranoc (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował Shili 20.09.2008, 22:44:35
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: 24.08.2025 - 08:30
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn