Layna: IE6 produziert nebeneffekte wenn Grafik vorhanden ist

Beitrag lesen

SELF-Forum

IE6 produziert nebeneffekte wenn Grafik vorhanden ist

Layna
– Informationen zu den Bewertungsregeln

Hallo :).
Ich habe ein Problem mit dem IE6 (ich weiß, nicht überraschend), und zwar bei folgendem HTML (Ich poste mal komplett falls es am Doctype oder ähnlichem hängt):

<!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" xml:lang="de" lang="de">

<head>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 <link rel="stylesheet" type="text/css" href="style.css" />
 <title>Test</title>
</head>

<body>
<div id="deko_border" class="clearfix">
 <div id="content_box" class="clearfix">
  <div id="nav">
     <img src="logo.jpg" alt="" />
   <ul>
    <li><a href="#">Link 1??</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Noch ein Link</a></li>
    <li><a href="#">Und noch einer</a></li>
    <li><a href="#">Der kann auch ganz lang werden, da muss ich nochmal gucken</a></li>
   </ul>
  </div>
  <div id="main">
   <img src="car.jpg" alt="" height="80" width="135" id="car" />
   <h1>&Uuml;berschrift der Seite</h1>
   <p>  ...Blindtext... </p>
  </div>
 </div>
</div>
</body>
</html>

Hierzu gehört folgende CSS (auch hier sorry wegen der Länge, aber ich habe nicht einmal mehr 'ne Vermutung woran es liegen kann):

/*======================
        Resets
=======================*/

html, body, div, p, h1, h2, h3, h4, h5, h6, ul, li {
 margin: 0px;
 padding: 0px;
 border: none;
}

html, body {
 height: 100%;
 background-color: #000096;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10pt;
}

h1, h2, h3, h4, h5, h6 {
 font-size: 100%;
 font-weight: normal;
 text-decoration: none;
}

div, p {
 position: relative;
}

/*======================
        Optik
=======================*/

#deko_border{
 background-image: url(velvet.jpg);
 padding: 30px;
 margin: 50px;
 border: 2px solid #00CED1;
}

#content_box{
 background-color: #AFEEEE;
}

#nav {
 background-image: url(navbg.jpg);
 background-repeat: repeat-y;
 padding-right: 100px;
 padding-bottom: 40px;
 width: 150px;
 float: left;
}

#nav ul {
 list-style: none;
 margin: 0px;
 margin-top: 20px;
}

#nav li {
 text-align: center;
 margin: 0px;
 padding: 3px 5px;
}

#main {
 top: 0px;
 padding-left: 250px;
}

#main #car {
 border-right: 2px solid #032A85;
 border-bottom: 2px solid #032A85;
 float: left;
 background-color: White;
 padding-right: 3px;
 margin-right: 20px;
 margin-bottom: 5px;
 z-index: 30;
}

#main h1 {
 font-size: 150%;
 padding-top: 10px;
 padding-bottom: 15px;
 text-decoration: underline;
}

#main p {
 padding: 0px 7px 10px 7px;
}

/*======================
        Navi
=======================*/

#nav a,  #nav a:link, #nav a:visited {
 display: block;
 text-decoration: none;
 color: Aqua;
 font-weight: bold;
 font-size: 90%;
}

#nav a:active, #nav a:focus, #nav a:hover{
 color: #FF6D35;
}

/*
     Sonderanweisungen
*/

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

Dies funktioniert im IE6, solange die logo.jpg-Grafik nicht da ist.
Wenn diese auftaucht verschiebt sich die #main jedoch komplett nach rechts, und erzeugt so eine doch sehr unschöne Lücke im Design.
Kennt jemand derartige Effekte und/oder kann mit sagen wie ich das Abschalten kann?

Danke,
    Layna

Beitrag melden
–
Informationen zu den Bewertungsregeln