nicht angemeldet
pseudoklassen im IE
Ich habe in einem div ein Bild als Hintergrundbild geladen und möchte dieses nun durch anklicken vergrößern. Ich habe das mit :focus geschaft. Dies funktioniert aber nur unter firefox. Ich musste auch noch eine verweissensitive Graphik (map Befehl) benutzen, da ich nicht das gesamte div als anklickbaren Bereich haben wollte. Da ich barrierefrei arbeiten möchte, kann ich kein Javaskript verwenden. Das Problem ist nun, das das ganze im IE nicht funktioniert. Auch wenn ich statt focus aktiv verwende funktioniert das nicht. Ich habe eine vereinfachte Version der Seite beigefügt. Wenn jemand eine Idee hat währe ich sehr dankbar. Ich verwende übrigens auf der Originalseite (www.haus-martinus.de) eine Browserweiche, sodas ich für firefox eine andere css nutzen kann als für den IE.
Css Datei funtioniert in firefox:
body {
font-family: Arial, Helvetica, sans-serif;
}
#bild1
{
position:absolute;
cursor:pointer;
width:360px;
height:240px;
z-index:13;
}
#bild1 a {
position:absolute;
width:360px;
height:240px;
background-image:url(../photos/wohnzimmertrans.gif);
background-repeat:no-repeat;
}
#bild1 a:focus
{
position:absolute;
width:360px;
height:240px;
background-image:url(../photos/wohnraumgr.jpg);
background-repeat:no-repeat;
}
Dazugehörige Html Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<link href="../css/bild.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="bild1">
<a id="hier" name="hier" href="#" tabindex="18"><map id="bild" name="bild"><area shape="rect" coords="105,70,255,170" href="#hier" alt="Wohnzimmer" /></map>
<img src="../photos/trans.gif" width="360" height="240" border="0" alt="Bild des Wohnzimmers. Man sieht einen großen Raum mit einer Sitzgruppe vor einem alten Kamin." usemap="#bild" />
</a>
</div>
</body>
</html>
-
Hi,
Da ich barrierefrei arbeiten möchte,
sorry, aber davon ist die Seite noch meilenweit entfernt. Angefangen von einem unsinnigen und falsch platziertem <h3 class="unsichtbar"> bis hin zu üblen Überlagerungen bei Schriftvergrößerung.
Ich verwende übrigens auf der Originalseite (www.haus-martinus.de) eine Browserweiche, sodas ich für firefox eine andere css nutzen kann als für den IE.
völlig untauglich, denn Du gehst von einem stets korrekt übermitteltem UA-String aus. Im als IE ausgegebenem Opera bekomme ich das unpassende IE-Stylesheet. Du kennst conditional comments oder CSS-Browserweichen? Wobei am günstigsten ist, das Layout so flexibel hinzubekommen, daß ein CSS ausreicht.
freundliche Grüße
Ingo