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>·</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