XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   IE6 kleine Lücke rechts in Kopf und Fuss (http://xhtmlforum.de/showthread.php?t=49190)

hubspe 30.11.2007 21:19

IE6 kleine Lücke rechts in Kopf und Fuss
 
Hallo zusammen,

ich bastel gerade am Relaunch meiner HP.

In allen Browsern (IE7, FF, Netscape und Opera) schaut es gut aus, nur beim IE6 habe ich in #kopf und #fuss jeweils rechts zum Rand hin eine kleine Lücke von ca. 0.4em die ich mir nicht erklären kann.

Welcher IE-Bug könnte dafür verantwortlich sein?

Der Code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="language" content="deutsch, de" />
  <meta name="author" content="Hubspe" />
  <meta name="Keywords" content="foto                                                    fotografien klassische" />
  <meta name="Description" content=" Hubspe                                                        " />
  <meta name="verify-v1" content="Hm7+uTRYlF4ubJ9WYCSarCzjCskWMAB7BwkYAuocImw=" />
 
  <title>Klassische Schwarzweissfotografie aus Passau</title> 
 
  <link type="text/css" rel="stylesheet" href="texte/screen.css" media="screen" />
  <link type="text/css" rel="stylesheet" href="texte/print.css" media="print" />
 
<!--[if IE 6]>
  <style type="text/css">
    @import url(texte/ie6.css);
  </style>
<![endif]--> 

<!--[if IE 7]>
  <style type="text/css">
    @import url(texte/ie7.css);
  </style>
<![endif]--> 

</head>

<body id="startseite">

<div id="wrapper">
 
  <p class="skiplink"><a href="#navi01">Zur Navigation</a></p>
  <p class="skiplink"><a href="#rechtsinnen">Zum Inhalt</a></p>
   
  <div id="kopf">
    <h1>Hubspe - Klassische Schwarzweissfotografie</h1>
  </div>
  <!--Ende #kopf-->
 
  <div id="linksaussen">
  <div id="linksinnen">
    <ul>
      <li id="navi01"><a href="index.htm">Startseite</a></li>
      <li id="navi02"><a href="texte/inhaltsverzeichnis.htm">Inhaltsverzeichnis</a></li>
      <li id="navi03"><a href="texte/preise.htm">Preise</a></li>
      <li id="navi04"><a href="texte/fotobegriffe.htm">Fotobegriffe</a></li>
      <li id="navi05"><a href="texte/kontakt.htm">Kontakt</a></li>
      <li id="navi06"><a href="texte/galerien.htm">Galerien</a></li>
    </ul>
  </div><!--Ende #linksinnen-->
  </div><!--Ende #linksaussen-->
 
  <div id="rechtsaussen">
  <div id="rechtsinnen">
    <h2>Warum analog und nicht digital?</h2>
      <p>Die Bilder der analogen Schwarzweissfotografie sind den entsprechenden Artgenossen der digitalen
            Schwarzweissfotografie qualitativ noch immer weit überlegen, deshalb arbeite ich ausschließlich analog
            mit normalen Negativen und einer Dunkelkammer zur Erstellung der Fotos.</p>
    <h3>Arbeitsstandards</h3>
      <ul>
        <li>Fast alle Bilder werden mit einer 4x5inch Grossformatkamera aufgenommen.</li>
        <li>Geprintet wird entweder auf Barytpapier oder auf Baumwollpapier (Aquarellpapier).</li>
        <li>Printtechniken sind Silbergelatinedruck, Palladiumdruck und Lithprint.</li>
        <li>Archivfestigkeit durch Tonung (Goldtoner z.B.) oder Behandlung mit Sistan.</li>
      </ul>
    <h4>Kurzvorstellung der Galerien</h4>
    <div class="galeriekurzrechts">
      <img src="images/platzhalter200.jpg" class="imgrechts" width="200" height="200" alt="Platzhalter" title="Platzhalter" />
    <h5><a href="../bilderseiten/g1b1.htm">Aktuelle Fotografien</a></h5>
      <p>Hier sind Fotografien aus aktuellen Serien und Einzelbilder die in keine bestimmte Kategorie gehören.
            Alle Bilder sind mit einer Grossformatkamera (10,2x10,4cm Negative)  aufgenommen und
      auf Barytpapier geprintet worden.</p>
      <br class="clear" />
      </div>
      <div class="galeriekurzlinks">
        <img src="images/platzhalter200.jpg" class="imglinks" width="200" height="200" alt="Platzhalter" title="Platzhalter" />
    <h5>Kulturlandschaft</h5>
      <p>Mit den Stilmitteln der Landschaftsfotografie wurden die Spuren menschlicher Besiedlung
            und Errungenschaften fotografiert.</p>
    <br class="clear" />     
    </div>
    <div class="galeriekurzrechts">
      <img src="images/platzhalter200.jpg" class="imgrechts" width="200" height="200" alt="Platzhalter" title="Platzhalter" />
    <h5>Palladiumdrucke</h5>
      <p>Ein normales Negativ wird mithilfe einer Technik aus dem 19.Jahrhundert auf selbstbeschichtetem
            Baumwollpapier geprintet. Palladiumdrucke sind extrem lange haltbar.</p>
    <br class="clear" />
    </div>
    <div class="galeriekurzlinks">
      <img src="images/platzhalter200.jpg" class="imglinks" width="200" height="200" alt="Platzhalter" title="Platzhalter" />
    <h5>Neuseeland</h5>
      <p>Fotografien vom anderen Ende der Welt. Alle Bilder sind mit einer Mittelformatkamera aufgenommen
            und auf Barytpapier abgezogen worden. Die Bilder sind zwischen Dezember 1997 und
            März 1998 entstanden.</p>
    <br class="clear" />
    </div>
  </div><!--Ende #rechtsinnen-->
  </div><!--Ende #rechtsaussen-->
  <br class="clear" />
  <div id="fuss">
    <ul>
      <li id="navi07"><a href="texte/datenschutz.htm">Datenschutz</a></li>
      <li>&middot;</li>
      <li id="navi08"><a href="texte/impressum.htm">Impressum</a></li>
    </ul>
    <br class="clear" />
  </div><!--Ende #fuss-->
 
  </div><!--Ende #wrapper-->
 
    <p class="skiplink"><a href="#navi01">Zur Navigation</a></p>
<p class="skiplink"><a href="#rechtsinnen">Zum Anfang Inhalt</a></p>
</body>
</html>

Der CSS-Code (IE6-CSS habe ich unten angefügt):
Code:

*  {
        padding:0;
        margin:0;
}
li, dd  {
        list-style-type:none;
}
html  {
        height:100%
}
body  {
    color:#000;
    background-color:#336699;
    text-align:center;
    font:100.01% verdana,arial,helvetica,sans-serif;
        line-height:1.3em;
}
h1,h2,h3,h4,h5  {
    font-size:1em;
}
p, li, dt, dd, input, textarea  {
    font-size:0.9em;
}
img  {
        border-style:none;
}
img a  {
    border:none;
}
h1  {
    font-size:1.7em;
        letter-spacing:2px;
}
h2  {
    font-size:1.5em;
}
h3  {
    font-size:1.2em;
}
h4  {
    font-size:1.1em;
}
h5  {
    font-size:1.0em;
}
.skiplink  {
    position:absolute;
    top:-4000px;
    left:-6000px;
    width:0px;
    height:0px;
    overflow:hidden;
    display:inline;
}
a  {
    text-decoration:none;
}
a:link  {
    color:#296199;
        background-color:#eeecec;
        border-bottom:1px solid #336699;
}
a:visited  {
    color:#296199;
        background-color:#eeecec;
}
a:focus, a:hover  {
    color:#fff;
        background-color:#336699;
}
a:active  {
    color:#fff;
        background-color:#296199;
        border-bottom:1px solid #fff;
}
#wrapper  {
    width:56em;
        color:#000;
        background-color:#f5f5f5;
        border:3px solid #46b0f4;
    margin:1em auto;
}

