Phil: Unterschiede zwischen IE 7und Firefox 2

Hallo,

unter Verwendung untenstehender HTML / CSS code, bekomme ich eine Abweichung im Renderingergebnis beider Browser (h3 ist bei Firefox leicht nach unten verrutscht).

Kennt jemand von euch ein Firefox-Hack hierfür?
Ideen?

Gruß und Danke
Phil

<! -- Bitte ab hier kopieren -->
<html>
<head>
</head>
<body>
<div style="font-size: 120%; color: #767676; margin: 0 auto; width: 970px; min-height: 600px; padding-bottom: 20px; background-image: url(../images/topbg.png); background-repeat: repeat-x; background-color: white; border: 2px solid white;">
 <div style="float: right; width: 260px; margin: 0 10px 0 0;">
  <div style="/*background: #f5f5f5; */ color: #414141; padding: 10px; margin: 0 2px 3px 0;">
   <div style="width: 220px; color: #808496; border: 1px solid #CCCCCC; padding: 0; margin-bottom: 20px;">
    <div>
     <div>
      <div>
  <h3 style="font-size:100%; font-weight: bold; color: #2681ba; background-image: url(h3_bg.png); background-repeat: x-repeat; height: 22px; padding: 10px 0px 0px 10px; border: 1px solid #CCCCCC;">BEREICHE</h3>
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody><tr align="left"><td><a href="#" class="mainlevel_mmenu" id="active_menu_mmenu">Home</a></td></tr>
  <tr align="left"><td><a href="#">Menu 1</a></td></tr>
  <tr align="left"><td><a href="#">Menu 2</a></td></tr>
  <tr align="left"><td><a href="#">Menu 3</a></td></tr>
  <tr align="left"><td><a href="#">Menu 4</a></td></tr>
  </tbody></table>
   </div>
  </div>
 </div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

