✔ Wieder mal ein Problem mit dem IE! (image map)

Status
Nicht offen für weitere Antworten.
D

DerMilchmann

Mitglied
Hallo liebe tutorials.de community,
ich habe eine Image map erstellt die der Internet Explorer nicht richtig darstellen kann, wenn ich in der Navigationsleiste oben über einen link fahren soll, soll unten in dem Bild eine Grafik erscheinen! Wenn ihr die haus.html mit dem Firefox öffnet und das Ergebnis der .css mit der Darstellung des IEs vergleicht wird ihr mein Problem schnell erkennen können!
Bitte um schnelle hilfe!
Vielen lieben dank im Vorraus!
Mfg DERMILCHMANN
hier der link zu der datei!
http://schnipp Edit by Maik: existiert nicht mehr

Wenn das unter keinen Umständen im IE funktionieren sollte, dann schreibt mir das bitte!
Wär euch sehr verbunden!
Danke

Ich füge mal den Quelltext hinzu, der in der zip auch beinhaltet ist.
Code: 
/* CSS Document */
*	{
	font-family:Verdana, Arial, Helvetica, sans-serif; border:none
	}

body {
margin:0; padding:0; font-size:small; color:#000000; background-color:#FFF1C0;
}

@font-face { 
font-family:Lucida Calligraphy; src:url(img/LCALLIGf); 
}

.nav_abstand {
margin-bottom:5px;
}

#container {
width:982px; height:604px; position:absolute; top:50%; left:50%; margin:-302px 0 0 -491px;
}


#container_left {
float:left; width:330px;
}

#header1 {
background-image:url(img/header1.gif); background-repeat:no-repeat; width:330px; height:341px;
}

#nav {
background-image:url(img/nav.gif); background-repeat:no-repeat; width:330px; height:263px; 
}

ul {list-style-type: none; padding-left:50px; padding-top:20px; margin:0; font-weight:bold;
}

li a { font-size:large; text-decoration: none; color:#997948; background:transparent none; padding:0; margin:0;font-family:Lucida Calligraphy;
}


li a:hover {color:#A34D00; background:transparent none;
}

li a:active {color:#A34D00;  background:transparent none;
}

#container_right {
float:right; width:652px;
}

#header2 {
background-image:url(img/header2.jpg); background-repeat:no-repeat; width:652px; height:279px;
}

#content {
background-image:url(img/content.gif); background-repeat:no-repeat; width:652px; height:325px;
}

#contentgrundriss {
background-image:url(img/contentclear.gif); background-repeat:no-repeat; width:652px; height:325px; padding-top:35px;
}

/* Home */
.haus {
padding-left:30px;padding-top:5px; padding-bottom:0px;
}

.text {
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:small; width:220px; padding-left:40px; color:#4A341A; background:transparent none;
}

.text2 {
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:small; color:#4A341A; background:transparent none; 
}



/* Unser Haus */
#grundriss {
width:240px; height:249px; position:relative; 
}

#grundriss ul {
margin:0; padding:0; list-style:none; display:block;
}



#grundriss .wohnen a .hotspot {
background-image:url(img/wohnen.gif); background-repeat:no-repeat; visibility:hidden;
top:80px;
left:1px;
position:absolute; width:65px; height:110px;
}

#grundriss .kueche a .hotspot {
background-image:url(img/kueche.gif); background-repeat:no-repeat; visibility:hidden;
top:118px;
left:-167px;
position:absolute; width:59px; height:72px;
}

#grundriss .bad a .hotspot {
background-image:url(img/bad.gif); background-repeat:no-repeat; visibility:hidden;
top:119px;
left:-155px;
position:absolute; width:38px; height:57px;
}


#grundriss .schlafen a .hotspot {
background-image:url(img/schlafen.gif); background-repeat:no-repeat; visibility:hidden;
top:22px;
left:-117px;
position:absolute; width:182px; height:70px;
}

#grundriss .flur a .hotspot {
background-image:url(img/flur.gif); background-repeat:no-repeat; visibility:hidden;
top:50px;
left:-137px;
position:absolute; width:89px; height:27px;
}

#grundriss .abstellraum a .hotspot {
background-image:url(img/abstellraum.gif); background-repeat:no-repeat; visibility:hidden;
top:77px;
left:-126px;
position:absolute; width:38px; height:22px;
}

