Buttons funkionieren nicht im Internet Explorer

Atomine · 08.04.2011

Hallo ihr

hab mit der Suchfunktion leider nicht brauchbares gefunden.
Ich bin absoluter Neuling im Webbereich.
Für eine Konditorei habe ich eine Seite erstellt, und habe jetzt das Problem,dass die Html Seite zwar in Firefox funktioniert, aber nicht im Internetexplorer.
Also die Verlinkung der Buttons funktionieren nicht. Ich kann nicht von Seite zu Seite klicken.
Weiß vieleicht jemand woran es liegen könnte? Vielen Dank!!
Hier ist mein Code von der Startseite:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>


<style type="text/css">
<!--

.hintergrund  {position:relative;  left:0px;top:-13px; width:960px; height:1300px;
    z_-index:0; background-image: url( bilder/a_body.png ); overflow: hidden;}
 
.head {position:relative; left:95px; top:0px; width:765px; height:180px; z-index:2; background-image:url(bilder/a_head.png);}

.home {position:relative; left:97px; top:-80px; width:127px;  height:118px  z-index:1;
    background-image: url(bilder/a_home_press.png);  overflow:hidden;}

.produkte  {position:relative;left:223px;top:-198px;width:127px;height:118px;
z-index:1;background-image:url(bilder/a_produkte.png);}

.produkte:hover{position:relative;left:223px;top:-198px;width:127px;height:118px;
z-index:1;background-image: url(bilder/a_produkte_press.png);}

.rundgang  {position:relative;left:350px;top:-316px;width:127px;height:118px;z-index:1;background-image: url(bilder/a_rundgang.png);}
.rundgang:hover {position:relative;left:350px;top:-316px;width:127px;height:118px;
z-index:1;background-image: url(bilder/a_rundgang_press.png);}

.konditorei  {position:relative;left:477px;top:-434px;width:127px;height:118px;z-index:1;background-image: url(bilder/a_konditorei.png);}
.konditorei:hover  {position:relative;left:477px;top:-434px;width:127px;height:118px;z-index:1;background-image: url(bilder/a_konditorei_press.png);}

.musik  {position:relative;left:604px;top:-552px;width:127px;height:118px;z-index:1;background-image: url(bilder/a_musik.png);}
.musik:hover  {position:relative;left:604px;top:-552px;width:127px;height:118px;z-index:1;background-image: url(bilder/a_musik_press.png);}

.kontaktundanfahrt  {position:relative;left:731px;top:-670px;width:127px;height:118px;z-index:1;background-image: url(bilder/a_kontaktund*********png);}
.kontaktundanfahrt:hover  {position:relative;left:731px;top:-670px;width:127px;height:118px;z-index:1;background-image: url(bilder/a_kontaktundanfahrt_press.png);}

