zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE6 kleine Lücke rechts in Kopf und Fuss

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.11.2007, 21:19
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard 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
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.12.2007, 08:22
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hallo zusammen,

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

Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.12.2007, 10:20
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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.
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #4 (permalink)  
Alt 01.12.2007, 11:12
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
komische Verschiebung - wo liegt das Problem? Muckel (X)HTML 5 03.01.2009 18:26
Der widerspinstige IE6 -> 3 kleine Probleme Javajim CSS 9 27.11.2008 19:52
IE6 Problem, Rechte spalte (content) wird zu weit rechts angezeigt... kux CSS 20 02.06.2008 13:30
kleine float frage bei ie6 [treppen effekt im text] onip CSS 2 04.04.2007 15:53
3 Spalten + Kopf + Fuss matthcon CSS 2 28.09.2006 13:01


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:39 Uhr.