Kjell: Darstellung IE/Firefox unterschiedlich

SELF-Forum

Darstellung IE/Firefox unterschiedlich

Kjell Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo zusammen!

Ich habe ein wirklich kleines Problem:
http://www.mygh.de/lgnu/

Im IE 7 zeigt er mir alles korrekt an, im Firefox jedoch ist das Stadtbild zu hoch bzw. der Text zu niedrig und links im Menü unter dem ersten Punkt ist ein zu großer Abstand.

Ich denke, dass sich das Problem leicht lösen lässt?! Wenn mir jemand helfen könnte, wäre das toll, danke!

Hier der code:

<html>

<head>
<meta http-equiv="Content-Language" content="de">
<title>Lessing Gymnasium Neu-Ulm Alumni e.V.</title>
<style>
body{
background-image:url('bg.gif');background-repeat:repeat-y;background-color:#ededed
}
#Unternavigation, #whereami{
font-family:Arial,Helvetica,sans-serif;font-size:11px;position:relative;
}
#Unternavigation{margin-bottom:5px;margin-left:30px}
a:link{
color:#322F6D;text-decoration:none
}
a:hover{
color:#F4C414;text-decoration:none
}
a:visited{
color:#A9B1D7;text-decoration:none
}
a:link#nav{
color:#322F6D;text-decoration:none
}
a:visited#nav{
color:#322F6D;text-decoration:none
}
a:hover#nav{
color:#F4C414;text-decoration:none
}
#content{
font-family:Arial,Helvetica,sans-serif;font-size:12px;text-align:justify;position:relative;
}
</style>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">

<p><img border="0" src="schule_bg.jpg" width="202" height="177"></p>
<div style="position: absolute; width: 460px; height: 20px; z-index: 12; left: 290px; top: 124px" id="whereami">
 &nbsp;<a id="nav" href="http://www.volkswagen.de/">Home</a> &raquo;
 <a id="nav" href="http://www.volkswagen.de/">News</a> &raquo;
 <a href="http://www.volkswagen.de/">Lessing Gymnasium Neu-Ulm Alumni e.V.
 gegründet</a><br>
 <img border="0" src="horizontale_linie_460px.gif" width="460" height="1" style="margin-top:3px"></div>
<div style="position: absolute; width: 114px; height: 17px; z-index: 11; left: 761px; top: 156px" id="Ebene11">
<font style="font-size: 8pt; font-weight:700" face="Arial">Partner</font><font style="font-size: 7pt; font-weight:700" face="Arial">
&amp; </font><font style="font-size: 8pt; font-weight:700" face="Arial">Sponsoren</font></div>
<div style="position: absolute; width: 460px; height: 466px; z-index: 10; left: 290px; top: 156px" id="content">

<img border="0" src="alumni_gruendung.gif" width="420" height="20">
<div style="position: absolute; width: 435px; height: 235px; z-index: 1; left: 14px; top: 25px" id="Ebene12">
 <div style="float:right;margin-left:5px;margin-bottom:5px" id="Ebene13">
  <img border="0" src="Luftbild_Neu-Ulm.jpg" width="141" height="70"></div>
 <p>Herzlich Willkommen auf der Webseite des Lessing-Gymnasium Neu-Ulm Alumni
 Vereins!<br>
 Wir sind ein sehr junger Verein, der es sich zur Aufgabe gemacht hat, den
 Kontakt unter den Absolventen des Lessing-Gymnasiums Neu-Ulm zu erhalten und
 zu fördern. Dies geschieht sowohl intergenerativ als auch jahrgangsintern.
 Bitte nutzen Sie diese Webseite, um sich umfassend zu informieren…<br>
 …sollten Sie Fragen, Anregungen oder Kritik haben zögern Sie nicht uns zu
 kontaktieren.</div>
