Rafał Mazurkiewicz

Rafał Mazurkiewicz serwisant - Niver
Niwińscy spj.j,
właściciel -
zlabs.pl

Temat: Dostosowanie CSS dla przeglądarek

Witam, wziąłem się za napisanie dla siebie prostej stronki, żeby zawiesić w sieci, i o ile w Firefoxie jest tak jak bym chciał (w sumie użyłem w CSSie kilku elementów, które tylko FF i pochodne obsługuje) to w żaden sposób nie wiem jak dostosować kod pod IE i reszte (opery, nie opery safari itp).

Założenie jest takie:
Firefox

IE prezentuje to w ten sposób:
Internet Explorer.

CSS wygląda tak:

/*div.menu {border: 1px solid black; background: red;s -webkit-border-radius: 25px; -moz-border-radius: 25px; width: 140px; padding-left: 5px; padding-top: 2px; padding-bottom: 2px; padding-right: 5px; text-align:center;}*/
body {
margin: 0 auto;
/*background-color: #BFBFBF;*/
background-image: url(green-background.gif);
font-family: sans-serif; Tahoma; Verdana;
font-size: 12px;
}
/* DIVy */
div.left {
float: left;
background: white;
height: 100px;
width: 22%;
text-align: center;
margin-top: 40px;
margin-left: 10px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}

div.content {
/*float: right;*/
/*margin-top: 100px;*/
margin-left: 25%;
margin-right: 30px;
background: white;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
width: 70%;
height: 400px;
/*border: 5px solid #7FFF00;*/
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
div.title {
text-align: left;
font-size: 16px;
font-weight: bold;
margin-top: 5px;
margin-left: 5px;
}

div#footer {
clear: both;
text-align: right;
font-size: 10px;
margin-right: 30px;
}
/* NAVI */
#menu {
/*background: #800000;*/
position: relative;
margin-left: 24%;
padding: 0;
height: 20px;
/*border-left: 2px solid #800000;*/
/*border-right: 2px solid #800000;*/
margin-top: 10px;

/*margin-bottom: 10px;*/
}
#menu ul { position: absolute;
left: 20px; top: 0px; bottom: 0px;
font: bold 12px Georgia, "Times New Roman", Times, serif;
list-style: none;
margin: 0; padding: 0;
}

#menu li {
display: inline;
}
#menu li a {
text-align: center;
/*background: #800000;*/
float: left;
display: block;
padding: 2px 20px 2px 20px;
color: #000000;
text-decoration: none;
margin-left:1px;
width: 80px;
}
#menu li a:hover {
color: #006400;
background: #ffffff;
text-decoration: underline;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;

}
#menu li a:active {
color: #006400;
background: #ffffff;
text-decoration: underline;
}


Był bym bardzo wdzięczny za pomoc :)

(tak, to IE uruchomione pod Fedorą 9 :P )Rafał Mazurkiewicz edytował(a) ten post dnia 22.11.08 o godzinie 23:41
Edyta Floras

Edyta Floras Trener on-line /
Konsultant ds.
marketingu

Temat: Dostosowanie CSS dla przeglądarek

dla IE możesz stworzyć osobne pliki css
w każdym z tych plików wpisujesz tylko te elementy formatowania , które mają być inne dla IE

takie komentarze (komentarze warunkowe) - wpisujesz w sekcji head każdej strony

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="style/ie6.css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/ie7.css" />
<![endif]-->
Rafał Mazurkiewicz

Rafał Mazurkiewicz serwisant - Niver
Niwińscy spj.j,
właściciel -
zlabs.pl

Temat: Dostosowanie CSS dla przeglądarek

A jak uzyskać efekt pod IE taki sam jak w Firefoxie ?:>
Julia  Krysztofiak-Szop a

Julia
Krysztofiak-Szop
a
InFlavo /
gryziemy.net

Temat: Dostosowanie CSS dla przeglądarek

afaik, border-radius to parametr z CSS3, więc pod IE nic Ci onnie zdziała. Okrągłe rogi zrobiłabym starą i sprawdzoną metodą babuni:
zrób obrazek białego koła na zielonym o promieniu 20px.

