Mozilla Vs. IE - Unterschiede im Layout

Mofps

Hey Leude,
Also wieder mal machen unterschiedliche Browser Stress. Folgendes:
Die Navi ist in Mozilla, NN, Opera usw. richtig postioniert, im IE jedoch nach unten verschoben.

Hier könnt ihr euch die Seite mal direkt angucken:

http://www.innografs.de

Und hier den Code:

HTML

<html>
<head>
<title>InnoGrafs</title>


<script type="text/javascript">
<!--
Normal1 = new Image();
Normal1.src = "willkommen.jpg";
Highlight1 = new Image();
Highlight1.src = "willkommeno.jpg";


Normal2 = new Image();
Normal2.src = "team.jpg";
Highlight2 = new Image();
Highlight2.src = "teamo.jpg";


Normal3 = new Image();
Normal3.src = "angebot.jpg";
Highlight3 = new Image();
Highlight3.src = "angeboto.jpg";


Normal4 = new Image();
Normal4.src = "referenzen.jpg";
Highlight4 = new Image();
Highlight4.src = "referenzeno.jpg";


Normal5 = new Image();
Normal5.src = "kontakt.jpg";
Highlight5 = new Image();
Highlight5.src = "kontakto.jpg";




function Bildwechsel(Bildnr,Bildobjekt) {
 window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>




<style>
A		    { font-weight:bold; text-decoration: none}
A:link 		{ color: ffffff; text-decoration: none}
A:visited 	{ color: ffffff; text-decoration: none}
A:hover 	{ color: ffffff; text-decoration: none}
</style>




</head>


<body background="bg2.jpg" bgproperties:="fixed" leftmargin="8" topmargin="9" marginwidth="8" marginheight="9">


 <table width="621" height="247" leftmargin="8" topmargin="9" marginwidth="8" marginheight="9" cellspacing="0"
  cellpadding="0" border="0">
  <tr>
   <td>
    <iframe src="header(willkommen).html" name="header" width="621" height="257" marginheight="0"
     marginwidth="0" frameborder="0" scrolling="no">
    </iframe>


   </td>
  </tr>
 </table>


   [img]spacer.gif[/img]






   <table width="621" height="30" border="0" cellpadding="0" cellspacing="0">
    <tr>


    <td>[url='index(willkommen).html'][img]willkommen.jpg[/img][/url]</td>


    <td>[url='index(team).html'][img]team.jpg[/img][/url]</td>


    <td>[url='index(angebot).html'][img]angebot.jpg[/img][/url]</td>


    <td>[url='index(referenzen).html'][img]referenzen.jpg[/img][/url]</td>


    <td>[url='index(kontakt).html'][img]kontakt.jpg[/img][/url]</td>


    </tr>
   </table>


   [img]spacer.gif[/img]


   <table width="621" height="250" border="0" cellpadding="0" cellspacing="0">
    <tr valign="top">
     <td>
      <iframe src="content(willkommen).html" name="content" width="390" height="230" marginheight="0"
       marginwidth="0" frameborder="0" scrolling="no">
      </iframe>
     </td>


     <td>
      <table width="200" height="230" border="0" cellpadding="0" cellspacing="0">
       <tr>
        <td align="right">
         <iframe src="navi(willkommen).html" name="navirechts" width="217" height="180" marginheight="0"
          marginwidth="0" frameborder="0" scrolling="no">
         </iframe>
        </td>
       </tr>


       <tr>
        <td>
        <font face="tahoma,helvetica" size="1" color="#000000">
        LogIn:
        Passwort:</font>


        <input name="plz" size="8">
        <input name="ort" size="13"></td>
        </td>
       </tr>
      </table>
     </td>
    </tr>


   </table>


</body>
</html>

Alles anzeigen

Danke
Moritz

Html-Neuling

? hab deine frage nicht verstanden
was willst du machen sry aba versteh das jetzt nicht

Ronald

Hi,

bei mir sehen die Seiten schon mal in beiden Browsern (Mozilla 1.6 Firefox & MSIE 6) ziemlich ähnlich aus.

Ich habe jedoch das gefühl, daß du gar nicht so recht weißt, was du da so in den Quelltext baust:

Code

<body background="bg2.jpg" bgproperties:="fixed" leftmargin="8" topmargin="9" marginwidth="8" marginheight="9">


 <table width="621" height="247" leftmargin="8" topmargin="9" marginwidth="8" marginheight="9" cellspacing="0"
  cellpadding="0" border="0">
  <tr>

Du mischt hier fleißig durcheinander, verwendest styles-Angaben ohne CSS zu definieren und baust Margins in eine Tabelle ein, wo sie nun wirklich nichts zu suchen haben.

Da kann es eigentlich nur zu Fehlinterpretationen durch die Browser kommen.

Du hast im Body-Tag für den IE-Explorer einen linken Rand von 8 Pixel und einen oberen Rand von 9 Pixel definiert. Om gleichen Tag definierst du das ganze dann noch einmal für Mozilla/Netscape mit oben und unten 9 Pixel und links und rechts mit 8 Pixel. Gleichzeitig versuchst du den Hintergrund zu fixieren, was jedoch nicht klappt, da es ":=" nicht gibt.

Versuche es einfach mal so:

Code

<body style="background-image:url(bg2.jpg); background-attachment:fixed; margin:8px; margin-top:9px">
 
<table width="621" height="247" cellspacing="0" cellpadding="0" border="0">
  <tr>
....

Den Body-Tag mußt du auch auf den anderen HTML-Seiten korrigieren, er erzeugt beim IE eine Fehlermeldung.

Gruß aus der Marsch!

Ronald

Moritz

Das funktioniert auch mit der Veränderung leider immer noch nicht. Ich hab kein plan.

Moritz

Hallo Mofps

Alsoo - nur mal so zur Information!!

Bei mir sieht die Seite ziemlich öde aus - weil wegen fehlenden Plug-ins.
Wenn du mit dieser site potenzielle Kunden werben möchtest würd ich's mir zweimal überlegen, mit Flash animation zu arbeiten, denn es wird sich keiner die Mühe machen den nötigen Plug-ins downzuloaden.
Wenn's nur just for fun ist: OK.

Wie gesagt, nur ein kleiner Tip.

Gruß Mike

Ronald

Du hast in der index.html immer noch Fehler drinnen:

HTML

<html>
<head>
<title>InnoGrafs</title>
</head>
<body onload="preloadImages();" background="bg.gif" leftmargin="0" topmargin="5" marginwidth="0">
<center>
 <iframe src="index(willkommen).html" name="main" width="638px" height="575px" marginheight="0"
   marginwidth="0" frameborder="0" scrolling="no">
 </iframe>
</body>
</html>

Alles anzeigen

Im Body-Tag rufst du mit "onload" eine Javascript-Funktion auf, die aber nirgends definiert ist.

Auch glaube ich nicht, daß es wirklich gut ist Dateinahmen mit Sonderzeichen zu verwenden >> "content(willkommen).html", es scheint aber zu funktionieren.

Der einzige Unterschied den ich bei den beiden Browsern sehe ist, daß bei Mozilla unter den Links noch ein weiße Linie folgt, beim IE jedoch nur ein weißer Punkt am linken Rand.

G.a.d.M.

Ronald

Tags