Marc Schwarz: Falsche Darstellung in Firefox, Opera

Hallo

Ich habe folgende Seite:
http://www.anykeysolutions.ch/temp.html

Während der IE die Seite korrekt anzeigt (grauer Hintergrund wird oben 30px über den Text angezeigt) zeigen Firefox und Opera den grauen Hintergrund oben nicht.

Wo liegt der Fehler im Code?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Disclaimer</title>
<style type="text/css">
<!--
/* Generelle Styles */
* {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 margin: 0;
 padding: 0;
}
/* Generelle Styles */

/* Div Styles */
#div_content {
 background-color: #D7D7D7;
 height: 480px;
 width: 420px;
}
 #div_text {
  height: 420px;
  margin: 30px 5px 30px 30px;
  overflow: auto;
  padding-right: 20px;
  width: 365px;
 }
/* Div Styles */

/* tags Styles */
h1 {
 color: #152850;
 font-size: 20px;
 font-weight: normal;
 margin-bottom: 10px;
 margin-left: 30px;
 margin-top: 25px;
}
h2 {
 color: #8B960B;
 font-size: 12px;
 padding-bottom: 20px;
}
p {
 color: #323232;
 font-size: 12px;
 padding-bottom: 40px;
}
/* tags Styles */

/* link Styles */
a#link_1 {
 color: #152850;
 font-size: 12px;
 line-height: 25px;
 padding-left: 320px;
 text-decoration: none;
}
 a#link_1:hover {
  color: #8B960B;
 }
/* link Styles */
-->
</style>
</head>
<body>
<h1>Disclaimer</h1>
<div id="div_content">
  <div id="div_text">
    <h2>Inhalt des Onlineangebotes</h2>
    <p>Der Autor übernimmt keinerlei Gewähr für die Aktualität, Korrektheit, Vollständigkeit oder Qualität der bereitgestellten Informationen. Haftungsansprüche gegen den Autor, welche sich auf Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen, sofern seitens des Autors kein nachweislich vorsätzliches oder grob fahrlässiges Verschulden vorliegt. Alle Angebote sind unverbindlich. Der Autor behält es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen.</p>
    <h2>Verweise und Links</h2>
    <p>Bei direkten oder indirekten Verweisen auf fremde Webseiten ("Hyperlinks"), die außerhalb des Verantwortungsbereiches des Autors liegen, würde eine Haftungsverpflichtung ausschließlich in dem Fall in Kraft treten, in dem der Autor von den Inhalten Kenntnis hat und es ihm technisch möglich und zumutbar wäre, die Nutzung im Falle rechtswidriger Inhalte zu verhindern. Der Autor erklärt hiermit ausdrücklich, dass zum Zeitpunkt der Linksetzung keine illegalen Inhalte auf den zu verlinkenden Seiten erkennbar waren. Auf die aktuelle und zukünftige Gestaltung, die Inhalte oder die Urheberschaft der gelinkten/verknüpften Seiten hat der Autor keinerlei Einfluss. Deshalb distanziert er sich hiermit ausdrücklich von allen Inhalten aller gelinkten /verknüpften Seiten, die nach der Linksetzung verändert wurden. Diese Feststellung gilt für alle innerhalb des eigenen Internetangebotes gesetzten Links und Verweise sowie für Fremdeinträge in vom Autor eingerichteten Gästebüchern, Diskussionsforen und Mailinglisten. Für illegale, fehlerhafte oder unvollständige Inhalte und insbesondere für Schäden, die aus der Nutzung oder Nichtnutzung solcherart dargebotener Informationen entstehen, haftet allein der Anbieter der Seite, auf welche verwiesen wurde, nicht derjenige, der über Links auf die jeweilige Veröffentlichung lediglich verweist.</p>
  </div>
</div>
<a href="javascript:window.close()" id="link_1">Schliessen</a>
</body>
</html>

  1. Hallo.

    Ich habe folgende Seite:

    http://www.anykeysolutions.ch/temp.html

    Während der IE die Seite korrekt anzeigt (grauer Hintergrund wird oben 30px über den Text angezeigt) zeigen Firefox und Opera den grauen Hintergrund oben nicht.

    Es sieht ganz so aus, als lege der IE hier diffuse Interpretationen an den Tag; FF und Opera handeln korrekt.

    Wenn du über und unter dem Text 30 px grauen Bereich möchtest, must du dein div #text mit entsprechendem padding ausstatten. Dein CSS-Code ist nicht besonders sauber. Hier würde ich nacharbeiten. div #content scheint zB völlig überflüssig.

    MfG, Kungschu.

    1. Wenn du über und unter dem Text 30 px grauen Bereich möchtest, must du dein div #text mit entsprechendem padding ausstatten. Dein CSS-Code ist nicht besonders sauber. Hier würde ich nacharbeiten. div #content scheint zB völlig überflüssig.

      Ich hab's nun mit Padding gelöst, danke.

      Nur sehe ich nicht, was am CSS-Code "unsauber" sein soll. Wie soll ich das mit dem grauen Hintergrund sonst lösen? Was ausser dem div_content ist sonst nicht ok?

      1. Hallo.

        Gebe doch div#text den grauen Hintergrund.
        Etwa:

          
        #text {  
           width:420px;  
           height:460px;  
           padding:30px 20px 30px 20px;  
           background:#d7d7d7;  
           /*etc.*/  
        }  
        
        

        Die Links würde ich mit .class und nicht mit #id (lässt sich nämlich immer nur auf ein Element anwenden) formatieren.

          
        a.typ1 {}  
        a.typ2 {}  
        
        
          
        <a class="typ1" href=""></a>  
        <a class="typ2" href=""></a>  
        
        

        In deinem Fall scheint keins von beidem notwendig, da dur nur "ein Typ" von Verweisen hast.?

        MfG, Kungschu.

        1. Gebe doch div#text den grauen Hintergrund.

          Das könnte ich schon machen, dann scrollt der Text aber unschön bis zum Rand der Box. Ich möchte aber, das immer 30px oben und unten grau bleiben und nicht in den scroll miteinbezogen werden. Eine Lösung ohne 2 Div Boxen scheint mir nicht möglich.

          Die Links würde ich mit .class und nicht mit #id (lässt sich nämlich immer nur auf ein Element anwenden) formatieren.

          In deinem Fall scheint keins von beidem notwendig, da dur nur "ein Typ" von Verweisen hast.?

          Stimmt. Danke für den Tip. Ich habe nun die ID entfernt und die normale Pseudoklasse für den Link verwendet:

          <!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">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <title>Disclaimer</title>
          <style type="text/css">
          <!--
          * {
           font-family: Verdana, Arial, Helvetica, sans-serif;
           margin: 0;
           padding: 0;
          }
          #div_content {
           background-color: #D7D7D7;
           height: 420px;
           padding: 30px 5px 30px 30px;
           width: 385px;
          }
          #div_text {
           height: 420px;
           overflow: auto;
           padding-right: 20px;
           width: 365px;
          }
          h1 {
           color: #152850;
           font-size: 20px;
           font-weight: normal;
           margin: 25px 0px 10px 30px;
          }
          h2 {
           color: #8B960B;
           font-size: 12px;
           padding-bottom: 20px;
          }
          p {
           color: #323232;
           font-size: 12px;
           padding-bottom: 40px;
          }
          a {
           color: #152850;
           font-size: 12px;
           line-height: 25px;
           padding-left: 320px;
           text-decoration: none;
          }
          a:hover {
           color: #8B960B;
          }
          -->
          </style>
          </head>
          <body>
          <h1>Disclaimer</h1>
          <div id="div_content">
            <div id="div_text">
              <h2>Inhalt des Onlineangebotes</h2>
              <p>Der Autor übernimmt keinerlei Gewähr für die Aktualität, Korrektheit, Vollständigkeit oder Qualität der bereitgestellten Informationen. Haftungsansprüche gegen den Autor, welche sich auf Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen, sofern seitens des Autors kein nachweislich vorsätzliches oder grob fahrlässiges Verschulden vorliegt. Alle Angebote sind unverbindlich. Der Autor behält es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen.</p>
              <h2>Verweise und Links</h2>
              <p>Bei direkten oder indirekten Verweisen auf fremde Webseiten ("Hyperlinks"), die außerhalb des Verantwortungsbereiches des Autors liegen, würde eine Haftungsverpflichtung ausschließlich in dem Fall in Kraft treten, in dem der Autor von den Inhalten Kenntnis hat und es ihm technisch möglich und zumutbar wäre, die Nutzung im Falle rechtswidriger Inhalte zu verhindern. Der Autor erklärt hiermit ausdrücklich, dass zum Zeitpunkt der Linksetzung keine illegalen Inhalte auf den zu verlinkenden Seiten erkennbar waren. Auf die aktuelle und zukünftige Gestaltung, die Inhalte oder die Urheberschaft der gelinkten/verknüpften Seiten hat der Autor keinerlei Einfluss. Deshalb distanziert er sich hiermit ausdrücklich von allen Inhalten aller gelinkten /verknüpften Seiten, die nach der Linksetzung verändert wurden. Diese Feststellung gilt für alle innerhalb des eigenen Internetangebotes gesetzten Links und Verweise sowie für Fremdeinträge in vom Autor eingerichteten Gästebüchern, Diskussionsforen und Mailinglisten. Für illegale, fehlerhafte oder unvollständige Inhalte und insbesondere für Schäden, die aus der Nutzung oder Nichtnutzung solcherart dargebotener Informationen entstehen, haftet allein der Anbieter der Seite, auf welche verwiesen wurde, nicht derjenige, der über Links auf die jeweilige Veröffentlichung lediglich verweist.</p>
            </div>
          </div>
          <a href="javascript:window.close()">Schliessen</a>
          </body>
          </html>