Phil: Im Moz zu sehn im IE garnicht erst vorhanden

Hey Leute.

Besucht diese Seiter mal bitte mit dem Moz und einmal mit dem IE.

Im IE fehlt der schwarze Bereich und die Linie geht nicht ganz durch.
Woran liegt das?

Hier der kleine Quellcode.

-------------------
index.php
------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>PhilZ - Philipp Zentner - Willkommen!</title>
  <link rel="stylesheet" type="text/css" href="css/basis.css">
 </head>
<body>
<div id="d1">
 <div id="d2">
  <img src="img/header.jpg" alt="PhilZ">
  <hr id="d2hr1">
 </div>
</div>
</body>
</html>

--------------
basis.css
-------------
body     { text-align:center; background-color:#b9c577 }
#d1      {
       text-align:center;
       margin-left:auto;
       margin-right:auto;
       max-width:50em;
       background-color:#000000;
       width:45em;
       height:50em;
      }
#d2      {
       text-align:center;
       margin-left:auto;
       margin-right:auto;
       max-width:38.385em;
       background-color:#999999;
       width:38.385em;
       height:50em;
      }
#d2hr1     {
       width:38.385em;
      }

Ich verstehs einfach nicht.

(o)mfg

Phil

  1. Ich vergaß.. hier der Link
    http://lmg.byto.de/PHIL/TEST/index.php

  2. Hallo,

    Im IE fehlt der schwarze Bereich und die Linie geht nicht ganz durch.
    Woran liegt das?

    Hier der kleine Quellcode.


    index.php

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <title>PhilZ - Philipp Zentner - Willkommen!</title>
      <link rel="stylesheet" type="text/css" href="css/basis.css">
    </head>
    <body>
    <div id="d1">
    <div id="d2">
      <img src="img/header.jpg" alt="PhilZ">
      <hr id="d2hr1">
    </div>
    </div>
    </body>
    </html>


    basis.css

    body     { text-align:center; background-color:#b9c577 }
    #d1      {
           text-align:center;
           margin-left:auto;
           margin-right:auto;
           max-width:50em;
           background-color:#000000;
           width:45em;
           height:50em;
          }
    #d2      {
           text-align:center;
           margin-left:auto;
           margin-right:auto;
           max-width:38.385em;
           background-color:#999999;
           width:38.385em;
           height:50em;
          }
    #d2hr1     {
           width:38.385em;
          }

    Ich verstehs einfach nicht.

    Der IE interpretiert overflow:visible (das ist die Standardeinstellung) für Dein #d2 falsch. Wenn Das Bild <img src="img/header.jpg" alt="PhilZ"> breiter ist als Das DIV, dann erweitert der IE die Breite des DIV. Geckos machen es richtig und lassen das Bild aus dem DIV herausragen. Da aber beides sicher nicht gewollt ist, solltest Du einen passenderen Wert für overflow angeben (siehe auch http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow).

    Was willst Du eigentlich mit Deinen max-width Angaben bezwecken?

    viele Grüße

    Axel

    1. Hallo,

      solltest Du einen passenderen Wert für overflow angeben (siehe auch http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow).

      Wie ich grad sehe, willst Du ja eine möglichst flexible Darstellung erreichen. Dann solltest Du eher das Bild als Hintergrund einbinden, dann wird es automatisch ab DIV-Ende nicht mehr dargestellt, und overflow auf visible belassen.

      viele Grüße

      Axel

      1. Tach,

        Wie ich grad sehe [...]

        um so etwas zu vermeiden, lohnt es sich, immer nur einen Thread gleichzeitig offen zu haben: In https://forum.selfhtml.org/?t=133480&m=864953 fing alles an.

        mfg
        Woodfighter