Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> wtf? (Firefox stosuje się do auto margin a IE 7 nie?)
Asmox
post 24.06.2009, 20:44:45
Post #1





Grupa: Zarejestrowani
Postów: 359
Pomógł: 12
Dołączył: 16.01.2009

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

Chciałbym na stronie zrobić układ stały dwukolumnowy. Jak zwykle w takiej sytuacji stosuje się auto-marginesy w CSS, aby ładnie wyśrodkować całą witrynę. Niestety nie wiem dlaczego, ale przy testach Firefox stosuje się do reguły CSS div#main_wrapper {margin: auto} a Internet Explorer (uwaga: wersja 7 nie 6) to olewa.
Sprawdziłem w internecie. Może trzeba stosować jakieś hacki? Nie, na stronie o centrowaniu elementów w CSS pisze, że tak jest dobrze i w IE też, zresztą jest tam dodatkowy przykład który sprawdziłem w IE i działa. Nie wiem co jest u mnie. Jak ktoś potrzebuje to wklejam kod:
Kod
div#main_wrapper {
    margin: auto;
    width: 1000px;
}

Jak już mówiłem to działa w FF a w IE nie chce. Dlaczego tak jest?


--------------------
Moja prywatna strona internetowa
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 8)
wookieb
post 24.06.2009, 20:48:02
Post #2





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
Bug ie.
Tyczy się to wersji <=7.
Na stronie, którą podałeś jest podane rozwiązanie...
Cytat
Należy pomóc mu dokładając centrowanie tekstu dla elementu nadrzędnego i usuwając wyśrodkowanie w samym elemencie (żeby nie popsuć wyglądu przez dziedziczenie).


Ten post edytował wookieb 24.06.2009, 20:50:27


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
l0ud
post 24.06.2009, 21:01:32
Post #3





Grupa: Zarejestrowani
Postów: 1 387
Pomógł: 273
Dołączył: 18.02.2008

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

Daj przykładowy, cały kod w którym masz problem. Oczywiście o takich rzeczach jak doctype pamiętałeś?


--------------------
XMPP: l0ud@chrome.pl
Go to the top of the page
+Quote Post
Asmox
post 24.06.2009, 22:13:16
Post #4





Grupa: Zarejestrowani
Postów: 359
Pomógł: 12
Dołączył: 16.01.2009

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

oczywiście biggrin.gif
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <?xml-stylesheet href="design/text_n_colors.css" type="text/css" ?>
  3. <?xml-stylesheet href="design/2_col_style.css" type="text/css" ?>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  6. <head>
  7.   <link rel="Stylesheet" href="design/text_n_colors.css" type="text/css" />
  8.   <link rel="Stylesheet" href="design/2_col_style" type="text/css" />
  9.  
  10.   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  11.   <meta name="description" content="Wszystko co chcesz wiedzieć o FlyFFie" />
  12.   <meta name="keywords" content="Flyff, FlyFF, Fly For Fun" />
  13.   <title>Tytuł strony</title>
  14.  
  15. </head>
  16. <body>
  17. <div id="main_wrapper">
  18. <div id="lcolumn">
  19. <div id="menu">
  20.   <div class="section">
  21.     <div class="title"><div class="title_in">Sekcja 1</div></div>
  22.     <div class="body"><div class="body_in">Linki 1</div></div>
  23.   </div>
  24.   <div class="section">
  25.  
  26.     <div class="title"><div class="title_in">Sekcja 2</div></div>
  27.     <div class="body"><div class="body_in">Linki 2</div></div>
  28.   </div>
  29. </div>
  30. </div>
  31.  
  32. <div id="ccolumn"><div id="content">
  33. <p>Witam na stronie głównej!</p>
  34. </div></div>
  35. </div>
  36. </body>
  37.  
  38. </html>
[HTML] pobierz, plaintext

Kod jest generowany w pewnym sensie automatycznie (nagłówek, stopka i menu będą identyczne dla każdej strony więc są includowane)
a teraz cały CSS:
1. Odpowiedzialny za tekst i kolory:
Kod
* {
    margin: 0;
    padding: 0;
}
/* Zerowanie wszystkich marginesów i dopełnień */
body {
    background: url(bg.png) repeat fixed;
}

2. Odpowiedzialny za kolumny + menu
Kod
div#main_wrapper {
    margin: auto;
    width: 1000px;
}

div#lcolumn {
    width: 20%;
    float: left;
}
div#lcolumn div#menu div.section {
    margin: 5px 5px 5px 0px;
}
div#lcolumn div#menu div.section div.title {
    padding: 3px;
    background-color: #797979;
    border: 2px solid #ff8c00;
}
div#lcolumn div#menu div.section div.body {
    padding: 3px;
    background-color: #707070;
    border: 2px solid #ff8c00;
    border-top: none;
}




div#ccolumn {
    width: 80%;
    float: left;
    margin: 5px 0px 5px 0px;
}
div#ccolumn div#content {
    padding: 3px;
    border: 2px solid #ff8c00;
    background-color: #f6ffac;
}


--------------------
Moja prywatna strona internetowa
Go to the top of the page
+Quote Post
erix
post 24.06.2009, 22:19:47
Post #5





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




 
[HTML] pobierz, plaintext 
  1. <?xml-stylesheet href="design/text_n_colors.css" type="text/css" ?>
  2. <?xml-stylesheet href="design/2_col_style.css" type="text/css" ?>
[HTML] pobierz, plaintext