#grundriss a {
	position:absolute;
	top:-29px;
	margin-left:200px;
	width: 120px;
	left: 22px;
}

#grundriss .wohnen a {

top:-15px;
left:-195px;
}

#grundriss .schlafen a  {

top:-15px;
left: -80px;
}

#grundriss .kueche a  {

top:-15px;
left: 37px;px;
}

#grundriss .bad a  {

top:-15px;
left: 98px;
}

#grundriss .abstellraum a  {

top:-15px;
left: 143px;
}



#grundriss .flur a  {
top:-15px;
left: 248px;
}



/* IE Problem*/
#grundriss a:hover	{ border:none; }

#grundriss a:hover .hotspot {
 visibility:visible;
}

.clear {
clear:both;
}


html

HTML: 
<!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>
<link rel="stylesheet" type="text/css" href ="main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Ferienhaus-Zieseniss</title>
</head>

<body>
<div id="container">
<div id="container_left">
<div id="header1"></div>
<div id="nav">


<ul>
	<li class="nav_abstand"><a href="index.html" id="home">Home</a></li>
	<li class="nav_abstand"><a href="haus.html" id="haus">Unser Haus</a></li>
	<li class="nav_abstand"><a href="freizeit.html" id="freizeit">Freizeit</a></li>
	<li class="nav_abstand"><a href="preise.html" id="preise">Preise</a></li>
	<li class="nav_abstand"><a href="index.html" id="anfahrt" >Anfahrt</a></li>
	<li class="nav_abstand"><a href="haus.html" id="kontakt" >Kontakt</a></li>
	<li>                    <a href="freizeit.html" id="verfügbarkeit" >Verfügbarkeit</a></li>
</ul>  
</div>
</div>
<div id="container_right">
<div id="header2"></div>
<div id="contentgrundriss">

<div id="grundriss">
  <img src="img/grundriss.gif" height="249" width="240" alt="grundriss"/>
  <ul>

<li class="wohnen">
	<a class="text2" href="wohnen.hrml" title="Wohnzimmer">
		<span class="hotspot"></span>
		<img src="img/dot.gif" /> Wohnzimmer</a></li>

<li class="kueche">
     <a class="text2" href="kueche.hrml" title="K&uuml;che">
         <span class="hotspot"></span>
         <img src="img/dot.gif" /> K&uuml;che</a></li>


<li class="bad">
     <a class="text2" href="bad.hrml" title="Bad">
         <span class="hotspot"></span>
         <img src="img/dot.gif" /> Bad</a></li>


<li class="schlafen">
     <a class="text2" href="schlafen.hrml" title="Schlafzimmer">
         <span class="hotspot"></span>
         <img src="img/dot.gif" /> Schlafzimmer</a></li>


<li class="flur">
      <a class="text2" href="flur.hrml" title="Flur mit Einbauschränken">
	     <span class="hotspot"></span>
        <img src="img/dot.gif" /> Flur</a></li>
	  


<li class="abstellraum">
      <a class="text2" href="abstellraum.hrml" title="Abstellraum mit Waschmaschine">
	  <span class="hotspot"></span>
      <img src="img/dot.gif" /> Abstellraum</a></li>


<li class="abstellraum2">
<a href="abstellraum2.hrml" title="Abstellraum mit Gasheizung"></a>
</li>
<li class="aussenkamin">
<a href="aussenkamin.hrml" title="Aussenkamin"></a>
</li>
<li class="aussenbereich">
<a href="aussenbereich.hrml" title="Aussenbereich"></a></li>
</ul>
</div>

</div>
<div class="clear"></div>
</div>



</body>
</html>

Schreibt ruhig wenn ihr nicht verstehen solltet was ich meine!


[editpost by mod]
 
Zuletzt bearbeitet von einem Moderator:
Hi.

Bitte verwende wenn du Code postet die Code Tags z.B. [code=html]...[/code] für HTML etc.

Dann probier mal statt
CSS: 
#grundriss a:hover	{ border:none; }
CSS: 
#grundriss a:hover	{ border:0px; }
Gruß
 
*offtopic*

@ DerMilchmann: Und benutze bitte zukünftig den "Ändern"-Button deines Beitrages, wenn du noch etwas, wie z.B. den Quelltext, nachreichen willst.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück