zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div wird bei a:hover im IE nicht angezeigt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.06.2013, 15:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.06.2013
Beiträge: 5
cheasy befindet sich auf einem aufstrebenden Ast
Standard Div wird bei a:hover im IE nicht angezeigt

Hallo Leute,

habe folgendes Problem:
Ich habe in ein Div ein img hineingelegt und darüber mit absoluten Positionen Links gesetzt (mit einem ähnlichen Effekt wie bei einem Imagemap).
Wenn man über diese Links drüberfährt sollen wiederum mit absoluten Positionen dazugehörige div-Boxen angezeigt werden. Diesen Effekt hab ich mit visibility:hidden im Normalzustand und visibilty:visible beim Hover gemacht.

Funktioniert auch überall einwandfrei, außer im Internet Explorer.. habe schon ewig lang recherchiert, aber nichts zu dem Thema gefunden.

Habs auch schon mit display:none und display:block versucht, aber es hat sich nichts verändert.

Hier der HTML-Code:

HTML-Code:
<div id="imagemap">

<img src="../images_neu/infographic.png" alt="Infographic" border="0" />

<a href="#" style="height: 135px; width: 135px; position: absolute; left: 240px; top: 37px"></a>
<div style="left: 200px; top: -195px;" >
<p>
<p>Text...</p>
</div>

<a href="#" style="height: 135px; width: 135px; position: absolute; left: 349px; top: 341px"></a>
<div style="left: 320px; top: 160px;" >
<p>Text...</p>
</div>

<a href="#" style="height: 135px; width: 135px; position: absolute; left: 128px; top: 341px"></a>
 <div style="left: -150px; top: 200px;" >
<p>Text...</p>
</div>

<a href="#" style="height: 135px; width: 135px; position: absolute; left: 67px; top: 150px"></a>
<div style="left: -210px; top: -50px;" >
<p>Text...</p>
</div>

</div>
CSS:

Code:
#imagemap a:hover {
	cursor: default;
}


#imagemap a + div {
	background-color: white; 
	border: 1px solid gray; 
	visibility: hidden;
	padding: 20px; 
	position: absolute; 
	z-index: 100000; 
	width: 400px;  
}

#imagemap a:hover + div p:first-child  {
	padding-top: 0px;
}

#imagemap a:hover + div p {
	color: #1a1a1a;
	line-height: 14px;
}

#imagemap {
	position: relative;
}

#imagemap a:hover + div {
	visibility: visible;
}
Online zu erreichen ist die Seite unter folgendem Link: Jobs Mitarbeiter Reisebüro, Sprachschule, Deutschlehrer, SprachlehrerIn in Wien - Zu den offenen Stellen

Der Code muss valide sein, daher möglichst keine Javascript-Lösungen.. bzw nur welche, die valide sind.

Würde mich über jede Hilfe freuen!

Lg
cheasy
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.06.2013, 18:04
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Apropos valide -> 64 Fehler sind keine gute Basis.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.06.2013, 20:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.06.2013
Beiträge: 5
cheasy befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
Die Seite ist noch alt, im Hintergrund wird an einer neuen Webseite mit CMS und validem Code gearbeitet. Da die Job-Seite zwar jetzt schon neu gemacht aber dann auf der neuen Version übernommen wird, sollte der Code valide sein.

Aber danke für die äußerst hilfreiche Antwort..
Mit Zitat antworten
  #4 (permalink)  
Alt 13.06.2013, 21:44
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Dann zeige bitte eine Seite wo das Problem auftritt und die valide ist.
Bis jetzt hast du nur die im ersten Beitrag(das ist wohl die Jobseite) als Link zur Verfügung gestellt. - Und dort sind gravierende Fehler drin.

Allein anhand deines geposteten Codes ist keine Hilfe möglich.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 14.06.2013, 03:01
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von cheasy Beitrag anzeigen
Der Code muss valide sein, daher möglichst keine Javascript-Lösungen.. bzw nur welche, die valide sind.
Valide != Nutzung von Javascript