#kopf  {
    color:#000;
        background-color:#eeecec;
    padding-top:1.5em;
        padding-bottom:1.5em;
        border-bottom:1px solid #dcdcdc;
}

#linksaussen  {
    width:12em;
        float:left;
}
#linksinnen a  {
    display:block;
        color:#336699;
        background-color:#e5f2fa;
        padding:0.2em 0 0.2em 0;
        border:1px solid #e6e6fa;
}
#linksinnen ul  {
    margin-top:2em;
}
#linksinnen li  {
    padding-top:0.8em;
        margin-left:1em;
        margin-right:1em;
}
#linksinnen a:hover,
#linksinnen a:focus  {
    color:#fff;
        background-color:#336699;
}
#linksinnen a:hover,
#linksinnen a:focus,
#fuss a:hover,
#fuss a:focus,
#startseite #navi01 a,
#inhaltsverzeichnis #navi02 a,
#preise #navi03 a,
#fotobegriffe #navi04 a,
#kontakt #navi05 a,
#galerien #navi06 a,
#datenschutz #navi07 a,
#impressum #navi08 a  {
    color:#fff;
        background-color:#336699;
}
 #rechtsaussen  {
    width:42em;
    float:right;
        margin:2em 0.8em 1em 0.8em;
}
#rechtsinnen h2  {
    margin-bottom:0.5em;
}
#rechtsinnen h3  {
    margin-top:1em;
    margin-bottom:0.5em;
}
#rechtsinnen h4  {
    margin-top:1.7em;
    margin-bottom:0.5em;
}
#rechtsinnen p,
#rechtsinnen li  {
    text-align:left;
}
#startseite #rechtsinnen li  {
    list-style-type:disc;
    list-style-position:inside;
        text-indent:1.2em;
}
.imgrechts  {
    float:right;
        border:3px solid #fff;
        margin:0.6em 0.6em 0.6em 1em;
}
.imglinks  {
    float:left;
        border:3px solid #fff;
        margin:0.6em 1em 0.6em 0.6em;
}
.galeriekurzrechts,
.galeriekurzlinks  {
    width:40em;
        color:#000;
        background-color:#e4e7e9;
        margin-bottom:1em;
}
.galeriekurzrechts p,
.galeriekurzlinks p  {
    padding:0.4em 0.7em 0.7em 0.7em;
}
.galeriekurzrechts h5,
.galeriekurzlinks h5  {
    padding-top:0.9em;
}
.galeriekurzrechts a,
.galeriekurzlinks a  {
    color:#296199;
        background-color:#e4e7e9;
        padding:0.2em 0.2em 0.1em 0.2em;
}
.galeriekurzrechts a:hover  {
    color:#fff;
        background-color:#336699;
}
#fuss  {
    color:#000;
        background-color:#eeecec;
        border-top:1px solid #dcdcdc;
}
#fuss a  {
    padding:0.2em 0.2em 0.1em 0.2em;
}
#fuss ul  {
    padding:0.9em 0 0.9em 17em;
}
#fuss li  {
    float:left;
        letter-spacing:2px;
        margin-left:1.5em;
}
.clear  {
        clear:both;
        height:0;
        width:0;
        visibility:hidden;
}
* html li  {  height:1%;  }
* html  {  word-wrap:break-word;  } 
* html ul  {  height:1%;  }
* html li  {  height:1%;  } 
* html li a  {  height:1%;  }