.entschuldigung {position:relative;left:105px;top:-630px;widht:400px;height:20px;font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#900;}


.ueberschrift {position:relative;left:105px;top:-590px;width:340px; height:85px;z-index:1;overflow:hidden;}
.text2 {position:relative;left:105px;top:-580px;width:340px; height:350px;z-index:1;font-family: Verdana, Geneva, sans-serif; font-size:12px;overflow:hidden;}

.zitate  {position:relative;left:500px;top:-1010px;width:350px;height:811px;z-index:4;overflow:hidden;}


.tasse {position:relative;left:150px;top:-1380px;width:250px;height:199px;z-index:5;}

.text3 {position:relative;left:105px;top:-1330px;width:340px; height:190px;z-index:1;font-family: Verdana, Geneva, sans-serif; font-size:16px;overflow:hidden;}
.text4 {position:relative;left:105px;top:-1350px;width:340px; height:30px;z-index:1;font-family:Verdana, Geneva, sans-serif; font-size:20px;overflow:hidden;}


.impressum_abschluss {position:relative;left:95px;top:-1340px;width:765px;height:72px;z-index:5;}

.position   {margin-left:auto;margin-right:auto;width:960px;height:1000px;}

-->
</style>

<body bgcolor="#430305">

<div class="position">

<div class="hintergrund">

<div class="head"></div>

<div class="home"></div>
<div class="produkte"><a href="produkte.html"><div class="produkte"></div></a></div>
<div class="rundgang"><a href="rundgang.html"><div class="rundgang"></div></a></div>
<div class="konditorei"><a href="konditorei.html"><div class="konditorei"></div></a></div>
<div class="musik"><a href="musik.html"><div class="musik"></div></a></div>
<div class="kontaktundanfahrt"><a href="kontaktund*********html">
<div class="kontaktundanfahrt"></div></a></div>

<div class="entschuldigung">Da unsere Webseite zur Zeit noch im Aufbau ist bitten wir Fehler und Unvollständgkeiten zu entschuldigen. 
</div>


<div class="ueberschrift" ><img src="bilder/Ueberschrift.png" />
</div>

<div class="text2">Mein Name ist CS
wir, mein Serviceteam und ich,
möchten Ihnen den Aufenthalt bei uns
so angenehm wie möglich machen.
<br />
Dafür bieten wir Ihnen eine feine
und stets frische Auswahl an Kuchen,
Torten und Kleingebäck, selbstverständlich
alles aus eigender Herstellung an.<br />
<br />
Ab__Uhr servieren wir Ihnen
verschiedene Frühstücksvariationen.
Wir sind sicher:
"Die könnten Ihnen so schmecken".<br />
Für den "eiligen" Gast halten wir
belegte Brötchen und Kaffee bereit.
Ein kleinner Imbiss am Mittag?
Auch damit können wir Ihnen dienen.<br />
<br />
Ihre speziellen Wünsche und Ideen
setze ich gern für Sie in Sahne und Creme um.<br />
<br />
Fordern Se mich!<br />
<br />
Ihr Konditormeister CS<br />
<br /><br />
Übrigens: <br />
Draußen nur Kännchen......doch nicht bei uns!

</div>


<div class="zitate"><img src="bilder/a_zitate.png" /></div>


<div class="tasse"><img src="bilder/a_tasse.png" /></div>



<div class="text4">
Öffnungszeiten
</div


><div class="text3">

Montag bis Freitag&nbsp;&nbsp;&nbsp;8:00-18:30 Uhr
<br />
Samstag&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9 Uhr-18:30 Uhr
<br />
Sonntag&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10:00-18:30 Uhr<br />
</div>

<div class="impressum_abschluss"><img src="bilder/a_impressum.png" /></div>





















</div>




</div>

</body>
</html>

Micha8583 · 08.04.2011

AW: Buttons funkionieren nicht im Internet Explorer

Kann es sein, daß bei deinen Explorereinstellungen (Internetoptionen) die Funktion "Javascript" deaktiviert ist?
Auf den ersten Blick fehlen noch die <body> </body> und <html> </html> tags. kann also sein, daß der IE sich weigert, den code auszufüren, weil du dich noch im Deklarationsteil befindest.
Gruß,
Michael.

Mway · 09.04.2011

AW: Buttons funkionieren nicht im Internet Explorer

Du musst natürlich deinem Link auch einen Text geben sonst ist ja nichts da zum klicken

<div class="rundgang"><a href="rundgang.html">hier der linkname</a></div>

oder so wie du es geschrieben hast müsste es heißen

<div class="konditorei"><a href="konditorei.html"><div class="konditorei">oder hier der link wie du willst</div></a></div>

aber warum im div noch ein div ist versteh ich nicht so ganz aber du hast bestimmt deine Gründe

vincitore · 09.04.2011

AW: Buttons funkionieren nicht im Internet Explorer

Hi,

Erstens: pack den CSS Code besser in den Bereich zw. <head> und </head>

Zweitens:

Code:

<div class="rundgang"><a href="rundgang.html"><div class="rundgang"></div></a></div>

Doppelt gemoppelt hällt nicht immer besser!
Mach einfach das ganze so in der Art:

HTML:

<div id="navigation">
	<a href="link1" id="produkte" class="noText">Produkte</a>
	<a href="link2" id="rundgang" class="noText">Rundgang</a>
</div>

dann legst du noch eine class "noText" an, damit der Text nicht angezeigt wird, sondern nur die Hintergrundbilder, die könnte z.B. so aussehen:

Code:

.noText {
	text-indent: -9999px;
	font-size: 1px;
	overflow: hidden;
	color: #ebebeb;
}

und machst deine ganzen Linkformatierungen, bezogen auf die ids die du den Links gibst
z.B. würde das für deinen CSS-Code so aussehen (warum du z-index benutzt, weiß ich grad nicht aber ich übernehms mal ;D)

Code:

a#rundgang  {
	position:relative;
	left:350px;
	top:-316px;
	width:127px;
	height:118px;
	z-index:1;
	background-image: url(bilder/a_rundgang.png);
}
a#rundgang:hover {
	position:relative;
	left:350px;
	top:-316px;
	width:127px;
	height:118px;
	z-index:1;
	background-image: url(bilder/a_rundgang_press.png);
}

Micha8583 schrieb:
Kann es sein, daß bei deinen Explorereinstellungen (Internetoptionen) die Funktion "Javascript" deaktiviert ist?
Auf den ersten Blick fehlen noch die <body> </body> und <html> </html> tags. kann also sein, daß der IE sich weigert, den code auszufüren, weil du dich noch im Deklarationsteil befindest.
Gruß,
Michael.

Also bei dem Code benutzt er gar nicht den js und die HTML und BODY tags sind soweit ichs seh auch da.

Gruß
Vincitore

fakerer · 09.04.2011

AW: Buttons funkionieren nicht im Internet Explorer

wie schon erwähnt mag der ie die divs nicht in den Links.
Du könntest zB ach einfach Onclickereignisse in die Divs setzen für den ie
Ist zwar ne hässliche Lösung aber als schnelle Lösung würde es klappen

mc_jedi · 19.04.2011

AW: Buttons funkionieren nicht im Internet Explorer

Problem müsste, wie bereits gesagt, dein div-Tag innerhalb des Verweises sein. Auch in HTML gibt es bestimmte Regeln und Abhängikeiten. Eine besagt, dass innerhalb einer Link-Notation nur Inline-Elemente vorkommen dürfen. <div> ist jedoch ein Block-Element.

Wenn du unbedingt ein Element an dieser Stelle benötigst, könntest du es mit <span> versuchen. Das ist ein (soweit mir bekannt) eigenschaftsloses Inline-Element. Aber Vorsicht: Der IE hat sowieso seinen eigenen Regeln!

Besser du testest deine Seiten immer mit allen aktuellen Browsern, da diese Inhalte durchaus unterschiedlich darstellen. Die große Kunst ist es, die Seite für alle Browser gleich aussehen zu lassen.

Du solltest die Seiten auch ruhig mit unterschiedlichen Versionen eines Browsers anschauen (z.B. IE7, IE8, IE9). Du solltest auf jeden Fall IE, Firefox, Opera, Chrome und Safari zum Testen verwenden.

Webbrowser – Wikipedia

Myhar · 20.04.2011

AW: Buttons funkionieren nicht im Internet Explorer

mc_jedi schrieb:
Wenn du unbedingt ein Element an dieser Stelle benötigst, könntest du es mit <span> versuchen. Das ist ein (soweit mir bekannt) eigenschaftsloses Inline-Element. Aber Vorsicht: Der IE hat sowieso seinen eigenen Regeln!

Wollte nur anmerken, dass das <span> Element im <a> Problemlos möglich ist (so schlimm ist nicht einmal der IE ;-) )
Aber ich würde trotzdem die Lösung von vincitore bevorzugen, weil man dort ohne zusätzliches Markup auskommt.

L. G.

Atomine · 23.04.2011

AW: Buttons funkionieren nicht im Internet Explorer

hallo ihr!! Vielen Dank für eure Antworten! ja es lag an den zusätzlichen div-tags in der verlinkung..
bloß ich musste das machen, weil ich das Image oben im CSS definiert habe, um einen Hover-Effekt zu erzielen.. wenn ich das Image in der verlinkung direkt angebe, geht das mit dem Hover leider nicht..