Stwórz klasy rounded-corner oraz upper-left, upper-right, bottom-left, bottom right, definiowane tak:

.rounded-corner
{
display: block;
height: 20px;
width: 20px;
}

.upper-left
{
background: url(obrazek koła) 0px 0px no-repeat;
float: left;
}

.upper-right
{
background: url(obrazek koła) -20px 0px no-repeat;
float: left;
}

.bottom-left
{
background: url(obrazek koła) 0px -20px no-repeat;
float: left;
clear: both;
}

.bottom-right
{
background: url(obrazek koła) -20px -20px no-repeat;
float: right;
clear: both;
}


Pusty div.rounded-corner o stosownej klasie wklejasz w htmlu tam, gdzie chcesz mieć okrągłe rogi, czyli podejrzewam, tuż po div.content i tuż przed zamknięciem div.content.

Modulo reszta elementów strony, działa i pod FF, i pod Operą, i pod Chromem/Safarim, i pod obydwoma IE.

To, że Ci się rozjeżdża content i sajdbar, i jedno opada, to kwestia bugów marginesowych w IE.
Poszukaj buga podwójnego marginesu:
http://dustinbrewer.com/css-fix-for-the-double-margin-...
i pewnie też bug trzypikselowej luki przyda Ci się:
http://positioniseverything.net/explorer/threepxtest.htmlJulia Krysztofiak-Szopa edytował(a) ten post dnia 23.11.08 o godzinie 05:14

konto usunięte

Temat: Dostosowanie CSS dla przeglądarek

Julia Krysztofiak-Szopa:

Pusty div.rounded-corner o stosownej klasie wklejasz w htmlu tam, gdzie chcesz mieć okrągłe rogi, czyli podejrzewam, tuż po div.content i tuż przed zamknięciem div.content.

Co daje nam 4 PUSTE, niepotrzebne divy na każdy kontener z zaokrąglonymi rogami... Nie dość, że daje to w wyniku przerośnięty kod chorujący na "classitis" to jeszcze jest to rozwiązanie niesemantyczne...

Pytanie do Rafała: po kiego grzyba Ci te zaokrąglone rogi, i to jeszcze 20px?? IMHO strona wygląda przez to brzydko...Piotr Lewandowski edytował(a) ten post dnia 23.11.08 o godzinie 14:32
Julia  Krysztofiak-Szop a

Julia
Krysztofiak-Szop
a
InFlavo /
gryziemy.net

Temat: Dostosowanie CSS dla przeglądarek

Piotr Lewandowski:
Co daje nam 4 PUSTE, niepotrzebne divy na każdy kontener z zaokrąglonymi rogami... Nie dość, że daje to w wyniku przerośnięty kod chorujący na "classitis" to jeszcze jest to rozwiązanie niesemantyczne...

Polemizowałabym.

Primo, nie ma lepszego sposobu na okrągłe rogi bez angażowania JS. Chyba, że znasz - wówczas chętnie poznam.

Secundo - bez przesady z tą utratą "semantczności" kodu z powodu wstawienia 4 pustych divów. "Semantyczność" kodu nie polega wcale na tym, że każdy znacznik html musi otaczaś treść rzeczywiście wyświetlaną na stronie.

konto usunięte

Temat: Dostosowanie CSS dla przeglądarek

Julia Krysztofiak-Szopa:
Piotr Lewandowski:
Co daje nam 4 PUSTE, niepotrzebne divy na każdy kontener z zaokrąglonymi rogami... Nie dość, że daje to w wyniku przerośnięty kod chorujący na "classitis" to jeszcze jest to rozwiązanie niesemantyczne...

Polemizowałabym.

Primo, nie ma lepszego sposobu na okrągłe rogi bez angażowania JS. Chyba, że znasz - wówczas chętnie poznam.

Znam: nie używać zaokrągleń w ogóle... JavaScript powinien być wykorzystywany do obsługi zachowania strony, a nie robienia efektów "bling bling"... jak się pomyśli i pokombinuje to można stworzyć design tak, żeby nie korzystać z nadmiarowych znaczników...

Secundo - bez przesady z tą utratą "semantczności" kodu z powodu wstawienia 4 pustych divów. "Semantyczność" kodu nie polega wcale na tym, że każdy znacznik html musi otaczaś treść rzeczywiście wyświetlaną na stronie.

Semantyka kodu HTML to używanie znaczników ZGODNIE z ich przeznaczeniem... Jakie jest sensowne wytłumaczenie PUSTEGO elementu DIV (lub jakiegokolwiek innego) ?? Tworzenie niepotrzebnego nadmiarowego kodu nie jest dobre...
HTML służy do budowania struktury strony, a nie warstwy prezentacyjnej... To, że ludzie używają tego inaczej (4 divy albo JS) nie oznacza, że robią to dobrze...
Paweł Piskorz

Paweł Piskorz koder HTML/CSS

Temat: Dostosowanie CSS dla przeglądarek

Julia Krysztofiak-Szopa:
Piotr Lewandowski:
Co daje nam 4 PUSTE, niepotrzebne divy na każdy kontener z zaokrąglonymi rogami...

Primo, nie ma lepszego sposobu na okrągłe rogi bez angażowania JS. Chyba, że znasz - wówczas chętnie poznam.

Oczywiście że jest, trzeba wykorzystać to co już jest w kodzie. Tyle że autor nie pochwalił się swoim HTML-em więc nie wiemy gdzie można by te rogi upchać. A jeszcze jakby szerokość ustawić na sztywno, to i bez HTML-a da radę.

konto usunięte

Temat: Dostosowanie CSS dla przeglądarek

Paweł Piskorz:
Julia Krysztofiak-Szopa:
Piotr Lewandowski:
Co daje nam 4 PUSTE, niepotrzebne divy na każdy kontener z zaokrąglonymi rogami...

Primo, nie ma lepszego sposobu na okrągłe rogi bez angażowania JS. Chyba, że znasz - wówczas chętnie poznam.

Oczywiście że jest, trzeba wykorzystać to co już jest w kodzie. Tyle że autor nie pochwalił się swoim HTML-em więc nie wiemy gdzie można by te rogi upchać. A jeszcze jakby szerokość ustawić na sztywno, to i bez HTML-a da radę.

Bez HTML w sensie że tylko w CSS, czy chcesz robić stronkę bez HTML w ogóle ? :D

konto usunięte

Temat: Dostosowanie CSS dla przeglądarek

Julia Krysztofiak-Szopa:

Polemizowałabym.

Primo, nie ma lepszego sposobu na okrągłe rogi bez angażowania JS. Chyba, że znasz - wówczas chętnie poznam.

Nie wiem czy lepszy sposób ale na pewno prezentujący brzydszy efekt.
Stosowanie bloków przysłaniających odpowiednie pixele tworząc wrażenie zaokrągleń. Dzięki temu mniej jest gif-ów do pobrania.

IMO semantyczność (X)HTML została dawno pogrzebana ale przerost kodu strony to też niedobre zjawisko zwłaszcza w odniesieniu do DOMu. Ciekawe czy p. Lewandowski stosuje w swoich projektach tagi linków wraz z atrybutem relacji czy ogranicza się do kotwiczek
Paweł Piskorz

Paweł Piskorz koder HTML/CSS

Temat: Dostosowanie CSS dla przeglądarek

Piotr Lewandowski:
Bez HTML w sensie że tylko w CSS, czy chcesz robić stronkę bez HTML w ogóle ? :D

Bez HTML w sensie, że obejdzie się bez oglądania HTML-a od Rafał, sam CSS wystarczy do wydedukowania co i gdzie wstawić.
Julia  Krysztofiak-Szop a

Julia
Krysztofiak-Szop
a
InFlavo /
gryziemy.net

Temat: Dostosowanie CSS dla przeglądarek

Rafał Zabrowarny:
Stosowanie bloków przysłaniających odpowiednie pixele tworząc wrażenie zaokrągleń. Dzięki temu mniej jest gif-ów do pobrania.

W opisanej przez mnie "metodzie babuni" pobierasz tylko jeden obrazek - właśnie do przesłonienia rogów głównego pojemnika. Można mniej?:)

