Forum PHP.pl > wtf? (Firefox stosuje się do auto margin a IE 7 nie?)

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: wtf? (Firefox stosuje się do auto margin a IE 7 nie?)

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Asmox

24.06.2009, 20:44:45

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?

wookieb

24.06.2009, 20:48:02

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).

l0ud

24.06.2009, 21:01:32

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

Asmox

24.06.2009, 22:13:16

oczywiście

[HTML] pobierz, plaintext 
<?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" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
  <link rel="Stylesheet" href="design/text_n_colors.css" type="text/css" />
  <link rel="Stylesheet" href="design/2_col_style" type="text/css" />
 
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <meta name="description" content="Wszystko co chcesz wiedzieć o FlyFFie" />
  <meta name="keywords" content="Flyff, FlyFF, Fly For Fun" />
  <title>Tytuł strony</title>
 
</head>
<body>
<div id="main_wrapper">
<div id="lcolumn">
<div id="menu">
  <div class="section">
    <div class="title"><div class="title_in">Sekcja 1</div></div>
    <div class="body"><div class="body_in">Linki 1</div></div>
  </div>
  <div class="section">
 
    <div class="title"><div class="title_in">Sekcja 2</div></div>
    <div class="body"><div class="body_in">Linki 2</div></div>
  </div>
</div>
</div>
 
<div id="ccolumn"><div id="content">
<p>Witam na stronie głównej!</p>
</div></div>
</div>
</body>
 
</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;
}

erix

24.06.2009, 22:19:47

[HTML] pobierz, plaintext 
<?xml-stylesheet href="design/text_n_colors.css" type="text/css" ?>
<?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ć. [;

Asmox

25.06.2009, 06:41:45

Cytat(erix @ 24.06.2009, 23:19:47 )

[HTML] pobierz, plaintext 
<?xml-stylesheet href="design/text_n_colors.css" type="text/css" ?>
<?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.

l0ud

25.06.2009, 09:29:30

"Zapomniałeś" o doctype

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 
<?php
header('Content-Type: application/xhtml+xml; charset=utf-8');
?>
[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

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

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.

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

Pozdrawiam

Asmox

25.06.2009, 10:24:00

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

erix

25.06.2009, 13:37:31

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ć.

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.