Grafisches Menü Probleme mit dem IE8

Schlappi · #1 (**permalink**) 03.01.2013, 18:45

Hallo zusammen,
ich hoffe ihr könnt mir helfen.

Ich habe ein grafisches Menü erstellt. Wenn der jeweilige Menüpunkt aktiv ist,
wird als Button eine andere Grafik dargestellt.
Die Button-Grafiken haben je nach Menüpunkt eine unterschiedliche Breite.
Das div kommt so aus Joomla. Da kann ich nichts dran ändern.
Soweit funktioniert es auch. Als ich es jedoch gestern im IE8 testete, wurde ich eines besseren belehrt. Das Menü fliegt komplett auseinander.

Der Text aus den Listenelementen erscheint wieder, klickt man einen Button an, verschwindet er...

(Ob es jetzt sinvoll ist, mit grafischen Menüs zu arbeiten, sei mal dahingestellt. Würde es gerne so lösen.)

Unten findet ihr einen Beispielcode.

Oder hier als Beispiel mit zwei Buttons: http://www.incarp.de/test

Vielen Dank für eure Hilfe.
Ich werde das Problem ohne euch wohl nicht lösen können.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Beispiel</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#menu ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-indent: -9999px;
}

#menu li {float: left; margin-left: 0px;}

/*------------Button1---------------*/

ul.menu li.item-102 a:link
{
display: block;
width: 71px;
height: 30px;
overflow: hidden;
text-indent: -9999px;
}

ul.menu li.item-102 a:link
{ 
background-image: url(bild1_sw.png);
background-repeat : no-repeat;
}

#menu ul.menu li.item-102.active a { 
background-image: url(bild1_dg.png); 
background-repeat : no-repeat;
}

/*--------------Button2-----------------*/

ul.menu li.item-103 a:link
{
display: block;
width: 267px;
height: 30px;
text-indent: -9999px;
}

ul.menu li.item-103 a:link
{ 
background-image: url(bild2_sw.png);
background-repeat : no-repeat;
}

#menu ul.menu li.item-103.active a { 
background-image: url(bild2_dg.png); 
background-repeat : no-repeat;
}

/*----------Button3-------------*/

ul.menu li.item-104 a:link
{
display: block;
width: 267px;
height: 30px;
text-indent: -9999px;
}

ul.menu li.item-104 a:link
{ 
background-image: url(bild3_sw.png);
background-repeat : no-repeat;
}

#menu ul.menu li.item-104.active a { 
background-image: url(bild3_dg.png); 
background-repeat : no-repeat;
}

</style>
</head>
<body>

	<div id="menu">
		<div class="moduletable_menu">			
		<ul class="menu">
		<li class="item-102"><a href="/" >Home</a></li>
		<li class="item-103 current active"><a href="/" >Text11111</a></li>
		<li class="item-104"><a href="/" >Text2</a></li>
		</div>
	</div>

</body>
</html>

Barodscheff · #2 (**permalink**) 05.01.2013, 14:23

Hi Schlappi,

ich habe leider nur den IE Tester hier und da wird im IE8 alles korrekt dargestellt aber ich sehe im Code ein paar Unstimmigkeiten. Mal ganz abgesehen davon, dass ich nicht verstehe warum du den Text als Grafik darstellst. Das ist eigentlich nicht korrekt.

Zitat:

ul.menu li.item-102 a:link
{
display: block;
width: 71px;
height: 30px;
overflow: hidden;
text-indent: -9999px;
}

ul.menu li.item-102 a:link
{
background-image: url(bild1_sw.png);
background-repeat : no-repeat;
}

Warum fasst du das beides nicht zusammen?
Was soll das text-indent?
A:link ist hier nicht korrekt, das ":link" bitte weglassen.

Das wär das erste was mir auffällt. Vielleicht kannst du nach den Korekturen ein Screenshot vom Problem im IE8 machen?

Viele Grüße.

hubspe · #3 (**permalink**) 05.01.2013, 14:58

Hi,

dein Beispiel enthält einen groben, technischen Fehler.

Hier mal ein Tut eines grafischen Menüs für WP.

Manfred62 · #4 (**permalink**) 05.01.2013, 18:23

hmm, hier fliegt nichts auseinander? Wie oben schon genannt, ul wird nicht geschlossen.
So ganz erschliesst sich mir nicht der Sinn dieses Konstrukts?
Dieses css reicht doch (bezogen auf die Demo):

HTML-Code:

body {
  font: 100%/1.5 Arial, sans-serif;
}

#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu li {
  float: left;
}

a {
  background: #fff;
  color: #000;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 2px 10px;
  border: 1px solid #000;
  font-weight: bold;
}

a:hover {
  background: #95C11E;
  color: #fff;
}

.active a {
  background: #128435;
  color: #fff;
}

Schlappi · #5 (**permalink**) 05.01.2013, 18:35

Vielen Dank ihr beiden.

Habe meinen Quellcode nach der Anweisung von Barodscheff korrigiert.
Es funktioniert

@ hubspe: Dein Beispiel werde ich aber natürlich auch noch nachvollziehen.

Dank auch an Manfred62.

Das Menü nur aus Bildern zu machen ist natürlich völliger Quatsch.
Werde versuchen meinen Freund davon abzubringen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Probleme mit dem Internet Explorer	Webby0815	CSS	8	24.02.2011 15:36
Probleme mit Drop-Down Menü in IE 7	Stacy230	CSS	3	06.12.2010 18:40
Strich über dem Menü bei hover und active	Jeanny	(X)HTML	15	11.10.2010 19:57
Probleme mit dem Layout: divanordnung	Muckel	CSS	8	29.06.2008 11:28
Probleme mit dem Einloggen	terrikay	Fragen, Konstruktive Kritik, Lob / Bekanntmachungen	18	24.10.2004 23:12