Seite verhunzt, Darstellung nur im FF optimal

Dieses Thema Seite verhunzt, Darstellung nur im FF optimal im Forum "Webentwicklung, Hosting & Programmierung" wurde erstellt von R4mir3z, 29. Juli 2006.

Thema: Seite verhunzt, Darstellung nur im FF optimal Ich hab mal wieder eklatante Probleme mit einem neuen Homepage Projekt... Da die Darstellung im toleranten Firefox...

  1. 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.

    -> http://home.arcor.de/swordfishzero/Versuchskaninchen/

    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. 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.
     
Die Seite wird geladen...

Seite verhunzt, Darstellung nur im FF optimal - Ähnliche Themen

Forum Datum
Seitendarstellung fehlerhaft Windows 7 Forum 16. Feb. 2016
IE 11 zeigt keine Seiten an Web-Browser 9. Dez. 2015
Kamera "Rutscht" zur Seite in Spielen Windows 10 Forum 30. Juli 2015
Nach der Anmeldung nicht die Startseite zeigen Windows 10 Forum 4. Juni 2015
Fehler beim öffnen von https-Seiten Software: Empfehlungen, Gesuche & Problemlösungen 13. Mai 2015