CSS - problem.

[Xadrian]

Zainspirowany stworzeniem własnego layoutu, udało mi się stworzyć takie menu:

Niestety, taki wygląd jest tylko w Google Chrome. W IE czy FF wygląda to tak:

Kod HTML tego menu:

<ul id="cssmenu1">
	<li><a href="#"><img src="http://otland.net/images/icons/fanfare.gif" class="imageBar" /> News</a>
		<ul>
			<li><a href="http://www.javascriptkit.com/jsref/">Latest News</a></li>
			<li><a href="http://www.javascriptkit.com/domref/">News Archive</a></li>
		</ul>
	</li>
	<li><a href="#"><img src="http://otland.net/images/icons/keyring.gif" class="imageBar" />Account</a>
		<ul>
			<li><a href="http://www.dynamicdrive.com">Login to account</a></li>
			<li><a href="http://www.codingforums.com">Create Account</a></li>
			<li><a href="http://www.cssdrive.com">Lost Account Interface</a></li>
		</ul>
	</li>
	<li><a href="#"><img src="http://otland.net/images/icons/pepole.gif" class="imageBar" />Community</a>
		<ul>
			<li><a href="http://www.codingforums.com">Characters</a></li>
			<li><a href="http://www.codingforums.com">Who is online?</a></li>
			<li><a href="http://www.dynamicdrive.com">Highscores</a></li>									
			<li><a href="http://www.cssdrive.com">Guilds</a></li>
			<li><a href="http://www.cssdrive.com">War Statistics</a></li>
		</ul>
	</li>
	<li><a href="#"><img src="http://otland.net/images/icons/pen.gif" class="imageBar" />Libray</a>
		<ul>
			<li><a href="http://www.codingforums.com">Forum</a></li>
		</ul>
	</li>
	<li><a href="#"><img src="http://otland.net/images/icons/present.gif" class="imageBar" />Shop Offer</a>
		<ul>
			<li><a href="http://www.codingforums.com">Buy Points</a></li>
			<li><a href="http://www.codingforums.com">Shop Offer</a></li>
		</ul>
	</li>
</ul>

CSS:

.imageBar {
	position: absolute;
	margin-top: -7px;
	
	border: 0px
}

Może mi ktoś to dostosować tak, aby we wszystkich przeglądarkach pojawiał się taki efekt jak w Google Chrome? Jak potrzebujecie więcej informacji - pisać.

 

[Smentol]

Ja nie potrafię, ale muszę przyznać, że bardzo ładnie.

 

[zakius]

najprawdopodobniej gecko i ie nie potrafią wyrenderować obrazka poza divem go zawierającym czy coś w tym stylu, trudno powiedzieć

 

[Azi]

if($_SERVER["USER_AGENT"] != 'chrome'){
 echo 'sciagnij google chrome, potem kurwo wejdz na www';
 exit;
}

 

[EvulMastah]

if($_SERVER["USER_AGENT"] != 'chrome'){
 echo 'sciagnij google chrome, potem kurwo wejdz na www';
 exit;
}

if(strpos($_SERVER['HTTP_USER_AGENT'], "Chrome") == false)
    die("sciagnij google chrome, potem kurwo wejdz na www");

fix't

 

[Azi]

#up
dobra dobra, ja dałem tylko przykład. ;D

if(!strpos($_SERVER['HTTP_USER_AGENT'], "Chrome")) die("sciagnij google chrome, potem kurwo wejdz na www");

 

[Aleh]

if($_SERVER["USER_AGENT"] != 'chrome'){
 echo 'sciagnij google chrome, potem kurwo wejdz na www';
 exit;
}

Rep++

 

[EvulMastah]

#up
dobra dobra, ja dałem tylko przykład. ;D

if(!strpos($_SERVER['HTTP_USER_AGENT'], "Chrome")) die("sciagnij google chrome, potem kurwo wejdz na www");

if(!stripos($_SERVER['HTTP_USER_AGENT'], "Chrome")) die("sciagnij google chrome, potem kurwo wejdz na www");

fix't

 

[koob]

daj w nadrzednym kontenerze position:relative, wtedy absoluty wewnatrz tego relative ustawiane sa wzgledem nadrzednego kontenera. Zamiast margin uzyj left: Xpx.

 

[Xadrian]

daj w nadrzednym kontenerze position:relative, wtedy absoluty wewnatrz tego relative ustawiane sa wzgledem nadrzednego kontenera. Zamiast margin uzyj left: Xpx.

It works!

Działa poprawnie w IE, FF, Chrome, zaraz sprawdzę jak jest w Operze. Rep+ leci.

 

[Shakaal]

Xadrian ile chcesz za tego laya? ;x
Początek zapowiada się pięknie..

 

[Xadrian]

Jak skończę, to może dogadamy, teraz mam trochę innej roboty : d

 

[koob]

It works!

Działa poprawnie w IE, FF, Chrome, zaraz sprawdzę jak jest w Operze. Rep+ leci.

Check Browser Compatibility, Cross Platform Browser Test - Browsershots

sie przydaje.

 

[kimini11]

Xadrian jak skończysz to napisz ip do otsa to sobie skopiuje xD

 

[Xadrian]

Xadrian jak skończysz to napisz ip do otsa to sobie skopiuje xD

Walne znaki wodne na każdym obrazku którego użyje

 

[kimini11]

nie ciumkaj ^^

 

[zakius]

Check Browser Compatibility, Cross Platform Browser Test - Browsershots

sie przydaje.

niestety mi żadna przeglądarka nie doczytuje strony, czasem nawet nie wystartuje zanim ss sie zrobi

 

[Xadrian]

niestety mi żadna przeglądarka nie doczytuje strony, czasem nawet nie wystartuje zanim ss sie zrobi

No i trzeba walnąć stronę na jakiś hosting, na razie nie mam czasu na te zabawy, sprawdzaniem zajmę się później :q
Jak działa dobrze na operze, ff, chrome i ie to więcej już nie trzeba.