Zur Navigation

IE 6 vergrößert Boxen ohne zu Fragen

1 Marcel

Moin!

Ich hab folgendes Problem:
Ich möchte ein Website erstellen, die nur auf XHTML und CSS basiert. Dazu hab ich ein großes DIV als Seitencontainer benutzt, in dem dann oben links ein DIV für die Navigation und rechts daneben ein DIV für den Header. Darunter soll dann noch ein content DIV kommen.
Klingt ja alles gut und schön, aber wenn ich jetzt mein Headerbild, welches die gleiche Größe wie das Header-DIV hat, in eben diesen DIV-Container packe, dann erweitert der IE 6 diesen DIV-Container um ca 5px nach unten, wodurch allerdings eine hässliche weiße Zeile zwischen dem oberen Teil und dem content DIV entsteht.

Hier mal die CSS:

.container {
             margin:50px auto;
             border:1px solid;
             height:700px;
             width:760px;
            }

.left {
        float:left;
        height:189px;
        width:189px;
        background-color:rgb(255,0,0);
        border-right:1px solid;
        border-bottom:1px solid;
       }

.right {
          float:left;
          height:189px;
          width:570px;
          border-bottom:1px solid;
         }

.bottom {
          clear:both;
          height:349px;
          width:760px;
          background-color:rgb(0,255,0);
         }

und hier noch die HTML:


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title>ProLAN EDV-Service</title>
    
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  
  <body>
    <div class="container">
      <div class="left">
        <ul>
          <li><a href="index.html">Startseite</a></li>
          <li><a href="services.html">Leistungen</a></li>
          <li><a href="about.html">&Uuml;ber uns</a></li>
          <li><a href="contact.html">Kontakt</a></li>
          <li><a href="imprint.html">Impressum</a></li>
          <li><a href="sitemap.html">Sitemap</a></li>
        </ul>
      </div>
      <div class="right">
        <img src="img/header.jpg" />
      </div>
      <div class="bottom">
        <p>HalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHalloHallo</p>
      </div>
    </div>
  </body>
</html>

Vielleicht kann mir hier jemand weiterhelfen.

MfG

Marcel

30.03.2007 17:15

2 Jörg

Diese Lücke tritt im Internet Explorer 6 auf, aber nicht mehr im neuen Internet Explorer 7 - es scheint sich um einen Bug des IE 6 zu handeln. Ich schau mal, ob ich einen Workaround finde..

30.03.2007 17:53

3 Jörg

Nachtrag: leider in den Buglisten nichts gefunden - aber vielleicht kennt jemand anders den Bug inklusive Workaround?

Alternativ könntest du das Bild aber auch als Hintergrundbild einbinden:

.right {
         float:left;
         height:189px;
         width:570px;
         border-bottom:1px solid;
         background-image:url(img/header.jpg);
        }

30.03.2007 18:03 | geändert: 30.03.2007 18:03

4 Marcel

Danke! Das wäre sehr nett.
EDIT: Ups.. hab deinen 2. Beitrag doch glatt überlesen :)

MfG

Marcel

30.03.2007 18:07 | geändert: 30.03.2007 20:20

5 Marcel

hmm.. schade.
Trotzdem vielen Dank für deinen Tipp. Ich kann ihn leider noch nicht ausprobieren, da ich nicht mehr auf der Arbeit bin. Hier bei mir zu Hause läuft nur die siebener Version.

MfG

Marcel

30.03.2007 20:20

6 Rudy

Hier bei mir zu Hause läuft nur die siebener Version.
Hier bekommst Du den IE6 Standalone, den Du parallel zum 7er laufen lassen kannst.

30.03.2007 22:00

7 Marcel

Mhh.. wusste garnicht, dass man die parallel laufen lassen kann, aber ich werds mal versuchen.

EDIT: Das mit dem 'background-image' klappt wunderbar! Nochmal vielen Dank für die schnelle Hilfe!

MfG

Marcel

31.03.2007 00:19 | geändert: 31.03.2007 00:24

8 Chris (Gast)

Hey, sieht so aus als wär euer Problem schon etwas älter.
Hab trotzdem die "richtige" Lösung:

Es handelt sich um einen Interpretationsfehler beim Internet Explorer 6 und älter. Wenn du das Bild nicht als Hintergrund haben willst, sondern im Quelltext (also z.B. auch bei abgeschaltetem CSS sichtbar) dann hilft floaten:

Also das Bild selber:
div.right img{
float: left; //(oder right)
}

Noch ein Tipp: Um mit mehreren IE Versionen rumzuprobieren gibt es den "Multiple IE" (einfach bei Google suchen) er enthält die meisten älteren IE Versionen, in denen man dann zusätzlich zum 7 seine Website ausprobieren kann.


Grundsätzlich gilt: Get Firefox
http://www.mozilla-europe.org/de/

Gruß Christoph

29.11.2007 19:04

10 Jörg

Ups, ja, aber daran kann man sehen, dass man schon in einem halben Jahr gut dazu lernen kann ;)

30.11.2007 11:26

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]