centrowanie w elemencie blokowym <div>

Witam,

mam problem dotyczący interpretacji stylów CSS przez przeglądarki Internet Explorer i Mozilla/Opera. Podczas tworzenia strony WWW umyśliłem sobie, że menu utworze jako elementy blokowe <div>. W każdym z tak utworzonych „divów” chciałem umieścić wyśrodkowany tekst będący nazwą działu i poddziału. Wyszło to mniej więcej tak:

wersja dla Mozilli/Opery wersja dla Internet Explorer

Jak widać rozwiązałem problem poprzez utworzenie dwóch stron WWW (w zasadzie cały kod stron jest taki sam oprócz dwóch różnych formatowań elementów <div> tak by poprawnie się wyświetlały w tych przeglądarkach), wystarczy jednak, że ktoś wersję dla Mozilli otworzy Explorerem i już jest nie fajnie. Dlatego chciałbym mieć jeden uniwersalny plik .CSS, który zdeterminowałby poprawne wyświetlanie strony w każdej z tych przeglądarek. Czy ktoś mógłby mi pomóc?

Poniżej zamieszczam fragment pliku .CSS ze „spornym” fragmentem:

wersja dla Mozilli/Opery – dwa pierwsze pola „lewego” menu (Aktualności i O mnie)

#left_menu_c1{
position: absolute;
padding-top:13px;
padding-bottom:0px;
height: 37px;
width: 120px;
top:1px;
right:0;
left: 1px;
margin: 0px ;
}

#left_menu_c2{
position: absolute;
padding-top:13px;
padding-bottom:0px;
height: 37px;
width: 120px;
top:52px;
right:0;
left: 1px;
margin: 0 ;
}

wersja dla Internet Explorer – dwa pierwsze pola „lewego” menu (Aktualności i O mnie)

#left_menu_c1{
position: absolute;
padding:13 0 px; 
width: 120px;
height: 50px;
top:1px;
right:0;
left: 1px;
margin: 0px ;
}

#left_menu_c2{
position: absolute;
padding:14 0 12 0px;
width: 120px;
height: 50px;
top:52px;
right:0;
left: 1px;
margin: 0 ;
}

Domyślnie chciałbym, aby każde pole menu miało 120px szerokości i 50px wysokości. Łatwo zauważyć, że w wersji dla Mozilli musiałem zmniejszyć wysokość bloku do 37px, bo instrukcja padding-top powoduje jego powiększenie o 13px równocześnie odpowiednio „centrując” napis. Próbowałem używać instrukcji !important i czegoś w rodzaju vertical-align:center, ale nie chciało działać. Wiem, że można by umieścić menu w tabeli, ale nie chcę tak zrobić, poza tym chciałbym się czegoś nauczyć na tym problemie.

Gdyby ktoś wiedział jak zmodyfikować te fragmenty tak, aby stronka się dobrze wyświetlała niezależnie od rodzaju przeglądarki, to byłbym wdzięczny za pomoc.

A próbowałeś takiego rozwiązania?: Javascriptem sprawdzić jaka przeglądarka i wtedy załadować jeden z css'ów. Utwórz np. plik ie.css i opera.css, o odpowiedniej zawartości. Javascriptem sprawdź jaka przeglądarka:

var nazwaprzegladarki = navigator.appName;

i teraz jesli nazwaprzegladarki inna niz IE to laduj IE.css, inaczej laduj Opera.css. Mam nadzieję, że choć trochę pomogłem:)

Dobrze kombinowałeś z vertical-align! Ale wpisz nie center tylko middle i powinno działać! :D

niestety vertical-align:middle nie działa.

JavaScript w tej postaci tez mi nie pomoże bo choć faktycznie mogę rozpoznać przeglądarkę to jednak nie do końca. Otóż IE skrypt widzi jako IE (czyli dobrze), jednak Mozille jako Netscape (też by uszło jeszcze), ale Opere również widzi jako IE (a to już mnie nie satysfakcjonuje).

Chętnie wysłucham kolejnych rad. pozdrawiam!

Istnieje coś takiego jak komentarze warunkowe. Kod postaci

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css_tylko_dla_ie_6" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" type="text/css" href="css_tylko_dla_ie_7" /><![endif]-->

ten kod załaduje css'a, jesli przegladarka bedzie ie 6 lub 7. Nie wiem czy działa dla wcześniejszych wersji