MyBad · 23.04.2011

AW: Buttons funkionieren nicht im Internet Explorer

Du kannst im CSS auch dem a-Tag das Bild zuweisen. Dafür braucht es keine zusätzlichen Divs.

vincitore · 24.04.2011

AW: Buttons funkionieren nicht im Internet Explorer

Atomine schrieb:
hallo ihr!! Vielen Dank für eure Antworten! ja es lag an den zusätzlichen div-tags in der verlinkung..
bloß ich musste das machen, weil ich das Image oben im CSS definiert habe, um einen Hover-Effekt zu erzielen.. wenn ich das Image in der verlinkung direkt angebe, geht das mit dem Hover leider nicht..

MyBad schrieb:
Du kannst im CSS auch dem a-Tag das Bild zuweisen. Dafür braucht es keine zusätzlichen Divs.

Siehe mein Beitrag!

Atomine · 25.04.2011

AW: Buttons funkionieren nicht im Internet Explorer

@vincitore

leider bin ich noch so sehr in den anfängerschuhen, dass ich deinen beitrag noch nicht richtig verstanden hatte, aber ich bin dabei ihn stück für stück durch zu arbeiten..
vielen dank auf jeden fall für deine mühe!
grüße

vincitore · 26.04.2011

AW: Buttons funkionieren nicht im Internet Explorer

Atomine schrieb:
@vincitore

leider bin ich noch so sehr in den anfängerschuhen, dass ich deinen beitrag noch nicht richtig verstanden hatte, aber ich bin dabei ihn stück für stück durch zu arbeiten..
vielen dank auf jeden fall für deine mühe!
grüße

Okay, ich versuchs noch mal einfacher zu erklären:

Das eigentliche Problem ist, dass ein <a ..> Tag in der Regel Text will.
Deshalb definierst du erst einmal den Link mit einem Text:

HTML:

<div id="navigation">
	<a href="link1" id="produkte" class="noText">Produkte</a>
	<a href="link2" id="rundgang" class="noText">Rundgang</a>
</div>

Wie du jetzt siehst, hab ich hier die nächsten Schritte schon eingebaut:
1. eine Klasse noText (du willst den Text ja später nicht sehen, sondern nur das Bild)
2. die ID Rundgang bzw. Produkte um Position und Hintergrundbild eindeutig zuzuweisen

So jetzt kommt der CSS Teil, denn der Link will noch den Text loswerden und ein Bild bekommen:

zu 1.

HTML:

.noText {
	text-indent: -9999px;
	font-size: 1px;
	overflow: hidden;
	color: #ebebeb; /*Hier die Hintergrundfarbe von der Seite, falls der Browser zu blöd ist ;)*/
}

zu 2. (ich machs nur kurz für einen, der andere ist analog dazu)

HTML:

a#rundgang  {
	width: 127px; 	/*Breite*/
	height: 118px;	/*Höhe*/
	display: block; 	/*Das Element wird als Block-Element dargestellt.*/
	background: url(bilder/a_rundgang.png) 0 0 no-repeat; /*Hintergrundbild*/
	position: absolute; /*Absolute Positionierung durch die Angaben left, top, right, bottom. Absolut positionierte Elemente sind außerhalb des normalen Textfluß, sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position wird relativ zu den Rändern des Eltern-Elements berechnet, wenn dieses ebenfalls positioniert ist, oder wenn es der Seiteninhalt (<body>) ist. Da sich der Seiteninhalt scrollen lässt, werden absolut positionierte Elemente mitgescrollt. */
	top: XX px; /*Will noch angepasst werden (Position des Elements)*/
	left: YY px; /*Will auch*/
}
a#rundgang:hover {
	width: 127px;
	height: 118px;
	display: block;
	background: url(bilder/a_rundgang_press.png) 0 0 no-repeat;
	position: absolute;
	top: XX px; /*Will noch angepasst werden*/
	left: YY px; /*Will auch*/
}

falls immernoch Frage auftauchen, einfach stellen

.

Gruß