IMO semantyczność (X)HTML została dawno pogrzebana ale przerost kodu strony to też niedobre zjawisko zwłaszcza w odniesieniu do DOMu.

Święte słowa. Wygląd strony vs. semantyczny kod to jest konflikt, który można na wiele sposobów rozwiązać. Na pewno rezygnacja z pomysłu na wygląd strony to nie jest najlepszy sposób.

Podobny przykład - sticky footer, czyli stopka przylegająca do dołu strony. W najelegantszym sposobie potrzeba do tego dwóch dodatkowych divów, w tym jednego pustego. Czy w związku z tym trzeba rezygnować z lepkiej stopki, bo od razu "divosis" i "classitis"?:p Bez przesady.

A Rafał może okragłe rogi dodać też eleganciej, np. pozycjonując zaokrąglone tło pod h1 diva content (jeśli ma gwarancję, że za każdym razem content zaczyna się od h1). Szkoda, że nie zamieścił htmla, można by było bardziej pomóc.

konto usunięte

Temat: Dostosowanie CSS dla przeglądarek

Rafał Zabrowarny:

IMO semantyczność (X)HTML została dawno pogrzebana

hmmm... ciekawa teoria... możesz to rozwinąć... twierdzisz tak, na podstawie tego, że w PL mało kto dba o semantykę kodu (że już o Semantic Web nie wspomnę) ?

ale przerost
kodu strony to też niedobre zjawisko zwłaszcza w odniesieniu do DOMu. Ciekawe czy p. Lewandowski stosuje w swoich projektach tagi linków wraz z atrybutem relacji czy ogranicza się do kotwiczek

rel wykorzystuje rzadko - głównie w metatagach...
Owszem, aktualnie pracuje nad kilkoma projektami zgodnymi z XHTML+RDFa 1.0, gdzie oprócz RDF wykorzystuje również DublinCore i FOAF, ale są to moje własne projekty, które nie są jeszcze gotowe... Dodatkowo myślę o zmianie szablonu swojego bloga, gdzie świadomie będę wykorzystywał również XFN...
Ty twierdzisz, że semantyka została pogrzebana - ja uważam, że sieć dopiero do tego dojrzewa... Standard Semantic Web, wizja Tima Bernersa-Lee, by sieć była zrozumiała nie tylko dla ludzi ale i również dla maszyn, jeszcze nie jest powszechnie wykorzystywany - myślę, że jego zalety zostaną docenione wraz z nadejściem tzw. Web 3.0...Piotr Lewandowski edytował(a) ten post dnia 23.11.08 o godzinie 21:08

konto usunięte

Temat: Dostosowanie CSS dla przeglądarek

Piotr Lewandowski:
Rafał Zabrowarny:

IMO semantyczność (X)HTML została dawno pogrzebana

hmmm... ciekawa teoria... możesz to rozwinąć... twierdzisz tak, na podstawie tego, że w PL mało kto dba o semantykę kodu (że już o Semantic Web nie wspomnę) ?

W ilu stronach używa się tabel w niewłaściwy sposób ?
Czy wg W3C można używać ramek czy też nie ? (Ja już sam nie wiem czy trzymać się XHTML 1 czy 1.1)
Jak należy traktować tag DIV (to też do końca nie zostało doprecyzowane)

Podaj mi przykład portalu (nie pojedynczą stronę) stosujący prawidłowo semantykę HTMLu. Ja osobiście nie znam.

rel wykorzystuje rzadko - głównie w metatagach...
Owszem, aktualnie pracuje nad kilkoma projektami zgodnymi z XHTML+RDFa 1.0, gdzie oprócz RDF wykorzystuje również DublinCore i FOAF, ale są to moje własne projekty, które nie są jeszcze gotowe... Dodatkowo myślę o zmianie szablonu swojego bloga, gdzie świadomie będę wykorzystywał również XFN...

