IE8 Problem - CSS tooltip verschiebt Menüpunkte

kenobi · #1 (**permalink**) 17.02.2011, 15:29

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.

fricca · #2 (**permalink**) 17.02.2011, 15:34

Es gibt kein Element "bl".
Links können keine Divs enthalten.
Mach dich bitte mit dem Validator bekannt.

Die "Navigation" ist 1. nicht als solche erkennbar und 2. wegen der fixen Positionierung nicht zugänglich, wenn man nicht zufällig über die nötige Viewporthöhe verfügt. Das kannst du so nicht lassen.

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
Css Styleswitcher Problem	just4download	(X)HTML	11	20.06.2010 21:09
Problem mit Layout- Totaler CSS Noob	meici	CSS	3	01.03.2008 16:33
Problem mit CSS Ausklappmenü: Im Untermenü wird der Platz nicht genutzt	braindead	CSS	6	20.09.2006 22:45
CSS Problem	Adriana	CSS	0	09.09.2006 16:51
CSS Tips & Tricks	Webnauts	Ressourcen	0	25.08.2006 23:04