[HTML] Problem z podświetlaniem divów.

Mam na stronce coś w rodzaju podświetlania divów:

<div class="kl"><a class="menu" href="index.php">Home</a></div>

Dokładniej, przedstawiony powyżej div po najechaniu na niego powienien zmieniać kolor. I rzeczywiście tak jest ale np. pod firefoxem. Pod IE nie. klasa kl:
div.kl:hover{ background-color:rgb(37,165,46) }
Definicji bez hover chyba nie potrzeba bo klasa nie musi sie niczym wyróżniać gdy nie ma nad nią kursora. Czy ktoś wie jak napisać ten kod, aby wyświetlał się poprawnie pod tą niezwykle umilającą życie, ale wciąż najpopularniejszą przeglądarką?

Mam jeszcze jedno pytanie dotyczące IE:
dlaczego niektóre obrazki pod IE mają zupełnie inne kolory (png). PNG z przezroczystością w IE wyświetla się z tłem rgb(212,230,234).

IE domyslnie nie obsluguje PNG z przezroczystowscia, poszukaj na Google jak to obejsc
a co do DIV'a z hover to super przegladarka IE obsluguje pseudklasy hover itp tylko z , jedyne wyjscie to uzyc JS i podmieniac klasy na onmouseover i onmouseout

Podmieniłem już ten hover i działa dobrze, tylko wciąż mam problem z png. Znalazłem tylko artykuły o opacity a tu chyba nie o to chodzi. Nie męczyłbym się z przezroczystością gdyby nie to, że IE w ogóle źle obsługuje png i nie umie wyświetlić kolorów takich jakie są.

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

W końcu zrezygnowałem i postanowiłem zrobić najprościej: w php sprawdzam czy kod jest wyświetlany pod IE i jeśli tak, to po prostu nie wyświetla tego co jest źle obsługiwane. Strona robi się trochę łysa ale nie mam ochoty męczyć się z tym wytworem geniuszu programistów M$.

Pocieszę zatem faktem, że pod Internet Explorerem 7 działa pseudoklasa :hover wszędzie, a przezroczyste PNG chyba też (przynajmniej te, co i ile pamiętam nie działały pod IE 6 - znaczy miały takie dziwne tło).

Powiem tak: IE jest przestarzałe, mało tego: nawet nie wydane jeszcze IE 7 nie potrafi prawidłowo wyświetlić niektórych stronek (coby daleko nie szukać, mojego Joga). Jeśli masz taką możliwość, to zawsze można zrobić tak jak ja: Pod IE wyświetlić pasek informacyjny z browsehappy.pl, oraz wyłączyć styl. U mnie działa. Oczywiście wszystko pięknie, jeśli strona jest semantycznie napisana i jest czytelna bez styli. Jeśli nie, to jest problem.

Można też zrobić osobny (okrojony) arkusz CSS dla IE. Np. nie chciało mi działać fixed, to je wyrzuciełem pod IE :D

ja to robię zwykle tak, że definiuję wszystkie cztery zachowania (chociaż nie udało mi się czystym cssem osiągnąć a:active pod IE)

a.klasa:link {blablabla;}
a.klasa:visited {blablabla;}
a.klasa:active {blablabla;}
a.klasa:hover {background: kiślowaty;}

i wtedy działa dobrze wszędzie

natomiast Ty zakodowałeś diva jako hover - ja bym tak nie mieszał z klasyfikacją.....

(U E.Meyera było że należy kodować klasy hiperłączy)

jeśli link ma doświetlać obrazek png, to nie ma przebacz - explorer tego nie zrobi, bo tak jak mówiono już przede mną powyżej nie potrafi obłsługiwać poprawnie.

aha, fixed powinno działać pod IE, jesli nie pominie się cudzysłowów przy

body {background: url('plik.gif') 0 0 no-repeat fixed;}

E, Herodot, czytaj dokładnie. Nie chodzi o a:hover w IE, bo to działa. A że trzeba stosować je zgodnie z zasadą LoVe - HA! to już inna sprawa. Tu chodziło o to, aby pseudoklasę :hover przypisać do diva:

div:hover { background-color: #fff; }

i to, normalnie, nie działa w IE poniżej wersji 7.0 beta 1.

A można to robić bez problemu, standard CSS przewiduje :hover dla każdego elementu.

No fakt, mój błąd.

Rzeczywiście ciekawe zastosowanie.

Ale czy cel rzeczywiście jest wart kombinowania?

Przynajmniej pytanie kolegi można było rozstrzygnąć inaczej.

Chcemy osiągnąć efekt hover dla innych elementów niź hiperłącza, czy zmienjszyć sobie ilość roboty kodując cały blok hiperłączy jednym znacznikiem?

Zastosowanie choć raczej mało spotykane było dość powszechne: podświetlane pozycje menu. Po prostu chciałem zrobić wszystko bez JSa no i wszystko działało dopóki nie odpaliłem tego w IE i moim oczom ukazała się rozjechana kupa kolorowych obiektów. Oczywiście po sprawdzeniu W3C validatorem CSSa i HTMLa wszystko jest w porządku.
Teraz mam kolejny problem. Nie wiem jak to obejść w IE (pod tym dziadostwem wszystko trzeba obchodzić bo nic nie działa). Mam diva o pozycji ustalonej absolute względem początku strony (nie znajduje się w niczym poza body). W nim jest div o ustalonych marginesach po 20px z każdej strony. Wewnątrz tego ostatniego diva jest tabela i jej szerokość mam ustawioną na 100%. W FF i innych normalnych przegl. tabela zajmuje 100% szerokości diva, w którym się znajduje. W IE zajmuje 100% szerokości diva o pozycji absolute, czyli nie tego w którym bezpośrednio się znajduje. W obu przeglądarkach marginesy są zachowane. Jak zrobić by tabelka zajmowała pod IE 100% diva wewnętrznego?

Dobrze by było gdybyś wstawił najważniejsze elementy kodu.

Jedyne co mi na razie przychodzi do głowy, to to, że IE jak to on zrozumiał z jakiegoś powodu, iż tabela ma być również jako absolotue a nie relative. Skądinąd ciekawe jest czemu nie zrozumiał tak FF.

Ja bym wstawił do najbardziej wewnętrznego diva zwykły tekst i zobaczył, czy jest to problem diva czy tabeli, jako że ta ostatnia jest dość wysoko w hierarchi obiektów i może ją IE uważać za godną wypozycjonowania absolutnego.

Jesli tekst jest dobrze, to właśnie chodzi o to.

Jeśli jest źle to błąd samego diva.

No i spróbował zakodować div znacznikiem relative.</wiki>

Sięgnąwszy do literatury muszę jednak zmodyfikować swoją odpowiedź, pozycjonowanie wygląda mniej więcej tak:

relative - jest to w praktyce znacznik wykorzystywany do definiowania bloku pozycjonującego.

Cytat: "Element może być pozycjonowany relatywnie względem położenia, kóreby zajmował, gdyby miał ustaloną pozycję static. Innymi słowy pozycjonowanie (top, left) ustawione na (50, -30) umieściłoby dany element 50px pod i 30px w lewo względem domyślnego, określonego przez przeglądarkę położenia)

static - cyt: "Element wyświetlany zgodnie z noramlym układem strony. Właściwości: bottom, left, right, top nie spowodują przemieszczenia elementu."

Jest on wartością domyślną

absolute - "Element może być dokładnie pozycjonowany w obrębie kontekstu, w ktorym się znajduje. Pozycjonowanie top, leftustawione na (0,0) spowoduje, ze lelement zostanie umieszczony w lewym górnym rogu sekcji body lub elementu rodzica, którego właściwość position została ustawiona na wartość inną niż static

Absolutnie pozycjonowane elementy nie zajmują żadnego miejsca w normalnym układzie strony."

fixed - "Ustawienie pozwala, podobnie jak przy wartości absolute, na pozycjonowanie danego elementu, jednak w momencie przewijania strony element nie będzie poruszać się z resztą zawartości na stronie, lecz pozostanie na swoim miejscu"

Wynika stąd, że:

• trzeba zdefiniować sobie relative, żeby nie mieć domyślnie static
• każdy absolute jest blokiem pozycjonującym o ile nie pozycjonuje czegoś, co ma przypisaną wartość static albo nie ma przypisanej żadnej wartości, co wynika z tekstu lektury
• wartość absolute odtyczy każdego elementu innego niż static w obrębie jego własnego bloku obejmującego (na zasadzie, bliższa koszula ciału)

Jeśli chodzi o Twój problem, ja bym zrobił tak:

uznał body albo div za relative

reszte - wszystkie divy i tabelę - zakodował jako absolute i powinno działać :)