Nie trzymasz się standardów (FOAF, XFN nie stanowi biblioteki W3C) czemu więc nie używasz atrybutów relacji z HTML5 ? Tworzenie stron zgodnych z XHTML ogranicza się często do poprawności składni a jak w twoim przypadku jest ? Czy stosujesz zawsze standardowe DTD czy może starasz się używać rozszerzeń ?
Ty twierdzisz, że semantyka została pogrzebana - ja uważam, że sieć dopiero do tego dojrzewa... Standard Semantic Web, wizja Tima Bernersa-Lee, by sieć była zrozumiała nie tylko dla ludzi ale i również dla maszyn, jeszcze nie jest powszechnie wykorzystywany - myślę, że jego zalety zostaną docenione wraz z nadejściem tzw. Web 3.0...Piotr Lewandowski edytował(a) ten post dnia 23.11.08 o godzinie 21:08

... a może Web 4.0 (poczekamy na Godota)

BTW jeśli chcesz bardziej semantycznej WWW używaj IE i wspieraj M$

konto usunięte

Temat: Dostosowanie CSS dla przeglądarek

Julia Krysztofiak-Szopa:
Rafał Zabrowarny:
Stosowanie bloków przysłaniających odpowiednie pixele tworząc wrażenie zaokrągleń. Dzięki temu mniej jest gif-ów do pobrania.

W opisanej przez mnie "metodzie babuni" pobierasz tylko jeden obrazek - właśnie do przesłonienia rogów głównego pojemnika. Można mniej?:)

http://www.cssplay.co.uk/menus/menueleven.html
Ten przykład pokazuje jak można uzyskać efekt ściętych elementów menu bez potrzeby stosowania zbędnej grafiki. Podobną technikę można zastosować do zaokrąglania rogów

konto usunięte

Temat: Dostosowanie CSS dla przeglądarek

Rafał Zabrowarny:
http://www.cssplay.co.uk/menus/menueleven.html
Ten przykład pokazuje jak można uzyskać efekt ściętych elementów menu bez potrzeby stosowania zbędnej grafiki. Podobną technikę można zastosować do zaokrąglania rogów
<div class="boxx">
<div class="boxx1"/>
<div class="boxx2"/>
<div class="boxx3"/>
<div class="boxx4"/>
<div class="boxx5"/>
<div class="boxx6"/>
<div class="boxx7"/>
<div class="boxx8"/>
</div>

Auć.. toż to makaron zupełny robi z kodu strony.. to już lepiej mieć kanty zamiast odwalać wiochę ;)

konto usunięte

Temat: Dostosowanie CSS dla przeglądarek

Rafał Zabrowarny:
W ilu stronach używa się tabel w niewłaściwy sposób ?

nie wiem, nie dbam o to, czy inni chcą lub potrafią używać poprawnie znaczników... ważna, że kod, który tworzę ja nie ma takich "bajerów" jak layout stron zbudowanych na tabelkach...
Czy wg W3C można używać ramek czy też nie ? (Ja już sam nie wiem czy trzymać się XHTML 1 czy 1.1)
z punktu wiedzenia W3C można (HTML 4, XHTML 1.0 Frameset)... patrząc pod kątem usera, no i oczywiście SEO nie jest to dobre rozwiązanie...
a co mają ramki do XHTML 1 (btw który XHTML 1?) czy 1.1 ??
trzymać się XHTML 1.1?? Zadaj sobie pytanie: jaki jest procentowy udział w rynku przeglądarek interpretujących POPRAWNY kod XHTML 1.1?
Jak należy traktować tag DIV (to też do końca nie zostało doprecyzowane)

czego brak Ci w tym opisie ?
Podaj mi przykład portalu (nie pojedynczą stronę) stosujący prawidłowo semantykę HTMLu. Ja osobiście nie znam.
raz jeszcze: w nosie mam to, że inni o to nie dbają - ich sprawa... to, że ktoś nie przykłada się do jakości tworzonego przez siebie kodu, nie oznacza że i ja muszę tak robić...
Nie trzymasz się standardów (FOAF, XFN nie stanowi biblioteki

czy Twoim zdaniem W3C stanowi jedyną organizację, której standardy trzeba (albo warto) spełniać?? A jeżeli moja strona jest zgodna z XHTML 1.0 Strict i do tego dołożę RDFa (które swoją drogą też są od W3C) i całość zgodna jest z oboma standardami, to znaczy że co, "nie trzymam się standardów" bo tylko HTML/XHTML się liczy, czy jak?
W3C) czemu więc nie używasz atrybutów relacji z HTML5 ?
może dlatego, że nie musze, może dlatego, że HTML 5 nie jest jeszcze wykorzystywane, a może dlatego, że atrybut relacji nie jest nowością w HTML 5 (owszem jest on wykorzystywany w większej ilości znaczników, z tego co pamiętam)??
Tworzenie stron zgodnych z XHTML ogranicza się często do poprawności składni a jak w twoim przypadku jest ? Czy stosujesz zawsze standardowe DTD czy może starasz się używać rozszerzeń ?