<! -- Bitte bis hier kopieren -->

  1. hi,

    unter Verwendung untenstehender HTML / CSS code, bekomme ich eine Abweichung im Renderingergebnis beider Browser (h3 ist bei Firefox leicht nach unten verrutscht).

    Bitte erst mal den Code korrigieren (Doctype-Deklaration fehlt, Browser gehen daher in den Quirks Mode), und anschliessend Code validieren.

    Ausserdem sieht das nach ziemlich dicker Div-Suppe aus, und eine Menü will auch nicht in eine Tabelle gequetscht, sondern als das ausgezeichnet werden, was es ist - eine Liste von Links.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hi Wahsaga,

      ja, das mit der div Suppe stimmt schon, entspricht leider die Ausgabe
      die Joomla fürs Menue-Modul erzeugt :-(

      Sollte aber nur exemplarisch dienen, im Prinzip ist es egal was ich da rein packe.

      Danke für den Typ mit der Doctype-Deklaration, momentan sieht diese so aus:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

      Gruß

      hi,

      unter Verwendung untenstehender HTML / CSS code, bekomme ich eine Abweichung im Renderingergebnis beider Browser (h3 ist bei Firefox leicht nach unten verrutscht).

      Bitte erst mal den Code korrigieren (Doctype-Deklaration fehlt, Browser gehen daher in den Quirks Mode), und anschliessend Code validieren.

      Ausserdem sieht das nach ziemlich dicker Div-Suppe aus, und eine Menü will auch nicht in eine Tabelle gequetscht, sondern als das ausgezeichnet werden, was es ist - eine Liste von Links.

      gruß,
      wahsaga

      1. hi,

        dann fehlt ja nur noch der Hack. Such abe rlieber nacheinem fuern IE. Damit duerfteste Erfolg haben. (Hack fuern Firefox... tsts *kopschuettel* DU suchst n Hack damits der Browser falsch anzeigt?)

        1. hi,

          dann fehlt ja nur noch der Hack. Such abe rlieber nacheinem fuern IE. Damit duerfteste Erfolg haben. (Hack fuern Firefox... tsts *kopschuettel* DU suchst n Hack damits der Browser falsch anzeigt?)

          In Ordnung, habe ich wohl falsch formuliert :-)
          Aber genau das wollte ich in meinem urprünglichen Post erfahren: kennst Du oder jemand der richtige Hack dafür?

          1. Sischer dat!

            Hab ich gestern (mal wieder) hier erklaert. Und ne kleine suche im Forum und/oder dem internet haette dich auch weitergebracht. Natuerlich wirst du nicht wissen dass du nach Boxmodelbug o.ae. suchen musst. ;)

            Viel Erfolg!

            1. Hallo und vielen Dank erst einmal

              also, die Boxmodelbug-Problematik war mir durchaus schon geläufig, jedoch konnte ich das von mir geschilderte Problem bisher nicht damit in Verbindung bringen.

              Ansonsten schauen wir mal der folgenden Code an:

              ---
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
              <head>
              <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
              <title>Test</title>
              </head>
                <body>
                 <div style="width:300px; border: 1px solid black; background-color: #cccccc;">
                  <h3 style="background-color:#888888;">H3 Header</h3>
                  <ul>
                    <li>li Item 1</li>
                    <li>li Item 2</li>
                  </ul>
                 </div>
                </body>
              </html>
              ---

              DOCTYPE Definition ist vorhanden, Page-Validierung ohne Fehler, der Output sieht wie folgt aus (bitte folgendes Bild anschauen):

              http://allyoucanupload.webshots.com/v/2000836385476919746[IMG]http://aycu29.webshots.com/image/18988/2000836385476919746_th.jpg]

              Woher um Himmels Willen kommen die 20 pixel oberhalb des H3 Tags bei Firefox? Keine Paddings oder Margins, nur eine Breiteangabe beim div Tag (width:300px;)

              Eigentlich macht es IE genau das was ich ihm sage, dieses Mal versagt Firefox gewaltig!

              Gruß

              Sischer dat!

              Hab ich gestern (mal wieder) hier erklaert. Und ne kleine suche im Forum und/oder dem internet haette dich auch weitergebracht. Natuerlich wirst du nicht wissen dass du nach Boxmodelbug o.ae. suchen musst. ;)

              Viel Erfolg!

              1. Hallo,

                Woher um Himmels Willen kommen die 20 pixel oberhalb des H3 Tags bei Firefox? Keine Paddings oder Margins, nur eine Breiteangabe beim div Tag (width:300px;)

                Wieso keine Margins?  Sehe ich da irgendwo margin:0; in deinem Code? Beachte, dass Browser ein Default-Styleshet haben. Insbesondere verursacht ein <hx> im Firefox standardmäßig ein bischen Abstand nach oben und unten.

                Jonathan

                1. Wieso keine Margins?  Sehe ich da irgendwo margin:0; in deinem Code? Beachte, dass Browser ein Default-Styleshet haben. Insbesondere verursacht ein <hx> im Firefox standardmäßig ein bischen Abstand nach oben und unten.

                  Danke, das war der entscheidenden Hinweis!
                  Schon wieder was neues gelernt...

                  1. Hoi

                    Danke, das war der entscheidenden Hinweis!
                    Schon wieder was neues gelernt...

                    Du weisst doch: Man lernt nie aus! :)

                    Sogar ich, der schon alles weiss, lernt jeden Tag was neues dazu... *shrug*

  2. unter Verwendung untenstehender HTML / CSS code, bekomme ich eine Abweichung im Renderingergebnis beider Browser (h3 ist bei Firefox leicht nach unten verrutscht).

    <html>

    Kennt jemand von euch ein Firefox-Hack hierfür?

    1. Nutze eine <http://de.selfhtml.org/css/formate/box_modell.htm#standardkonform@title=Dokumenttyp-Deklarationen für den standardkonformen Modus>.
    2. Es ist ein MSIE-Hack.

    Roland

    --
    Classic Rap: MP3 96k • AAC+ 24k • WMA 32k