<p></div>
<div style="position: absolute; width: 114px; height: 394px; z-index: 1; left: 761px; top: 181px" id="Ebene10">
<font face="Arial"><span style="font-size: 8pt; ">Sparkasse NU</span><span style="font-size: 8pt; font-weight: 700"><br>
<img border="0" src="spknu.jpg" width="114" height="37"></span></font><p><font face="Arial" style="font-size: 8pt">
Stadt Neu-Ulm<span style="font-weight: 700"><br>
<img border="0" src="neu_ulm.gif" width="114" height="46"></span></font></div>
<div style="position: absolute; width: 150px; height: 424px; z-index: 9; left: 128px; top: 181px" id="Ebene7">
 <p>
 <img border="0" src="lgnu_alumni.gif" width="150" height="20"><div id="Unternavigation">
  <a id="nav" href="http://www.volkswagen.de/">Leitmotiv</a><br>
  <a id="nav" href="http://www.volkswagen.de/">Satzung</a><br>
  <a id="nav" href="http://www.volkswagen.de/">Vereinsstruktur</a><br>
  <a id="nav" href="http://www.volkswagen.de/">Organisation</a></div>
 <img border="0" src="mitglieder.gif" width="150" height="20"><br>
 <div id="Unternavigation">
  <a id="nav" href="http://www.volkswagen.de/">Aktuell</a><br>
  <a id="nav" href="http://www.volkswagen.de/">Intern</a></div>
 <img border="0" src="events.gif" width="150" height="20"><div id="Unternavigation">
  <a id="nav" href="http://www.volkswagen.de/">Projekte</a><br>
  <a id="nav" href="http://www.volkswagen.de/">Veranstaltungen</a></div>
 <img border="0" src="lessing_gym.gif" width="150" height="20"><div id="Unternavigation">
  <a id="nav" href="http://www.volkswagen.de/">Grußwort des Direktors</a><br>
  <a id="nav" href="http://www.volkswagen.de/">Gemeinsame Projekte</a><br>
  <a id="nav" href="http://www.volkswagen.de/">Co-Teaching Konzept</a></div>
  <img border="0" src="foerderer.gif" width="150" height="20"><div id="Unternavigation">
  <a id="nav" href="http://www.volkswagen.de/">Sponsoren</a><br>
  <a id="nav" href="http://www.volkswagen.de/">Studienkredit</a></div>
  <img border="0" src="kontakt.gif" width="150" height="20"><div id="Unternavigation">
  <a id="nav" href="http://www.volkswagen.de/">Ansprechpartner</a><br>
  <a id="nav" href="http://www.volkswagen.de/">Impressum</a></div></div>
<div style="background-color:white;position: absolute; width: 413px; height: 20px; z-index: 3; left: 384px; top: 98px" id="Ebene6">
&nbsp;</div>
<p>&nbsp;</p>

<div style="position: absolute; width: 100px; height: 100px; z-index: 6; left: 523px; top: 44px" id="Ebene3">
  <img border="0" src="thema.gif" width="353" height="50"></div>
 <div style="position: absolute; width: 100px; height: 100px; z-index: 2; left: 389px; top: 13px" id="Ebene5">
  <img border="0" src="2007.gif" width="281" height="104"></div>

<div style="background-color:#cccccc; position: absolute; width: 487px; height: 2px; z-index: 5; left: 390px; top: 97px; font-size:1px" id="Ebene2">
 <p></div>

<div style="position: absolute; width: 100px; height: 85px; z-index: 8; left: 145px; top: 30px" id="Ebene1">
 <img border="0" src="lgnu_alumni_schein.gif" width="129" height="82"></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</body>

</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Darstellung IE/Firefox unterschiedlich

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    Im IE 7 zeigt er mir alles korrekt an, im Firefox jedoch ist das Stadtbild zu hoch bzw. der Text zu niedrig

    Im Firefox ist die Darstellung korrekt - Du gibst keinen Wert für margin-top des Absatzes vor, also gilt der aus dem browser-internen Stylesheet. Und der ist halt bei IE anders als bei Firefox.

    Da das Luftbild nicht im Absatz liegt, sondern in einem zusätzlichen div, gilt natürlich der margin-top des Absatzes nicht für das Bild.

    und links im Menü unter dem ersten Punkt ist ein zu großer Abstand.

    Das dürfte der margin-bottom des Absatzes sein, der um das lgnu_alumni.gif liegt.

    In dem div-Gewusel mit der vielen Positioniererei ist es aber nicht wirklich leicht, sich zurechtzufinden.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Darstellung IE/Firefox unterschiedlich

      mika
      – Informationen zu den Bewertungsregeln

      Nimm den halben Absatztag in Zeile 71 (der macht den Abstand nach oben) raus und den in 104 (was willst du damit direkt vor dem '< / d i v >'?). Die Bilder werden bei mir richtig angezeigt. Abstaende macht man besser mit Zeilenumbruch und '& n b s p;', wenn es nur um eine Zeile geht.  Leere Absätze sind eigentlich Unfug.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Darstellung IE/Firefox unterschiedlich

        Struppi Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Abstaende macht man besser mit Zeilenumbruch und '& n b s p;', wenn es nur um eine Zeile geht.  Leere Absätze sind eigentlich Unfug.

        Das ist auch ziemlicher Unfug. Abstände werden mit margin oder padding realsiert, dazu ist kein überflüssiges Element nötig.

        Struppi.

        --
        Javascript ist toll (Perl auch!)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Darstellung IE/Firefox unterschiedlich

          mika
          – Informationen zu den Bewertungsregeln

          Abstaende macht man besser mit Zeilenumbruch und '& n b s p;', wenn es nur um eine Zeile geht.  Leere Absätze sind eigentlich Unfug.

          Das ist auch ziemlicher Unfug. Abstände werden mit margin oder padding realsiert, dazu ist kein überflüssiges Element nötig.

          Struppi.

          Im Prinzip hast du recht, aber wenn du nur unformatierten Text hast oder innerhalb eines Absatzes bist, ist es egal. Bevor du anfängst mit div einen Bereich zu formatieren und umständlich die Grenzen zu definieren, wenn du bloß eine Leerzeile haben willst... Aber gut, jedem das Seine ;-)

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. Darstellung IE/Firefox unterschiedlich

        Kjell
        – Informationen zu den Bewertungsregeln

        Danke für eure Antworten!!!

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Darstellung IE/Firefox unterschiedlich

    Struppi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Ich habe ein wirklich kleines Problem:

    Wenn ich mir den Code anschaue, eher ein größeres.

    Im IE 7 zeigt er mir alles korrekt an, im Firefox jedoch ...

    Das ist i.d.R. ein untrügliches Zeichen das du was falsch gemacht hast. Der IE ist selbst in seiner neustens Version immer noch nicht so gut was die CSS Darstellung angeht. Der bessere Weg ist, erst die Darstellung so umsetzten, dass sie in Firefox und/oder Opera aussieht wie gewünscht und dann die Fehler in der Darstellung des IEs beseitgen.

    Hier der code:

    <html>

    Wo ist der DOCTYPE?
    Allein das führt schon dazu, dass du die Browser in den "Ratemodus" versetzt.

    <head>
    <meta http-equiv="Content-Language" content="de">
    <title>Lessing Gymnasium Neu-Ulm Alumni e.V.</title>

    Es fehlt auch noch eine Charsetangabe damit du z.b. Umlaut im Text verwenden darfst.

    <style>
    body{
    background-image:url('bg.gif');background-repeat:repeat-y;background-color:#ededed

    Viele CSS Angaben lassen sich zusammenfassen, wie z.b. diese:
    background: url('bg.gif') repeat-y #ededed;

    <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">

    Das sind veraltete und mittlerweile ungültige Angaben, die sich mit CSS leichter umsetzen lassen.

    <div style="position: absolute; width: 460px; height: 20px; z-index: 12; left: 290px; top: 124px" id="whereami">

    Warum verwendest du hier inline Styles?
    Du hast eine ID und kannst die CSS Angaben problemlos in den Header (oder besser in eine externe Datei verfrachten). Einer der Vorteile von CSS ist, dass man das Design zentral an einer Stelle angeben kann und so sehr leicht Änderungen vornehmen kann.

    Dann ist das arbeiten mit positionierten Elementen nicht zu empfehlen und in deinem Beispiel auch gar nicht nötig. Man kann Elemente sehr gut und wesentlich flexibler mit margin und padding anordenen

    <img border="0" src="horizontale_linie_460px.gif" width="460" height="1" style="margin-top:3px"></div>

    Das ist eine Technik aus der Steinzeit des HTML Designs, wenn du eine Linie um einen Bereich machen willst, geht das einfach mit border oder für einen Absatztrenner verwende ein hr Element.

    <div style="position: absolute; width: 114px; height: 17px; z-index: 11; left: 761px; top: 156px" id="Ebene11">
    <font style="font-size: 8pt; font-weight:700" face="Arial">Partner</font><font style="font-size: 7pt; font-weight:700" face="Arial">
    &amp; </font><font style="font-size: 8pt; font-weight:700" face="Arial">Sponsoren</font></div>

    Das ist schlimm
    Das font Tag ist lange nicht mehr erwünscht und ist auch überflüssig. Du kannst mit CSS sowas lesbarer, eleganter, flexibler und mit weniger Code umsetzen.

    ... und so geht's weiter, du solltest dich mit CSS etwas mehr auseinandersetzen.

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln