Problemy z CSS w Operze i Firefoksie.

[Loocas]

Witam, mam stronę w Internecie, a na niej menu zrobione w CSS.

Ono nie działa w innych przeglądarkach niż Internet Explorer. W Operze i Firefoksie wychodzą jakieś dziwadła - oczywiście w każdej z tych przeglądarek inne...

Poniżej zamieszczam kod tego menu, a jeśli ktoś sobie życzy, to zapraszam na stronkę i obejrzy to "na żywo".

<style type= "text/css">
A.klawisz {
border: 1px solid black;
font: bold 12pt Arial;
text-align: center;
text-decoration: none;
color: #000000;
padding: 4px;
width: 130px;
height: 29px;
background: url(../menu/menu1.jpg);
}
A.klawisz:HOVER {
background: url(../menu/menu1a.jpg);
}

A.klawisz2 {
border: 1px solid black;
font: bold 12pt Arial;
text-align: center;
text-decoration: none;
color: #000000;
padding: 4px;
width: 130px;
height: 29px;
background: url(../menu/menu2.jpg);
}
A.klawisz2:HOVER {
background: url(../menu/menu2a.jpg);
}

A.klawisz3 {
border: 1px solid black;
font: bold 12pt Arial;
text-align: center;
text-decoration: none;
color: #000000;
padding: 4px;
width: 130px;
height: 29px;
background: url(../menu/menu3.jpg);
}
A.klawisz3:HOVER {
background: url(../menu/menu3a.jpg) ;
}

A.klawisz4 {
border: 1px solid black;
font: bold 12pt Arial;
text-align: center;
text-decoration: none;
color: #000000;
padding: 4px;
width: 130px;
height: 29px;
background: url(../menu/menu4.jpg);
}
A.klawisz4:HOVER {
background: url(../menu/menu4a.jpg);
}

A.klawisz5 {
border: 1px solid black;
font: bold 12pt Arial;
text-align: center;
text-decoration: none;
color: #000000;
padding: 4px;
width: 130px;
height: 29px;
background: url(../menu/menu5.jpg);
}
A.klawisz5:HOVER {
background: url(../menu/menu5a.jpg);
}

A.klawisz6 {
border: 1px solid black;
font: bold 12pt Arial;
text-align: center;
text-decoration: none;
color: #000000;
padding: 4px;
width: 130px;
height: 29px;
background: url(../menu/menu6.jpg);
}
A.klawisz6:HOVER {
background: url(../menu/menu6a.jpg);
}
A.klawisz7 {
border: 1px solid black;
font: bold 12pt Arial;
text-align: center;
text-decoration: none;
color: #000000;
padding: 4px;
width: 130px;
height: 29px;
background: url(../menu/menu7.jpg);
}
A.klawisz7:HOVER {
background: url(../menu/menu7a.jpg);
}
A.klawisz8 {
border: 1px solid black;
font: bold 12pt Arial;
text-align: center;
text-decoration: none;
color: #000000;
padding: 4px;
width: 130px;
height: 29px;
background: url(../menu/menu8.jpg);
}
A.klawisz8:HOVER {
background: url(../menu/menu8a.jpg);
}
A.klawisz9 {
border: 1px solid black;
font: bold 12pt Arial;
text-align: center;
text-decoration: none;
color: #000000;
padding: 4px;
width: 130px;
height: 29px;
background: url(../menu/menu9.jpg);
}
A.klawisz9:HOVER {
background: url(../menu/menu9a.jpg);
}
</style>

<a href="breakdance.html" class="klawisz" title="Opis i zdjęcia mojego amatorskiego tańca"><p>Break Dance</a><br>

<a href="ciekawostki.html" class="klawisz2" title="Zwięzłe, interesuj±ce informacje"><p>Ciekawostki</a><br>

<a href="ksiega.html" class="klawisz3" title="W tym miejscu możesz przedstawić swoj± opinię o stronie"><p>Księga Go¶ci</a><br>

<a href="download.html" class="klawisz4" title="Czasem ¶mieszne, czasem przydatne bzdurki ;-D"><p>Download</a><br>

<a href="sentencje.html" class="klawisz5" title="Sławne sentencje i cytaty"><p>Sentencje</a><br>

<a href="felietony.html" class="klawisz6" title="Dłuższe wypowiedzi na konkretny temat"><p>Felietony</a><br>

<a href="wiersze.html" class="klawisz7" title="Utwory młodych, nieznanych poetów..."><p>Wiersze</a><br>

<a href="humor.html" class="klawisz8" title="Klikaj czym prędzej, ponuraku "><p>Humor</a><br>

<a href="linki.html" class="klawisz9" title="Odno¶niki do interesuj±cych stron w Internecie"><p>Linki</a><br>

Pytanie - co zrobić, żeby menu wyglądało dobrze w Operze, Firefoksie i oczywiście w Internet Explorerze?

[iro]

Spróbuj może zamknąć znacznik <p>, bo tego nie robisz jak widzę. Możliwe, że to powoduje ten efekt.

[yhmt]

Sprawdziłem, to przez <p>. Można je z menu spokojnie wyrzucić, ewentualnie pozamykać.

[Stig]

Ja mimo wszystko radzę przejść na elementy list (ul i li) i dla nich zastosować odpowiednie style. BTW, zauważyłeś, że w Twoim kodzie CSS jest wiele niepotrzebnych, powatarzających się treści. Warto byłoby to uporządkować.

mam stronę w Internecie, a na niej menu zrobione w CSS.

W woli ścisłości: menu nie jest zrobione w CSS, tylko przy pomocy CSS.

[Loocas]

[quote="Stig"]BTW, zauważyłeś, że w Twoim kodzie CSS jest wiele niepotrzebnych, powatarzających się treści. Warto byłoby to uporządkować.

Moje pytanie: jakich "wiele niepotrzebnych, powtarzających się treści"?
To, że znaczniki <p> i </p> przy tytułach działów menu są niepotrzebne, to racja. Najpierw je pozamykałem, a gdy to nic nie dało, to usunąłem całkowicie. Niestety nie mam w tej chwili pod ręką ani Opery, ani Firefoksa, więc nie wiem, czy przyniosło to jakikolwiek skutek.
Powiem jednak szczerze, że wątpię, gdyż owo menu wyświetlane w obu powyższych przeglądarkach w ogóle się nie pojawia (ilustracje, czyli pliki menu[numer].jpg), a jedynie czarny tekst, który i tak na czarnym tle (bo skoro nie ma ilustracji, to jest kolor czarny), to go nie widać...
Muszę też dodać, że kod menu CSS przepisałem toćka w toćkę z biblioteczki Kopmuter Świata o stronach internetowych...