Powodzenia!

Cytaty z: Utopia html - projektowanie w CSS bez uzycia table, Helion

Nie jestem tego pewien ale chyba mój problem nie został dobrze zrozumiany. Aby go przestawić dokładniej, za namową przestawiam fragment kodu:

<div class="glowna">
<div style="position:relative; top:0px; left:0px; margin-right:20px; margin-left:20px; margin-top:20px;font-family:verdana; text-align:justify; font-size:10pt;">
  <table style="background-color:rgb(70,123,40); color:white; height:20px; width:100%; font-size:10pt; font-family:verdana;"><tr>
  <td style="text-align:left;">Autor</td>
  <td style="text-align:center; ">Temat</td>
  <td style="text-align:right">Data</td></tr></table>
  <div style="background-color:white; border-width:2px; border-style:solid; border-color:rgb(70,123,40);">
  <div style="background-color:white;">&nbsp</div>
  <div style="margin-left:30px; margin-right:30px;">Tresc</div>
  <div style="background-color:white;">&nbsp</div></div><br/>
</div>
</div>

Klasa "glowna":

div.glowna { background-color:rgb(211,211,211); z-index:1; border-style:solid; border-width:4px; position:absolute; top:100px; left:130px; right:0px; }

Problem dotyczy tylko i wyłącznie szerokości tabeli. Nie chodzi o jej pozycję. Jakiego position by nie miała to i tak będzie we wnętrzu diva i skoro ma width 100% to powinna zajmować 100% elementu, w którym się znajduje. Ustawienie pozycji na absolute nic nie zmienia, tylko pogarsza sprawę. Nie znam dokładnych pozycji tabeli bo to jest fragment kodu php i na stronie jest kilka takich tabel wyświetlanych jedna pod drugą. Jakoś mi się wydaje, że Firefox i inne przeglądarki radzą sobie z tym tak jak trzeba, a IE ma błędy.

Sprawdziłem: źle wyświetla się tylko tabela. Gdy ją usunę, div pod nią zajmuje tak jak powinien 100% szerokości.

//Edit:
Zauważyłem dość ciekawą rzecz: postanowiłem zmienić DTD na HTML Strict. Wszystko dobrze, usunąłem błędy, validator zatwierdził poprawność, FF wyświetla wszystko jak trzeba, a IE oczywiście nie. Nawet gdy usunąłem tabele i zastąpiłem divami, które jakoś IE potrafi obsłużyć, wszystko się rozjeżdżało - tak jak poprzednio opisywałem z tabelami. Gdy zmieniłem na transitional IE potrafi już wszystko rozmieścić tak jak powinien. Mam więc ustawione, że dla IE wypisuje transitional, a dla innych strict. Swoją drogą, ciekawe jak długo trzeba będzie jeszcze robić dwie wersje stron - dla obsługujących standardy i IE.

Mam więc ustawione, że dla IE wypisuje transitional, a dla innych strict. Swoją drogą, ciekawe jak długo trzeba będzie jeszcze robić dwie wersje stron - dla obsługujących standardy i IE.

A nie możesz dla wszystkich robić Transitional? I mieć z głowy detekcję przeglądarki (co jest - dodajmy - ekstremalnie głupie).

Ja myślę, że będziemy się męczyć ze stronami tak długo, aż każda przeglądarka będzie identycznie rozumiała polecenia CSS. A kiedy to nadejdzie? Prawdopodobnie nigdy ;)

Opera też ma swoje dziwactwa, IE ma swoje dziwactwa, Mozille też mają swoje dziwactwa!

Na razie bardzo liczę na IE 7 beta 2 w sprawach poprawniejszego renderowania CSS, jeszcze dostępu do niego nie mam, więc wciąż mogę mieć nadzieję :)

umc umc umc baby :) http://www.xs4all.nl/~peterned/csshover.html