Seite verhunzt, Darstellung nur im FF optimal

  • #1
R

R4mir3z

Bekanntes Mitglied
Themenersteller
Dabei seit
24.04.2005
Beiträge
508
Reaktionspunkte
0
Ort
Herne
Ich hab mal wieder eklatante Probleme mit einem neuen Homepage Projekt...
Da die Darstellung im toleranten Firefox so ist, wie sie sein sollte, im IE es gerade noch geht,
abgesehen davon, das die Navigationsleiste verschoben ist und es im Opera wie ein Puzzlespiel
aussieht, gehe ich mal davon aus, das ich quelltextmäßig sehr großen Mist gebaut habe ;D

Ausgangspunkt war der, in der Navigationsleiste Mouseover Frafiken mit einem Pulldown-menü
zu kombinieren. Mit Javascript eher suboptimal, aber was solls. Nun ist es so, das ich für jeden Unterpunkt
später eine andere Grafik verwende, sodass ich mir letztendlich irgendwas zusammengepfuscht habe, das es
wenigstens im firefox funktioniert...die gravierenden Fehler sind mir dann später aufgefallen.

->

Quellcode der index.htm

Code: 
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
[url]http://www.w3.org/TR/html4/loose.dtd>[/url]
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=iso-8859-1>
<title>Das Versuchskaninchen</title>
<!--[if lt IE 7.]>
<script defer type=text/javascript src=pngfix.js></script>
<![endif]-->
<style type=text/css>
<!--
body {
	background-image: url(bg.gif);
	font-family: Verdana, sans-serif;
	font-size: 14px;
	overflow: auto;
	padding: 0px;
	margin: 0px;
}

ul, li
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.menu
{
	position: absolute;
     z-index: 3;
	
}

.menu li
{
	width: 130px;
	float: left;
	
}

.menu a
{
	border: 0px solid #888;
	display: block;
	height: 30px;
	cursor: crosshair;
	
}

