Problem mit IE und Firefox

Der_Leo · 14.02.08

Hallo alle zusammen,

habe inzw. die Website für die ortsansässige FDP fertig, allerdings werden Ebenen bei Opera/Safari an der richtigen Stelle, beim IE und bei Firefox versetzt angezeigt, sodass am Ende das Layout nicht mehr hinhaut.

Wäre für eine Lösung sehr dankbar.

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=ISO-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body,td,th {
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
}
body {
	background-image: url(FDP_Website_Kandidaten.jpg);
	background-repeat: no-repeat;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: underline;
	color: #000000;
}
a:active {
	text-decoration: none;
	color: #000000;
}
#Layer1 {
	position:absolute;
	width:687px;
	height:482px;
	z-index:1;
	left: 163px;
	top: 166px;
}
#Layer2 {
	position:absolute;
	width:77px;
	height:17px;
	z-index:2;
	left: 418px;
	top: 102px;
}
#Layer3 {
	position:absolute;
	width:94px;
	height:16px;
	z-index:3;
	left: 157px;
	top: 440px;
}
#Layer4 {
	position:absolute;
	width:71px;
	height:17px;
	z-index:4;
	left: 432px;
	top: 199px;
}
#Layer5 {
	position:absolute;
	width:56px;
	height:16px;
	z-index:5;
	left: 215px;
	top: 517px;
}
#Layer6 {
	position:absolute;
	width:63px;
	height:16px;
	z-index:6;
	left: 120px;
	top: 439px;
}
#Layer7 {
	position:absolute;
	width:93px;
	height:17px;
	z-index:7;
	left: 149px;
	top: 419px;
}
#Layer8 {
	position:absolute;
	width:74px;
	height:16px;
	z-index:2;
	left: 37px;
	top: 183px;
}
#Layer9 {
	position:absolute;
	width:94px;
	height:16px;
	z-index:3;
	left: 39px;
	top: 213px;
}
#Layer10 {
	position:absolute;
	width:43px;
	height:16px;
	z-index:4;
	left: 39px;
	top: 243px;
}
#Layer11 {
	position:absolute;
	width:71px;
	height:16px;
	z-index:5;
	left: 37px;
	top: 273px;
}
#Layer12 {
	position:absolute;
	width:59px;
	height:15px;
	z-index:6;
	left: 39px;
	top: 303px;
}
#Layer13 {
	position:absolute;
	width:64px;
	height:15px;
	z-index:7;
	left: 37px;
	top: 333px;
}
#Layer14 {
	position:absolute;
	width:90px;
	height:18px;
	z-index:8;
	left: 37px;
	top: 361px;
}
#Layer15 {
	position:absolute;
	width:132px;
	height:33px;
	z-index:9;
	left: 207px;
	top: 253px;
}
.Stil2 {
	font-size: 14px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
.Stil4 {font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
#Layer16 {
	position:absolute;
	width:199px;
	height:35px;
	z-index:10;
	left: 207px;
	top: 294px;
}
#Layer17 {
	position:absolute;
	width:195px;
	height:34px;
	z-index:11;
	left: 207px;
	top: 336px;
}
#Layer18 {
	position:absolute;
	width:185px;
	height:34px;
	z-index:12;
	left: 207px;
	top: 380px;
}
#Layer19 {
	position:absolute;
	width:170px;
	height:33px;
	z-index:13;
	left: 207px;
	top: 424px;
}
#Layer20 {
	position:absolute;
	width:191px;
	height:30px;
	z-index:14;
	left: 207px;
	top: 467px;
}
#Layer21 {
	position:absolute;
	width:182px;
	height:34px;
	z-index:15;
	left: 207px;
	top: 510px;
}
#Layer22 {
	position:absolute;
	width:198px;
	height:35px;
	z-index:16;
	left: 207px;
	top: 553px;
}
#Layer23 {
	position:absolute;
	width:214px;
	height:36px;
	z-index:17;
	left: 207px;
	top: 598px;
}
#Layer24 {
	position:absolute;
	width:138px;
	height:35px;
	z-index:18;
	left: 547px;
	top: 252px;
}
#Layer25 {
	position:absolute;
	width:190px;
	height:35px;
	z-index:19;
	left: 547px;
	top: 292px;
}
#Layer26 {
	position:absolute;
	width:173px;
	height:35px;
	z-index:20;
	left: 547px;
	top: 336px;
}
#Layer27 {
	position:absolute;
	width:200px;
	height:35px;
	z-index:21;
	left: 547px;
	top: 294px;
}
#Layer28 {
	position:absolute;
	width:197px;
	height:35px;
	z-index:22;
	left: 547px;
	top: 379px;
}
#Layer29 {
	position:absolute;
	width:144px;
	height:36px;
	z-index:23;
	left: 547px;
	top: 423px;
}
#Layer30 {
	position:absolute;
	width:200px;
	height:35px;
	z-index:24;
	left: 547px;
	top: 465px;
}
#Layer31 {
	position:absolute;
	width:103px;
	height:35px;
	z-index:25;
	left: 547px;
	top: 509px;
}
#Layer32 {
	position:absolute;
	width:172px;
	height:35px;
	z-index:26;
	left: 547px;
	top: 553px;
}
#Layer33 {
	position:absolute;
	width:134px;
	height:35px;
	z-index:27;
	left: 547px;
	top: 598px;
}
#Layer34 {
	position:absolute;
	width:131px;
	height:38px;
	z-index:27;
	left: 549px;
	top: 600px;
}
#Layer35 {
	position:absolute;
	width:599px;
	height:51px;
	z-index:28;
	left: 163px;
	top: 183px;
}
#Layer36 {
	position:absolute;
	width:202px;
	height:17px;
	z-index:29;
	left: 664px;
	top: 155px;
}
#Layer37 {
	position:absolute;
	width:195px;
	height:58px;
	z-index:29;
	left: 382px;
	top: 638px;
}
#Layer38 {
	position:absolute;
	width:35px;
	height:34px;
	z-index:30;
	left: 164px;
	top: 253px;
}

-->
</style>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('Buttons/Startseite_rollover.jpg','Buttons/Kandidaten_rollover.jpg','Buttons/Ziele_rollover.jpg','Buttons/Termine_rollover.jpg','Buttons/Presse_rollover.jpg','Buttons/Kontakt_rollover.jpg','Buttons/Impressum_rollover.jpg')">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Startseite','','Buttons/Startseite_rollover.jpg',1)"></a>
<div id="Layer8"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Startseite','','Buttons/Startseite_rollover.jpg',1)"><img src="Buttons/Startseite.jpg" name="Startseite" width="72" height="14" border="0" id="Startseite" /></a></div>
<div id="Layer9"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kandidaten','','Buttons/Kandidaten_rollover.jpg',1)"><img src="Buttons/Kandidaten.jpg" name="Kandidaten" width="89" height="14" border="0" id="Kandidaten" /></a></div>
<div id="Layer10"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Ziele','','Buttons/Ziele_rollover.jpg',1)"><img src="Buttons/Ziele.jpg" name="Ziele" width="37" height="14" border="0" id="Ziele" /></a></div>
<div id="Layer11"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Termine','','Buttons/Termine_rollover.jpg',1)"><img src="Buttons/Termine.jpg" name="Termine" width="66" height="14" border="0" id="Termine" /></a></div>
<div id="Layer12"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Presse','','Buttons/Presse_rollover.jpg',1)"><img src="Buttons/Presse.jpg" name="Presse" width="55" height="14" border="0" id="Presse" /></a></div>
<p>&nbsp;</p>
<div id="Layer13"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakt','','Buttons/Kontakt_rollover.jpg',1)"><img src="Buttons/Kontakt.jpg" name="Kontakt" width="60" height="14" border="0" id="Kontakt" /></a></div>
<div id="Layer14"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Impressum','','Buttons/Impressum_rollover.jpg',1)"><img src="Buttons/Impressum.jpg" name="Impressum" width="87" height="17" border="0" id="Impressum" /></a></div>
<div id="Layer15"><span class="Stil2"><a href="gertsorgatz.html">Gert Sorgatz </a></span><span class="Stil4">Betriebsleiter, Greding </span></div>
<div id="Layer16"><span class="Stil2"><a href="maxnetter.html">Max Netter</a></span> <span class="Stil4">Bauunternehmer, Kreisrat, Oberm&auml;ssing, Greding</span>  </div>
<div id="Layer17"><span class="Stil2"><a href="http://www.marina-schuster.de/">Marina Schuster</a></span> <span class="Stil4">MdB, Dipl.-Kffr. Univ., Kreisr&auml;tin, Greding </span></div>
<div id="Layer18"><span class="Stil2">Franz Haas jun.</span> <span class="Stil4">Hotelkaufmann, Greding</span> </div>
<div id="Layer19"><span class="Stil2"><a href="drpeterwaltermann.html">Dr. Peter Waltermann</a> </span><span class="Stil4">Internist Dr. med., Greding</span> </div>
<div id="Layer20"><span class="Stil2"><a href="elisabethnetter.html">Elisabeth Netter</a></span><span class="Stil4"> kaufm. Angestellte, Oberm&auml;ssing, Greding </span></div>
<div id="Layer21"><span class="Stil2">Jorgo Fotopoulos </span><span class="Stil4">Angestellter, Greding </span></div>
<div id="Layer22"><span class="Stil2">Karlheinz Schuster </span><span class="Stil4">Hotelfachsch&uuml;ler, Greding </span></div>
<div id="Layer23"><span class="Stil2"><a href="marionetter.html">Mario Netter</a></span> <span class="Stil4">Dipl.-Ing. (FH), Bauingenieur, Oberm&auml;ssing, Greding </span></div>
<div id="Layer24"><span class="Stil2">Renate Batz</span> <span class="Stil4">Hausfrau, Greding </span></div>
<div id="Layer27"><span class="Stil2">Ingrid V&ouml;gele</span> <span class="Stil4">K&ouml;chin, Landerzhofen, Greding </span></div>
<div id="Layer26"><span class="Stil2">Franz Mendl</span> <span class="Stil4">Koch, Oberm&auml;ssing, Greding </span></div>
<div id="Layer28"><span class="Stil2">Elfriede Schuster </span><span class="Stil4">Gesch&auml;ftsf&uuml;hrerin, Greding</span> </div>
<div id="Layer29"><span class="Stil2">Herbert Schels</span> <span class="Stil4">Schreiner, Greding </span></div>
<div id="Layer30"><span class="Stil2">Leonhard Wastlhuber </span><span class="Stil4">Fleischermeister, Greding</span> </div>
<div id="Layer31"><span class="Stil2">Franz Batz</span> <span class="Stil4">Lagerist, Greding</span> </div>
<div id="Layer32"><span class="Stil2">Marion Wastlhuber </span><span class="Stil4">Arbeiterin, Greding </span></div>
<div id="Layer34"><span class="Stil2">Rosa Schels</span> <span class="Stil4">Hausfrau, Greding </span></div>
<div id="Layer35">F&uuml;r weitere Informationen zu den Kandidaten auf den entsprechenden Namen klicken. </div>
<div id="Layer37"></div>
<div id="Layer38">501</div>
</body>
</html>

mschoening · 14.02.08

Das hast du aber nicht selbst gecodet? Oder?

Der_Leo · 14.02.08

...weils ziemlich durcheinander ist oder warum?

mschoening · 14.02.08

Sieht so nach geslicetem Photoshop Layout aus und die Elemente sind nicht syntaktisch korrekt eingesetzt worden. Abgesehen davon ist alles mit "absoluten" Positionenen gecodet. Ich würde es selbst coden an deiner Stelle.

Der_Leo · 14.02.08

Nix Photoshop...habe die Bilder in Ebenen mithilfe von Dreamweaver eingefügt, also wenn, dann ist der Schuld. Gibt es denn keine andere Möglichkeit, als alles selbst nochmal zu coden?

mschoening · 14.02.08

Doch sicherlich. Aber macht das Sinn? So viel Arbeit ist das nicht. Poste doch mal ein Screenshot von dem Layout wie du es gerne hättest. Mal schaun was sich machen lässt.

Thanks,
Max

Der_Leo · 14.02.08

Also:

So siehts in Safari/Opera aus und solls ihm Endeffekt auch aussehen.

Danke schonmal für deine Hilfe.

mschoening · 14.02.08

Kennst du dich ein bisschen mit HTML und CSS aus? Damit ich weiss wie weit ich coden soll...

Der_Leo · 14.02.08

Jup, kenne mich mit beidem aus...bin kein wirkliches Genie, was CSS angeht, langt aber für das meiste.

Suche

Suche

Problem mit IE und Firefox

Der_Leo

Fießers Erstling

mschoening

Gelbe Schleswiger Reinette

Der_Leo

Fießers Erstling

mschoening

Gelbe Schleswiger Reinette

Der_Leo

Fießers Erstling

mschoening

Gelbe Schleswiger Reinette

Der_Leo

Fießers Erstling

mschoening

Gelbe Schleswiger Reinette

Der_Leo

Fießers Erstling

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)