Problem z wyswietlaniem menu pod IE (css)

Dla specjalistów Webmastering
#1

Mam problem z wyswietlaniem menu poziomego pod przegladarka IE, pod firefoxem dziala prawidlowo.

Pod firefoxem wyglada to tak (jest prawidlowo) 1.jpg

Pod IE wyglada to niestety tak 2.jpg

Code css wyglada nastepujaco:

/* menutop */

.menutop{

background:url(../images/header2.jpg);

height:31px;

}

.menutop ul, .menutop ul li{

display:block;

margin:0;

padding:0;

list-style:none;

}

.menutop ul{

display:block;

position: relative;

float: right;

top: 2px; 

}

.menutop ul li{

float:right;

margin-right: 4px;

}

.menutop ul li a, .menutop ul li a:visited{

font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

color:#ffffff;

height:31px;

line-height:30px;

text-align:center;

white-space:nowrap;

background:url(../images/result5.png) top left repeat-x;

background-position: 0px 0px;

padding: 0 15px ;

margin-left: 10px;

}


.menutop ul li a:hover,#menutop ul li.sfhover{

color:#FFF;

background:url(../images/result5.png) top left no-repeat;

background-position: 0px -31px;

}

/* koniec menutop */
#2

A fotki odwrotnie nie miały być podpięte?

To chyba IE6, więc lepiej stworzyć osobny arkusz stylów na warunku i szerokość li ustawić na stałe. W IE7 i wyższych to powinno działać.

Tak swoją drogą IE6 już bym powoli zaczął olewać pod względem zgodności co do piksela z innymi przeglądarkami.

#3

Jak dla mnie to CSS trzeba zmodyfikować:

najpierw piszesz, że .menutop ul li ma mieć atrybut block,

potem piszesz, że ta sama klasa ma mieć float:right;

O ile Firefox takie klocki łyka o tyle dla IE robi się słabo i bierze nogi za pas.

Przykładowo można popisać to tak:

.menutop ul {

	margin:0px;

	padding:0px;

	list-style-type:none;

}

.menutop ul li {

	float:right;

	width:50px;

	height:30px;

	background-color:#000;

	margin-left:3px;

}


.menutop ul li a {

	width:50px;

	height:30px;

	display:block;

	color:#FFF;

}

Wartości width i height i tak dalej do zmian.

Sprawdzałem, działa.

#4

Pod ie 6 dziala elegancko ale pod firefoxem sie zagescilo teraz zabardzo ;/

3.jpg

– Dodane 06.01.2010 (Śr) 11:17 –

Problemem jest parametr width:50px; po zwiekszeniu go do 70 jest powiedzmy ze ok, ale chcialbym zeby to zrobic tak zeby sie automatycznie poszerzalo w zaleznosci od tego czy pobrany tekst na przycisk jest krotki czy dlugi. Jest szansa zeby tak zrobic zeby dzialalo pod ie 6 ???

#5

Dla Firefox i IE7 wystarczy zamiast parametrów width:50px; wstawić parametr min-width:50px;

A pod IE6 nie wiem czy to zadziała, olałem tę przeglądarkę jakiś czas temu.

Dodatkowo dla elementu:

.menutop ul li { }

powinieneś ustawić jakieś parametry margin-left:; czy margin-right:; oraz padding-left:; czy paddin-right:;

Elementy będą się ładniej pozycjonować.

#6

W nagłówku dodajesz takie coś za twoim css-em.

W tym pliku css ustawiasz szerokość na sztywno - tylko dla IE6. Możesz nawet ustawić klasy na sztywno dla każdej pozycji, zeby dla IE6 dopasować szerokość. A w normalnym css zostawiasz jak było na początku, bo rozumiem że to na początku działa dobrze w Firefoxie i innych.

Warunek możesz zrobić w PHP identyfikując IE ( i nie tylko) po zmiennej $_SERVER[‘HTTP_USER_AGENT’]