.menu a:hover
{
	
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7
{
	font-size: 12px;
	display: none;
	width: 130px;
	cursor: crosshair;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a, #smenu7a
{
	font-weight: normal;
	padding-top: 0px;
	border-top: 0px;
	cursor: crosshair;
}

-->
</style>
<script type=text/javascript>
<!--
function montre(id)
{
	with (document)
	{
		if (getElementById)
			getElementById(id).style.display =->block';
		else if (all)
			all[id].style.display =->block';
		else
			layers[id].display =->block';
	}
}

function cache(id)
{
	with (document)
	{
		if (getElementById)
			getElementById(id).style.display =->none';
		else if (all)
			all[id].style.display =->none';
		else
			layers[id].display =->none';
	}
}
//-->
</script>
</head>

<body>
<center>
 <br>
<table width=910 border=0>
 <tr>
  <td> </td>
  <td> </td>
  <td> </td>
  <td> </td>
  <td align=center valign=middle><img src=testbanner.jpg><br>
	
	<!-- Menüpunkt 1 -->
	
	<div class=menu>
 <ul>
  <li><a href=javascript:void(0); onmouseover=montre('smenu1'); onmouseout=cache('smenu1');>
		<span onMouseOver=test1.src='button2over.gif';onMouseOut=test1.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test1></a>
   <ul id=smenu1 onmouseover=montre('smenu1'); onmouseout=cache('smenu1');>
    <li><a href=# onMouseOver=test2.src='button2over.gif'; onMouseOut=test2.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test2></a></li>
    <li><a href=# onMouseOver=test3.src='button2over.gif'; onMouseOut=test3.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test3></a></li>
    <li><a href=></a></li>
   </ul>
  </li>

	<!-- Menüpunkt 2 -->
  <li><a href=javascript:void(0); onmouseover=montre('smenu2'); onmouseout=cache('smenu2');>
		<span onMouseOver=test4.src='button2over.gif';onMouseOut=test4.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test4></a>
  </li>
	
	<!-- Menüpunkt 3 -->
	<li><a href=javascript:void(0); onmouseover=montre('smenu3'); onmouseout=cache('smenu3');>
		<span onMouseOver=test5.src='button2over.gif';onMouseOut=test5.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test5></a>
   <ul id=smenu3 onmouseover=montre('smenu3'); onmouseout=cache('smenu3');>
    <li><a href=# onMouseOver=test6.src='button2over.gif'; onMouseOut=test6.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test6></a></li>
    <li><a href=></a></li>
   </ul>
  </li>

	<!-- Menüpunkt 4 -->
  <li><a href=javascript:void(0); onmouseover=montre('smenu4'); onmouseout=cache('smenu4');>
		<span onMouseOver=test7.src='button2over.gif';onMouseOut=test7.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test7></a>
  </li>
	
	<!-- Menüpunkt 5 -->
  <li><a href=javascript:void(0); onmouseover=montre('smenu5'); onmouseout=cache('smenu5');>
		<span onMouseOver=test8.src='button2over.gif';onMouseOut=test8.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test8></a>
   <ul id=smenu5 onmouseover=montre('smenu5'); onmouseout=cache('smenu5');>
    <li><a href=# onMouseOver=test9.src='button2over.gif'; onMouseOut=test9.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test9></a></li>
     <li><a href=# onMouseOver=test10.src='button2over.gif'; onMouseOut=test10.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test10></a></li>
		 <li><a href=# onMouseOver=test11.src='button2over.gif'; onMouseOut=test11.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test11></a></li>
		<li><a href=# onMouseOver=test12.src='button2over.gif'; onMouseOut=test12.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test12></a></li>
   </ul>
  </li>
	
	<!-- Menüpunkt 6 -->
  <li><a href=javascript:void(0); onmouseover=montre('smenu6'); onmouseout=cache('smenu6');>
		<span onMouseOver=test13.src='button2over.gif';onMouseOut=test13.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test13></a>
  </li>
	
	<!-- Menüpunkt 7 -->
  <li><a href=javascript:void(0); onmouseover=montre('smenu7'); onmouseout=cache('smenu7');>
		<span onMouseOver=test14.src='button2over.gif';onMouseOut=test14.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test14></a>
  </li>
	
</div>
	</td>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td> </td>
  <td> </td>
  <td> </td>
  <td> </td>
	<td align=center valign=middle background=bg1.jpg><img src=ellipse.png><br><img src=preload.gif></td>
  <td> </td>
  <td> </td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 
</table>
</center>
</body>
</html>


So und jetzt nehmt mich auseinander für meine Schandtat :D
ich bedanke mich schoneinmal im Voraus für eure Mühen....
 
  • #2
Also Opera hab ich jetz nicht getestet aber wenn du im css .menu
auf
{position: fixed;
stellst und nicht absolute geht das im IE.

<!------
Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:

absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat. Scrollt mit.
fixed = absolute Positionierung, gemessen am Viewport, d.h. am Browserfenster. Bleibt beim Scrollen stehen.
relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
 
  • #3
R4mir3z schrieb:
...
Da die Darstellung im toleranten Firefox so ist, wie sie sein sollte,...
Zum Vergrößern anklicken....
Nicht der Firefox ist tolerant, sondern der IE. Der Firefox orientiert sich sehr stark an den Standards (und das ist auch gut so), wogegen der IE Skriptfehler oft klaglos hinnimmt. Dies führt allerdings dazu, dass viele->'Webdesigner'', die ihre Seiten nur im IE kontrollieren, von den Fehlern gar nichts bemerken und sich auf diese Art unsauberes HTML verbreitet.
 
  • #4
Das mit position:fixed ist auch eher nicht so gewollt.
Jetzt ist zwar die Navigation auch im IE mittig, allerdings wenn du
jetzt ein menü aufklappst, wird die gesamte untere Tabelle mit nach unten verschoben.

BTW sagt der IE auch Fehler auf der Seite, demnach müssen noch fehler im Quellcode sein.
(Auch wenn ich mich relativ selten auf den IE verlasse)


Ja klar, der IE ist ein sehr komischer Browser, der ziemlich komische Webstandards beansprucht.
Da es allerdings im Opera auch nicht wirklich geht....
 
  • #5
Hab jetzt eine temporäre Lösung gefunden.

Code: 
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
[url]http://www.w3.org/TR/html4/loose.dtd>[/url]
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=iso-8859-1>
<title>Das Versuchskaninchen</title>
<!--[if lt IE 7.]>
<script defer type=text/javascript src=pngfix.js></script>
<![endif]-->
<style type=text/css>
<!--
body {
	background-image: url(bg.gif);
	font-family: Verdana, sans-serif;
	font-size: 14px;
	overflow: auto;
	padding: 0px;
	margin: 0px;
}

ul, li
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.menu
{
	position: absolute;
     z-index: 3;
	
}

.menu li
{
	width: 130px;
	float: left;
	
}

.menu a
{
	border: 0px solid #888;
	display: block;
	height: 30px;
	cursor: default;
	
}

.menu a:hover
{
	
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7
{
	font-size: 12px;
	display: none;
	width: 130px;
	cursor: default;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a, #smenu7a
{
	font-weight: normal;
	padding-top: 0px;
	border-top: 0px;
	cursor: default;
}

-->
</style>
<script type=text/javascript>
<!--
function montre(id)
{
	with (document)
	{
		if (getElementById)
			getElementById(id).style.display =->block';
		else if (all)
			all[id].style.display =->block';
		else
			layers[id].display =->block';
	}
}

function cache(id)
{
	with (document)
	{
		if (getElementById)
			getElementById(id).style.display =->none';
		else if (all)
			all[id].style.display =->none';
		else
			layers[id].display =->none';
	}
}
//-->
</script>
</head>

<body>
 <center>
 <br>

 <table cellspacing=0 cellpadding=0 width=910 border=0>
 <tr>
  <td width=910 height=200 background=testbanner.jpg></td>
 </tr>
 </table>
 <table cellspacing=0 cellpadding=0 width=910 border=0>
 <tr>
  <td align=left>
	
	<!-- Menüpunkt 1 -->

	
	<div class=menu>
 <ul>
  <li><a href=javascript:void(0); onmouseover=montre('smenu1'); onmouseout=cache('smenu1');>
		<span onMouseOver=test1.src='button2over.gif';onMouseOut=test1.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test1></a>
   <ul id=smenu1 onmouseover=montre('smenu1'); onmouseout=cache('smenu1');>
    <li><a href=# onMouseOver=test2.src='button2over.gif'; onMouseOut=test2.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test2></a></li>
    <li><a href=# onMouseOver=test3.src='button2over.gif'; onMouseOut=test3.src='button2out.gif'; target=_parent>

		<img src=button2out.gif border=0 name=test3></a></li>
    <li><a href=></a></li>
   </ul>
  </li>

	<!-- Menüpunkt 2 -->
  <li><a href=javascript:void(0); onmouseover=montre('smenu2'); onmouseout=cache('smenu2');>
		<span onMouseOver=test4.src='button2over.gif';onMouseOut=test4.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test4></a>

  </li>
	
	<!-- Menüpunkt 3 -->
	<li><a href=javascript:void(0); onmouseover=montre('smenu3'); onmouseout=cache('smenu3');>
		<span onMouseOver=test5.src='button2over.gif';onMouseOut=test5.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test5></a>
   <ul id=smenu3 onmouseover=montre('smenu3'); onmouseout=cache('smenu3');>
    <li><a href=# onMouseOver=test6.src='button2over.gif'; onMouseOut=test6.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test6></a></li>
    <li><a href=></a></li>

   </ul>
  </li>

	<!-- Menüpunkt 4 -->
  <li><a href=javascript:void(0); onmouseover=montre('smenu4'); onmouseout=cache('smenu4');>
		<span onMouseOver=test7.src='button2over.gif';onMouseOut=test7.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test7></a>
  </li>
	
	<!-- Menüpunkt 5 -->

  <li><a href=javascript:void(0); onmouseover=montre('smenu5'); onmouseout=cache('smenu5');>
		<span onMouseOver=test8.src='button2over.gif';onMouseOut=test8.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test8></a>
   <ul id=smenu5 onmouseover=montre('smenu5'); onmouseout=cache('smenu5');>
    <li><a href=# onMouseOver=test9.src='button2over.gif'; onMouseOut=test9.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test9></a></li>
     <li><a href=# onMouseOver=test10.src='button2over.gif'; onMouseOut=test10.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test10></a></li>
		 <li><a href=# onMouseOver=test11.src='button2over.gif'; onMouseOut=test11.src='button2out.gif'; target=_parent>

		<img src=button2out.gif border=0 name=test11></a></li>
		<li><a href=# onMouseOver=test12.src='button2over.gif'; onMouseOut=test12.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test12></a></li>
   </ul>
  </li>
	
	<!-- Menüpunkt 6 -->
  <li><a href=javascript:void(0); onmouseover=montre('smenu6'); onmouseout=cache('smenu6');>
		<span onMouseOver=test13.src='button2over.gif';onMouseOut=test13.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test13></a>

  </li>
	
	<!-- Menüpunkt 7 -->
  <li><a href=javascript:void(0); onmouseover=montre('smenu7'); onmouseout=cache('smenu7');>
		<span onMouseOver=test14.src='button2over.gif';onMouseOut=test14.src='button2out.gif'; target=_parent>
		<img src=button2out.gif border=0 name=test14></a>
  </li>
	
</div>
  </td>
 </tr>

 <tr>
  <td align=center valign=middle background=bg1.jpg><img src=ellipse.png><br><img src=preload.gif></td>
 </tr>
 </table>
 </center>
</body>
</html>

Im FF nach wie vor in Ordnung, im IE die Navigationsleiste mittig, allerdings leicht verbuggt.
 
Thema:

Seite verhunzt, Darstellung nur im FF optimal

ANGEBOTE & SPONSOREN

Neueste Themen

Statistik des Forums

Themen
113.840
Beiträge
707.965
Mitglieder
51.494
Neuestes Mitglied
Flensburg45
Oben