Ekhm, nie możesz prez <link/>? Nie wiem, czy wszystkie przeglądarki to łykną; nie korzystasz z XSLT, to nie musisz tak. [;

Poza tym, ~wookieb napisał, co trzeba zrobić. [;


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Asmox
post 25.06.2009, 06:41:45
Post #6





Grupa: Zarejestrowani
Postów: 359
Pomógł: 12
Dołączył: 16.01.2009

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

Cytat(erix @ 24.06.2009, 23:19:47 ) *
[HTML] pobierz, plaintext 
  1. <?xml-stylesheet href="design/text_n_colors.css" type="text/css" ?>
  2. <?xml-stylesheet href="design/2_col_style.css" type="text/css" ?>
[HTML] pobierz, plaintext

Ekhm, nie możesz prez <link/>? Nie wiem, czy wszystkie przeglądarki to łykną; nie korzystasz z XSLT, to nie musisz tak. [;

Poza tym, ~wookieb napisał, co trzeba zrobić. [;

Cytat z webmade.org - Zmień XHTML 1.0 Strict na XHTML 1.1 !
Cytat(Mateusz Pilszek z webmade.org)
Standard XHTML 1.1 zaleca dołączanie arkuszy CSS za pomocą tzw. instrukcji przetwarzania XML. Powinna ona wystąpić zaraz po prologu:

<?xml version="1.0" ?>
<?xml-stylesheet href="styl.css" type="text/css" ?> Niestety, metody tej nie obsługuje żadna przeglądarka, więc konieczne jest także użycie znacznika <link>, o którym wspomniałem wcześniej. Mimo to polecam stosować dodatkowo tę instrukcję, ponieważ nie jest wykluczone, że w przyszłości będzie ona jedynym sposobem włączania zewnętrznych arkuszy do dokumentów.


--------------------
Moja prywatna strona internetowa
Go to the top of the page
+Quote Post
l0ud
post 25.06.2009, 09:29:30
Post #7





Grupa: Zarejestrowani
Postów: 1 387
Pomógł: 273
Dołączył: 18.02.2008

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

"Zapomniałeś" o doctype winksmiley.jpg przykrywając go śmieciami takimi jak:
Kod
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="design/text_n_colors.css" type="text/css" ?>
<?xml-stylesheet href="design/2_col_style.css" type="text/css" ?>


Firefox je ignoruje, zaś IE się gubi - nie znajduje doctype i przełącza się w quirks mode, co powoduje chociażby brak wsparcia dla takiego centrowania, oraz masę innych problemów.

Autor artykułu z webmade.org zapomniał o najważniejszej rzeczy wymaganej w XHTML 1.1 - zadeklarowaniu typu dokumentu w nagłówku, jako application/xhtml+xml . W praktyce musisz dodać następującą linijkę na początku dokumentu:
[PHP] pobierz, plaintext 
  1. <?php
  2. header('Content-Type: application/xhtml+xml; charset=utf-8');
  3. ?>
[PHP] pobierz, plaintext

Wtedy faktycznie zaczynasz korzystać z dobrodziejstw tego standardu, deklarować style jak poprzednio. Firefox parsuje dokument już jako XML, co najbardziej uwidacznia niemożność wyświetlenia strony przez nawet najmniejszy błąd biggrin.gif Jeżeli dba się o kod, nie jest to problemem. Problemem jest to, że strona nie wyświetli się na większości komputerów na świecie - IE po prostu nie obsługuje dokumentu wysłanego w ten sposób, a więc nie wspiera XHTML 1.1, w którym jest to głównym założeniem.
Dlatego tak naprawdę nikt normalny aktualnie nie koduje w HTML 1.1, nawet autor tego artykułu winksmiley.jpg cytując:
Cytat
Tak! Są to najważniejsze różnice pomiędzy XHTML 1.0 Strict a XHTML 1.1.

dokonałbym małej korekty:
Cytat
Tak! Są to najważniejsze różnice pomiędzy XHTML 1.0 Strict a nieprawidłowym XHTML 1.1.


Podsumowując: na dzień dzisiejszy daj sobie z tym spokój. winksmiley.jpg

Do poczytania: http://pornel.net/xhtml

Pozdrawiam


--------------------
XMPP: l0ud@chrome.pl
Go to the top of the page
+Quote Post
Asmox
post 25.06.2009, 10:24:00
Post #8





Grupa: Zarejestrowani
Postów: 359
Pomógł: 12
Dołączył: 16.01.2009

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

A jednak większość stron jest pisana w XHTML i jakoś się trzyma... Spróbuję najpierw zrobić downgrade do XHTML 1.0 Strict a jak dalej będzie kiepsko to **** z tym, będzie w zwykłym HTMLu. Mimo tego, że na podanej przez Ciebie stronie XHTML stracił w moich oczach bardzo dużo, jednak uważam że choćby podstawowy XHTML byłby przydatny.

@EDIT: Powróciłem do XHTML 1.0 wywaliłem XMLowskie znaczniki(?) dołączania stylów i jest ok biggrin.gif

Ten post edytował Asmox 25.06.2009, 10:28:23


--------------------
Moja prywatna strona internetowa
Go to the top of the page
+Quote Post
erix
post 25.06.2009, 13:37:31
Post #9





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Cytat
A jednak większość stron jest pisana w XHTML i jakoś się trzyma...

Owszem, ale wówczas, gdy wysyła MIME text/html. [;

Przy application/xhtml+xml dzieją się nieraz dziwne rzeczy, np. Firefox uniemożliwia korzystanie z innerHTML, niektóre skrypty przestają działać.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

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

 

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

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

RSS Wersja Lo-Fi Aktualny czas: 20.06.2025 - 16:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn