Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 17.02.2011, 16:29
kenobi kenobi ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2011
Beiträge: 1
kenobi befindet sich auf einem aufstrebenden Ast
Ausrufezeichen IE8 Problem - CSS tooltip verschiebt Menüpunkte

Hallo liebe Forenmitglieder,

ich habe folgendes Problem:
Es geht um die horizontalen blauen Menüpunkte, die im Internet Explorer ( 8 ) und Safari nicht richtig funktionieren.

Siehe:
radiusnull - agentur für audiovisuelles design

Beim Mouseover soll rechts von den Punkten der Name des Menüpunktes erscheinen und das immer an der gleichen Stelle. (So wie es im Firefox auch funktioniert.)

Nun passieren im IE einige merkwürdigen Sachen:
- der Text erscheint direkt über dem jeweiligen Punkt
- manche Punkte werden nicht mehr angezeigt, bzw. erscheinen in der nächsten "Zeile"

Im Safari hingegen, erscheint der Text dazu überhaupt nicht.


Ich habe schon stundenlang rumprobiert. Zuerst hatte ich das Problem, dass der Text im <span>von allen Punkten beim IE immer direkt darunter angezeigt wurde, das habe ich mit font-size: 0; und line-height: 0; "behoben".
Jetzt verschiebt sich dafür alles.



Hier der HTML-Code zu dem Menü:

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles/unterseite.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="navigation">
<div id="navigation1">

<bl class="link">
<a href="unterseite2.html" class="info"><div id="blue"><span>über uns </span></div></a>
<a href="unterseite2.html" class="info"><div id="blue"><span>audiovisuelle produktion </span></div></a>
<a href="unterseite2.html" class="info"><div id="blue"><span>audiovisuelle installation </span></div></a>
<a href="unterseite2.html" class="info"><div id="blue"><span>audiovisuelle live-performance </span></div></a>
<a href="unterseite2.html" class="info"><div id="blue"><span>freie kunstprojekte </span></div></a>
<a href="unterseite2.html" class="info"><div id="blue"><span>freie kunstprojekte </span></div></a>
<a href="unterseite2.html" class="info"><div id="blue"><span>freie kunstprojekte </span></div></a>
</bl>
</div>
</div>
</body>
</html>

Und hier der CSS-Ausschnitt (ich hoffe das genügt)
Code:
#navigation {
float : left;
width : 100%;
height : 20px;
margin-bottom : 0;
margin-left : 0;
position : relative;
}

#navigation1 {
margin-left : 0;
float : left;
width : auto;
height : 20px;
position : fixed;
}

#blue {
float : left;
display : inline;
width : 17px;
height : 20px;
background-image : url(../images/blue.jpg);
background-repeat : no-repeat;
border : none;
margin-left : 0;
position : static;
z-index: 50;
}

a.info {
position : relative;
background-color : transparent;
font-size : 0;
line-height : 0;
text-decoration : none;
width : 300px;
}

a.info:hover {
font-size : 12px;
line-height : normal;
display : block;
color : #fff;
position : relative;
z-index : 1;
width : 300px;
height : auto;
}

#blue:hover {
background-image : url(../images/white.jpg);}

bl.link a:hover {background-color : #000; color : #fff;}
bl.link a:link span {display : none; font-size : 0;}
bl.link a:visited span {display : none; font-size : 0;}
bl.link a:hover span {
position : absolute; 
left : 120px;
background-color : transparent;
width : 360px;
height : 12px;
font-size : 12px;
font-weight : bold;
color : #fff;
display : inline;
z-index : 100;
}
Ich bin leider ein blutiger Anfänger, deswegen befürchte ich fast, dass in dem Code so einiges verwurschtelt sein könnte..

Würde mich über Hilfe und Ratschläge von eurer Seite sehr freuen.
Vielen Dank schon mal im Voraus.
Mit Zitat antworten
Sponsored Links