Thema: Menü / CSS / Background Image --- im IE ok, im Firefox ohje

Hallo ich bin neu hier, hab aber nicht vor neu zu bleiben :-)

Ich beschäftige mich bereits seit gestern (also seeeeeehr lange ^^) mit Joomla und find es perfekt für meine Zwecke. Ichhabe mich also direkt aufgemacht und mir ein Template gesucht welches ich relativ einfach zu meinem Design umstricken kann.

Soweit so gut. Nun hab ich jedoch daß Problem daß ich nicht so der CSS Held bin und mir mein Menü etwas Kopfzerbrechen bereitet. Die Schrift der Menüpunkte habe ich mit einem Background Image hinterlegt. Das funktioniert im IE auch aber im Firefox garnicht :-(

Desweiteren hab ich daß Problem daß wenn ich im IE über die Menüpunkte gehe das Image kurzzeitig oder ganz verschwindet.

Vielleicht könnt ihr mir ja auf die Sprünge helfen wo mein Problem liegt ?

Hier der Link zur Seite (bitte mal den Inhalt noch nicht beachten ;-) ): Klick Mich mit IE und Firefox

Meine CSS sieht in dem Berreich für das Menü folgendermaßen aus:

Code:

#active_menu {
  color: #ffffff;
}

/* --Default Class Settings-- */

a.mainlevel:link, a.mainlevel:visited {
color: #FFFFFF;
font-weight: bold;
width: 203px;
height: 30px;
text-indent: 0px;
text-decoration: none;
font-family: Arial;
margin-bottom: 0px;
font-size:12px;
padding-left: 20px;
padding-top: 6px;
text-decoration:none;
background-image: url(../images/button.jpg);
background-repeat:no-repeat;
}
a.mainlevel:hover {
color: #FFFFFF;
text-decoration:none;
}

a.mainmenu:link, a.mainmenu:visited, {
color: #000000; 
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 10px;
text-decoration:none;

}
a.mainmenu:hover {
color: #333333;
text-decoration:none;
}
.pollstableborder {
border: 1px solid;
padding: 1px;
}

a.sublevel:link, a.sublevel:visited {
        padding-left: 1px;
        vertical-align: middle;
        font-size: 11px;
        color: #0099FF;
        text-align: left;
}


a.sublevel:hover {
color: #ff9e31; text-decoration: none;
}

table.moduletable {
	padding: 5px 0px 5px 0px;
	margin-bottom: 15px;
	width: 100%;
}

table.moduletable th {
	font-size        : 12px;
	font-weight      : bold;
	color            : #000000;
	text-align       : left;
	width            : 100%;
	letter-spacing: 2px;
	text-indent: 0px;
	padding-bottom: 3px;
	border-bottom: 1px solid #CCCCCC;
}

table.moduletable li {
}

table.moduletable ul {
	padding: 0px;
}
table.moduletable td {
font-size: 11px;
font-weight: normal;
}

Über eine kleine Hilfe würde ich mich sehr freuen. Leider konnte ich mit der Suchfunktion keine erfolge erzielen.

Da fehlt einfach nur ein

Code:

display:block;

für die Links...

Desweiteren hab ich daß Problem daß wenn ich im IE über die Menüpunkte gehe das Image kurzzeitig oder ganz verschwindet.

Das ist normal und hat etwas mit der Ladeschwindigkeit, Grafikkarte, IE-Version etc. und anderen kleinen Problemchen zu tun. Das kannst du nicht beeinflussen, wenn du einen Bilderwechsel über das CSS machst. Mit JS ist das ähnlich.

Gruß
ec

Manchmal könnte ich mich selbst treten.

Danke - das wars natürlich

Das andere Problem liegt übrigens an meinem IE... auf jedem anderen Rechner verschwinden die Grafiken nicht im Menü.

Also hier ist keine Hilfe mehr erforderlich.