CSS von Navigationsleiste mit verschiedenen Background-Images Browser Kompatibilität

[johnwp]

Hallo Zusammen!

Ich arbeite mich seit einiger Zeit in html und CSS ein und habe zur Zeit ein Problem, bei dem ihr mir vielleicht weiterhelfen könnt.

Und zwar möchte ich eine Navigationsleiste erstellen, die nur aus Images besteht. Anbei der Quellcode:

<div align="center" style="border:1px solid black; padding:10px;">

<ul id="navibereich">

<li id="navi1">
<a href="#">
&nbsp
</a>
</li>

<li id="navi2">
<a href="#">
&nbsp
</a>
</li>


<li id="navi3">
<a href="#">
&nbsp
</a>
</li>

<li id="navi4">
<a href="#">
&nbsp
</a>
</li>

</ul>

</div>

*/CSS*/

<style>

#navibereich li {display:inline; list-style-typ: none;}

#navi1 a {border:0px solid red; margin-top:20px; margin-right: -20px; margin-left: 60px; height: 224px; width: 266px;}

#navi1 a:link {text-decoration:none; background-image: url(aboutus1.png); background-repeat:no-repeat; background-position:left center;}
#navi1 a:visited {text-decoration:none; background-image: url(aboutus1.png); background-repeat:no-repeat; background-position:left center;}
#navi1 a:focus {text-decoration:none;}
#navi1 a:active {text-decoration:none;background-image: url(aboutus3.png); background-repeat:no-repeat; background-position:left center;}
#navi1 a:hover {text-decoration:none; color: pink; background-image: url(aboutus2.png); background-repeat:no-repeat; background-position:left center;}

#navi2 a {border:0px solid blue;height: 224px;margin-top:20px; width: 266px;}

#navi2 a:link {text-decoration:none; background-image: url(sustainable1.png); background-repeat:no-repeat; background-position:left center;}
#navi2 a:visited {text-decoration:none; background-image: url(sustainable1.png); background-repeat:no-repeat; background-position:left center;}
#navi2 a:focus {text-decoration:none;}
#navi2 a:active {text-decoration:none; background-image: url(sustainable3.png); background-repeat:no-repeat; background-position:left center;}
#navi2 a:hover {text-decoration:none; background-image: url(sustainable2.png); background-repeat:no-repeat; background-position:left center; }

#navi3 a {border:0px solid green; height: 224px;margin-top:20px; margin-left:20px; width: 266px;}


#navi3 a:link {text-decoration:none;background-image: url(participate1.png); background-repeat:no-repeat; background-position:left center;}
#navi3 a:visited {text-decoration:none; background-image: url(participate1.png); background-repeat:no-repeat; background-position:left center;}
#navi3 a:focus {text-decoration:none;}
#navi3 a:active {text-decoration:none;background-image: url(participate3.png); background-repeat:no-repeat; background-position:left center;}
#navi3 a:hover {text-decoration:none;background-image: url(participate2.png); background-repeat:no-repeat; background-position:left center;}

#navi4 a {border:0px solid yellow; height: 224px;margin-top:20px; margin-left:20px; width: 266px;}

#navi4 a:link {text-decoration:none;background-image: url(blog1.png); background-repeat:no-repeat; background-position:left center;}
#navi4 a:visited {text-decoration:none; background-image: url(blog1.png); background-repeat:no-repeat; background-position:left center;}
#navi4 a:focus {text-decoration:none;}
#navi4 a:active {text-decoration:none;background-image: url(blog3.png); background-repeat:no-repeat; background-position:left center;}
#navi4 a:hover {text-decoration:none; background-image: url(blog2.png); background-repeat:no-repeat; background-position:left center;}

</style>


Das ganze funktioniert auch einwandfrei im IE8. Jedoch nicht in den anderen Browsern und auch nicht wenn ich das ganze auf den Server lade.


Kann mir da vielleicht jemand weiterhelfen. Ich wäre sehr sehr dankbar !!

 

[threadi]

Was heißt "einwandfrei"? Kannst Du mal einen Link zur betreffenden Seite posten?

 

[johnwp]

#threadi

mehr oder weniger einwandfrei. wenn du auf die seite http://www.travel4development.org gehst (mit dem IE) sieht man zwei schriftblöcke, die sich bei a:hover auch verändern. warum die ersten zwei nicht abgebildet werden und im firefox garnicht verstehe ich allerdings nicht. vielleicht habt ihr ja ne idee.. wäre wirklich sehr dankbar ..

 

[threadi]

Das sind keine Schriftblöcke sondern riesengroße Bilder. In jedem von mir gerade getesteten Browser werden deren hover-Bilder auch angezeigt. Sie müssen nur erstmal geladen werden. Das dauert auf Grund der Größe auch eine Weile. Schau dir dazu mal

http://www.webmasterpro.de/coding/article/css-hover-grafiken-ohne-nachladen.html

an.

Schau dir auch mal diese Fehler hier an:
http://validator.w3.org/check?verbose=1&uri=http://www.travel4development.org/

Und verwende weniger Inline-Styles.

 

[OpaBenno]

hallo,
empfehle einen Css-Editor (es gibt gute freeware).
Z.bsp.: Line 43 / 46 ablolute ist wohl falsch!
Ebenso besser gray als grey und Line 94 nonen<-- gibt es nicht.
Alles leicht im Editor feststellbar.
Zu guter letzt bei Validom.org mal die Homepage testen.