Problem z CSS w Firefoksie.

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
Loocas
Posty: 13
Rejestracja: czw lip 07, 2005 3:52 pm

Problem z CSS w Firefoksie.

Post autor: Loocas »

Witam,
mam na swojej stronce menu zrobione przy pomocy CSS i działa ono bez problemu w Internet Explorerze oraz Operze, ale w Firefoksie jest następujący problem:
Każdy przycisk menu jest niejako "rozciągnięty" o kilka pikseli i te "nadprogramowe" piksele są wypełnione obrazkiem chyba wedle wartości background-repeat:repeat.
Pewnie ktoś powie: "no, to, gościu, zrób background-repeat:no-repeat i gra muzyka".
Niby w porządku, ale zostaną usunięte tylko te powtarzające się obrazki, ale w ich miejsce pojawi się np. czarne tło i będzie to wyglądało jak przerwy między kolejnymi przyciskami menu.
Chodzi mi o to, by tych niepotrzebnych kilku pikseli w ogóle nie było i żeby menu było wyświetlane jak w Operze czy IE.
Jeżeli ktoś ma dwie przeglądarki (IE i Firefox albo Opera i Firefox), to proszę, by sobie obejrzał witrynę na obu przeglądarkach i zobaczył tę różnicę.
Jak będziecie mieli pomysł, jak problem rozwiązać, to piszcie. :wink:
PS. W tym dziale mam jeszcze jeden temat poniżej "www.loocas.za.pl - problemy z CSS w Operze i Firefoksie.", ale jest już on nieaktualny, a ja nie mogę (nie potrafię?) go usunąć. :-D
Pozdrawiam i czekam na sugestie.
Aha, jak ktoś wejdzie na stronkę, to proszę nie przerazić się wyglądem, ale skupić bardziej na treści, jeśli już. :-)
Ostatnio zmieniony pt cze 27, 2008 3:55 pm przez Loocas, łącznie zmieniany 1 raz.
Łysy
Posty: 11
Rejestracja: ndz sty 23, 2005 10:39 pm

Re: Problem z CSS w Firefoksie.

Post autor: Łysy »

do kazdego <A /> od menu ktore jest zdefiniowane w CSS dodaj "display:block;" a w razie czego podaj jeszcze wysokosc gdyby samej display nie poskutkowalo
Loocas
Posty: 13
Rejestracja: czw lip 07, 2005 3:52 pm

Re: Problem z CSS w Firefoksie.

Post autor: Loocas »

Witam,
to kod CSS menu:

.menu a{
display: block;
border: 1px solid black;
font: bold 12pt Arial;
text-align: center;
text-decoration: none;
color: #000000;
padding: 4px;
width: 130px;
height: 29px;
display:block;
}
.klawisz1{background-image: url(../menu/menu1.jpg);}
.klawisz1:hover{background-image: url(../menu/menu1a.jpg);}
.klawisz2{background-image: url(../menu/menu2.jpg);}
.klawisz2:hover{background-image: url(../menu/menu2a.jpg);}
.klawisz3{background-image: url(../menu/menu3.jpg);}
.klawisz3:hover{background-image: url(../menu/menu3a.jpg);}
.klawisz4{background-image: url(../menu/menu4.jpg);}
.klawisz4:hover{background-image: url(../menu/menu4a.jpg);}
.klawisz5{background-image: url(../menu/menu5.jpg);}
.klawisz5:hover{background-image: url(../menu/menu5a.jpg);}
.klawisz6{background-image: url(../menu/menu6.jpg);}
.klawisz6:hover{background-image: url(../menu/menu6a.jpg);}
.klawisz7{background-image: url(../menu/menu7.jpg);}
.klawisz7:hover{background-image: url(../menu/menu7a.jpg);}
.klawisz8{background-image: url(../menu/menu8.jpg);}
.klawisz8:hover{background-image: url(../menu/menu8a.jpg);}
.klawisz9{background-image: url(../menu/menu9.jpg);}
.klawisz9:hover{background-image: url(../menu/menu9a.jpg);}

Jak widać, dodałem "display:block;", ale nic to nie dało, a wysokość (height: 29px;) to już przecież była zdefiniowana...
Chyba że o inną wysokość chodziło, ale się nie zrozumieliśmy. ;-D
Co więc teraz robić?
Łysy
Posty: 11
Rejestracja: ndz sty 23, 2005 10:39 pm

Re: Problem z CSS w Firefoksie.

Post autor: Łysy »

Dosc dziwna sytuacja :? w CSS powtarza Ci sie diaply: block; byc moze to wprowadza male zamieszanie? I padding ustawiony na 4px moze go usun i wysrodkuj w pionie tekst?
viraptor
Zaczyna działać
Zaczyna działać
Posty: 633
Rejestracja: pn cze 28, 2004 12:58 pm
Kontakt:

Re: Problem z CSS w Firefoksie.

Post autor: viraptor »

Problemem tu jest padding. Ustawiasz rozmiar 130/29, a potem dodajesz jeszcze padding po 4px. Razem daje to 130+2*4=138px szerokości i 29+2*4=37px wysokości. Usuń padding i będzie oki. No i dodatkowy odstęp daje border - nie wiem, czy chciałeś go tam, czy nie...
Loocas
Posty: 13
Rejestracja: czw lip 07, 2005 3:52 pm

Re: Problem z CSS w Firefoksie.

Post autor: Loocas »

Dzięki wielkie za pomoc! No, teraz stronka jest poprawnie wyświetlana we wszystkich przeglądarkach... A ja z tym tyle czasu walczyłem. ;-D
Usunąłem "padding" i przy okazji "display:block;", bo mi właściwie nic nie daje, a teraz chyba ostatnie... choć może trywialne pytanie...
Którym elementem zrobić wyśrodkowanie w pionie? :>
Trochę się może pytam z lenistwa, ale w przeciwnym razie bym musiał cały poradnik CSS przekopać w poszukiwaniu tego elementu. Jeśli ktoś wie, (a na pewno wie ;) ), to proszę napisać...
Pozdrawiam!
Łysy
Posty: 11
Rejestracja: ndz sty 23, 2005 10:39 pm

Re: Problem z CSS w Firefoksie.

Post autor: Łysy »

vertical-align: middle; - w css
lub
valign="middle" - w html
Loocas
Posty: 13
Rejestracja: czw lip 07, 2005 3:52 pm

Re: Problem z CSS w Firefoksie.

Post autor: Loocas »

Witam,
wiem, że "vertical-align: middle;" powinno działać, ale... nie działa.
Dodałem do pliku z menu, wysłałem na serwer i... nic.
Nie chcę robić już tego w HTML-u, ale co może być z tym CSS-em?
ODPOWIEDZ