Irgendetwas übersehe ich sicher.

Danke im voraus
Klaus

hubspe 01.12.2007 08:22

Hallo zusammen,

habs heute morgen gefunden, der IE6 mochte margin für den rechten container nicht.
Mit padding war das Problem erledigt.

Klaus

Boris 01.12.2007 10:20

Auch wenn es erledigt ist - der IE hat den "double-margin-Bug", wenn man floats und margin in Kombination benutzt.

Lösen kann man das (wenn man margin braucht anstelle von padding), indem man dem Element (un)sinnigerweise ein display: inline dazu schreibt. Alle Browser ignorieren das (da ja float angegeben wurde) und der IE5/6 zeigt es dann richtig an. ;)

hubspe 01.12.2007 11:12

Hi Boris,

danke für deine Hilfe.

den Bug kenne ich, habe ihn aber nicht damit in Zusammenhang gebracht, da die Lücke im Head und im Fuss des Dokuments war und da war nix gefloatet.
Display:inline hat mir deshalb nur das Layout zerschossen.

Ich habe mich aber heute morgen vage daran erinnert (gestern hab ich den Wald vor lauter Bäumen nicht mehr gesehen), das der IE6 mit margin und der Größe em Probleme haben kann, deshalb margin raus und padding rein dann war das gefixt.

Vielleicht hätte es auch gereicht dem IE6 statt em % oder px in Verbindung mit margin zu geben (teste ich später noch).

Viele Grüße
Klaus


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:06 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020