XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   IE8 Problem - CSS tooltip verschiebt Menüpunkte (http://xhtmlforum.de/showthread.php?t=63847)

kenobi 17.02.2011 16:29

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.

fricca 17.02.2011 16: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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:55 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019