Forum PHP.pl > [CSS]Problem z menu po Firefoxem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Problem z menu po Firefoxem

romarta

9.07.2009, 07:56:26

Zrobiłam sobie proste menu obrazkowe i problem jest taki że w Firefoxie i Chromie mi nie wyświetla sie a po IE działa idealnie.
Menu zrobione jest z wykorzystaniem css, ponieważ po najechaniu na daną kategorię ma się ona podświetlić a po kliknięciu na nią zmienić. I nie wiem w czym jest problem.
Oto kod menu:

[HTML] pobierz, plaintext 
<tr>
        <td>
           <div class="mix_06"><a href="firma.html"> <!--    <img src="images/metal_mix_06.jpg" width="199" height="62" border="0" alt="">--></a></div></td>
        <td>
          <div class="mix_07"><a href="katalog.html"> <!--<img src="images/metal_mix_07.jpg" border="0" width="201" height="62" alt="">--></a></div></td>
        <td colspan="3">
                 <div class="mix_08"><a href="kontakt.php"> <!--    <img src="images/metal_mix_08.jpg" width="201" height="62" border="0" alt="">--></a></div></td>
        <td>
             <img src="images/metal_mix_09.jpg" width="14" height="62" alt=""></td>
    </tr>
[HTML] pobierz, plaintext

a to formatowanie w CSS:

Kod

.mix_06 a:link{
background-image:url(images/metal_mix_06.jpg);
height:62px;
width:199px;
}
.mix_06 a:visited{
background-image:url(images/metal_mix_06.jpg);
height:62px;
width:199px;
}
.mix_06 a:hover{
background-image:url(images/metal_mix_06a.jpg);
height:62px;
border:none;
}
.mix_06 a:active{
background-image:url(images/metal_mix_06a.jpg);
height:62px;
width:199px;
border:none;
}
.mix_07 a:link{
background-image:url(images/metal_mix_07.jpg);
height:62px;
width:201px;
}
.mix_07 a:visited{
background-image:url(images/metal_mix_07.jpg);
height:62px;
width:201px;
}
.mix_07 a:hover{
background-image:url(images/metal_mix_07a.jpg);
height:62px;
width:201px;
}
.mix_07 a:active{
background-image:url(images/metal_mix_07a.jpg);
height:62px;
width:201px;
}
.mix_08 a:link{
background-image:url(images/metal_mix_08.jpg);
height:62px;
width:201px;
}
.mix_08 a:visited{
background-image:url(images/metal_mix_08.jpg);
height:62px;
width:201px;
}
.mix_08 a:hover{
background-image:url(images/metal_mix_08a.jpg);
height:62px;
width:201px;
}
.mix_08 a:active{
background-image:url(images/metal_mix_08a.jpg);
height:62px;
width:201px;
}

muniekw

9.07.2009, 08:22:47

A czemu jak masz np

Kod

to umieszczasz to w komentarzu??

Darti

9.07.2009, 08:25:14

a określiłas szerokość tabelki, w której całe menu sie znajduje ?

romarta

9.07.2009, 08:42:24

na poczatku to menu było za pomoca tabelki i ten obrazek co jest w komentarzu to jest to co ma być w menu, ale potem się koncepcja zmieniła że ma się ten obrazek zmieniać jak sie na jedzie na menu i po klikniecu w daną kategorię, więc zrobiłam to css a tamto sobie dałam w komentarz tymczasowo jak mi będzie już wszytko działać to wykasuje.
bo to menu to tylko obrazek bez tekstu pisanego. Jeżeli bym zostawiła ten obrazek w tej tabeli to wtedy by mi podmiana nie działa

określiłam szerokości

pawelpaciorek

9.07.2009, 10:10:52

wydaje mi się, że zanim określisz szerokość, wysokość i background dla znacznika <a> to musisz mu najpierw ustawić

Kod

display: block

l0ud

9.07.2009, 10:17:17

Cytat

wydaje mi się, że zanim określisz szerokość, wysokość i background dla znacznika <a> to musisz mu najpierw ustawić

Dodam jeszcze, że jeżeli w IE wyświetla się poprawnie, prawdopodobnie nie ustawiłeś poprawnego doctype. Ustaw takie, aby nie przełączać przeglądarki w quirks mode

romarta

9.07.2009, 10:38:25

mam takie ustwienie: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ?

l0ud

9.07.2009, 10:57:48

Zmień na to:

Kod

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

I zastosuj się do rady kolegi

romarta

9.07.2009, 11:40:13

zmieniłam !DOCTYPE i teraz wogóle nie działa, a gdzi eten dispaly mam dokładnie dodać?

zadziałało, troche mi się strona rozjechała ale działa

dzięki

pawelpaciorek

9.07.2009, 11:44:58

Kod

.mix_06 a {
display: block;
background-image:url(images/metal_mix_06.jpg);
height:62px;
width:199px;
float: left; //jesli menu ma być w układzie poziomym
}

.mix_06 a:hover {
display: block;
background-image:url(images/metal_mix_06a.jpg);
height:62px;
width:199px;
float: left; //jesli menu ma być w układzie poziomym
}

viking

9.07.2009, 11:50:36

Jeśli już to:

Kod

.mix_06 a {
background-image:url(images/metal_mix_06.jpg);
height:62px;
width:199px;
float: left; //float wymusza display: block
}

.mix_06 a:hover,
.mix_06 a:focus {
background-image:url(images/metal_mix_06a.jpg);
}

Dbamy o transfer użytkownika.

edit: A swoją drogą to czemu nie zrobić tego porządnie na ul li a (w html5 jeśliby korzystać jest element nav) tylko divy wewnątrz tabel?

romarta

9.07.2009, 13:51:02

Bardzo dziękuję wszystkim za pomoc. Teraz strona jest ok.
Co do tych tabel, niestety taki otrzymałam szablon

i miałam go skończyć. Gdybym robiła to od podstaw sama zrobiłabym inaczej ale cóż.

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.