zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE8 Problem - CSS tooltip verschiebt Menüpunkte

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.02.2011, 16:29
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
  #2 (permalink)  
Alt 17.02.2011, 16:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, ie8, infoxbox, mouseover, span, tooltip

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Css Styleswitcher Problem just4download (X)HTML 11 20.06.2010 22:09
Problem mit Layout- Totaler CSS Noob meici CSS 3 01.03.2008 17:33
Problem mit CSS Ausklappmenü: Im Untermenü wird der Platz nicht genutzt braindead CSS 6 20.09.2006 23:45
CSS Problem Adriana CSS 0 09.09.2006 17:51
CSS Tips & Tricks Webnauts Ressourcen 0 26.08.2006 00:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:57 Uhr.