Solange der HTML-Code valide ist, ist es egal wie viel JavaScript du nutzt.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #6 (permalink)  
Alt 14.06.2013, 11:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.06.2013
Beiträge: 5
cheasy befindet sich auf einem aufstrebenden Ast
Standard

Hier die valide Version: http://alnew.activegerman.org/top/jobs/
(bis auf den einzigen Fehler, dass img-Tags nicht geschlossen werden. Das wird noch vom CMS-PHP-Programmierer gelöst.)

Hatte es eh auch mit Javascript versucht, aber das hat dann wiederum auch nicht in jedem Browser funktioniert .. bzw auf bestimmten PC's nicht - darum hab ich das jetzt mit CSS versucht.

Ich würde doch gern einfach nur wissen, was der Internet Explorer für ein Problem mit dem Code hat und wie man das lösen kann.
Mit Zitat antworten
  #7 (permalink)  
Alt 14.06.2013, 12:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
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

Auf dem Link liegt ein Passwortschutz.

Die leeren Links brauchen einen Hintergrund, der nicht "transparent" ist. ab IE9 reicht rgba(0,0,0,0), für die älteren ein Bild angeben (das Bild muss nicht einmal existieren).
Wobei ich nicht testen konnte, was im IE7 passiert. Der stürzt gleich ab, wenn ich die Seite aufrufen will.

Eine CSS-Dynamik, die rein auf :hover basiert, funktioniert auch nicht auf "allen PCs". Tastatur-Navigation? Touch-Bedienung? Screenreader?
Eine Umsetzung mit JS nach dem Prinzip des progressive enhancement wäre wohl das sinnvollste. Am Anfang müsste sinnvolles Markup stehen, z.B. in Form einer Liste; jeder Punkt besteht aus Überschrift und Textbereich (die Überschriften fehlen bei dir ganz, da deren Inhalt nur im Bild ist).
Dann eine hübsche Formatierung ohne Dynamik, für die JS-freien Besucher. Und dann erst die Dynamik dazu per JS.
Mit Zitat antworten
  #8 (permalink)  
Alt 14.06.2013, 12:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.06.2013
Beiträge: 5
cheasy befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Auf dem Link liegt ein Passwortschutz.

Die leeren Links brauchen einen Hintergrund, der nicht "transparent" ist. ab IE9 reicht rgba(0,0,0,0), für die älteren ein Bild angeben (das Bild muss nicht einmal existieren).
Wobei ich nicht testen konnte, was im IE7 passiert. Der stürzt gleich ab, wenn ich die Seite aufrufen will.

Eine CSS-Dynamik, die rein auf :hover basiert, funktioniert auch nicht auf "allen PCs". Tastatur-Navigation? Touch-Bedienung? Screenreader?
Eine Umsetzung mit JS nach dem Prinzip des progressive enhancement wäre wohl das sinnvollste. Am Anfang müsste sinnvolles Markup stehen, z.B. in Form einer Liste; jeder Punkt besteht aus Überschrift und Textbereich (die Überschriften fehlen bei dir ganz, da deren Inhalt nur im Bild ist).
Dann eine hübsche Formatierung ohne Dynamik, für die JS-freien Besucher. Und dann erst die Dynamik dazu per JS.
Dankesehr, mit dem Hintergrundbild klappt es!

Vorübergehend lass ich auf der alten Webseite mal die CSS-Dynamik - Die Idee mit Javascript klingt aber auf jeden Fall interessant, werde ich bei Gelegenheit mal für die neue Webseite ausprobieren, danke dir.
Mit Zitat antworten
Antwort

Stichwörter
css, div, hover, link

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 Menü Probleme beim IE7 mainzer76 CSS 3 16.05.2012 12:37
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
bei kleinerer auflösung wird div container nicht ganz angezeigt koehle CSS 12 17.07.2010 20:30
IMG erbt von div td a:hover? docki CSS 8 21.01.2009 22:39
a:hover im div positionieren abef17 CSS 7 20.09.2005 20:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:12 Uhr.