dla mnie poprawność syntaktyczna kodu to punkt wyjścia - nie cel... swoją drogą W3C sama nie potrafi sprawdzić swoich specyfikacji, np walidator CSS przepuszcza jako poprawny kod CSS z taką wartością właściwościami DISPLAY, której w ogóle nie ma w specyfikacji CSS 2.1...

nie stosuje "standardowego" DTD (które DTD jest według Ciebie standardowe? bo AFAIK W3C tego nie określa)... korzystam z dobrodziejstw specyfikacji STRICT (i nie ma znaczenia czy będzie to HTML czy XHTML)... w sumie korzystam z XHTMLa, gdyż wymagają tego ode mnie zleceniodawcy/pracodawcy... dziwne, ale tak jest: jakieś zabiegi marketingowe sprawiły, że XHTML jest postrzegany jako lepszy od HTML (chociaż ponad 90% stronek w sieci jest zgodnych z podstawową składnią HTML)... No cóż, marketoidy potrafią zawsze więcej zepsuć jak prawić... ale nadchodzi HTML 5 i wiele rzeczy się zmienić...
Ty twierdzisz, że semantyka została pogrzebana - ja uważam, że sieć dopiero do tego dojrzewa... Standard Semantic Web, wizja Tima Bernersa-Lee, by sieć była zrozumiała nie tylko dla ludzi ale i również dla maszyn, jeszcze nie jest powszechnie wykorzystywany - myślę, że jego zalety zostaną docenione wraz z nadejściem tzw. Web 3.0...

... a może Web 4.0 (poczekamy na Godota)
albo i Web 5.0...

BTW jeśli chcesz bardziej semantycznej WWW używaj IE i wspieraj M$

ależ oczywiście że używam IE - do sprawdzania, czy stronki działają poprawnie... Sugerujesz, że warto olać polskiego rynku: http://www.ranking.pl/index.php?page=Ranks:RanksPage&s... ??Piotr Lewandowski edytował(a) ten post dnia 25.11.08 o godzinie 23:29
Julia  Krysztofiak-Szop a

Julia
Krysztofiak-Szop
a
InFlavo /
gryziemy.net

Temat: Dostosowanie CSS dla przeglądarek

Rafał Zabrowarny:
Ten przykład pokazuje jak można uzyskać efekt ściętych elementów menu bez potrzeby stosowania zbędnej grafiki. Podobną technikę można zastosować do zaokrąglania rogów

Ała... To już wolę obciązyć juzera tym jednym małym gifkiem 10 na 10 i jednym dodatkowym requestem http... Kto co woli:)

konto usunięte

Temat: Dostosowanie CSS dla przeglądarek

Krzysztof Kawa:

Auć.. toż to makaron zupełny robi z kodu strony.. to już lepiej mieć kanty zamiast odwalać wiochę ;)


Zależy dla kogo co jest "wiochą"; ta technika jest popularna a podejście typu dodać kolejnego GIF-a to pamiątka z czasów masowego stosowania tabel na stronach

Ten tzw makaron jest akurat w tym przypadku szybszy do renderowania dla przeglądarki niż stosowanie grafiki a dla serwera WWW to kilka requestów mniej.

konto usunięte

Temat: Dostosowanie CSS dla przeglądarek

Julia Krysztofiak-Szopa:
Ała... To już wolę obciązyć juzera tym jednym małym gifkiem 10 na 10 i jednym dodatkowym requestem http... Kto co woli:)

Masz rację; sam też stosuje naprzemiennie obie techniki.
Warto wiedzieć, że jednak są alternatywy



Wyślij zaproszenie do