• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ie 6 Bug

thecrazykaktus

Neues Mitglied
Hi Leute,

habe ein dickes dickes Problem und zwar der IE6 und seine Darstellungsprobleme. (Menü verschiebt sich usw)

Ich habe die Seite mal bei mir zu testzwecken Hochgeladen
zu sehen auf lyonshome.de

Hier meine HTMl und CSS

HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Krebsbach-Westies</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="headerbg">
  <div id="headerblank">
    <div id="header">
        <div id="nav">
        <ul class="ul_border">
          <li><a href="/" class="navon">home</a></li>
          <li><a href="#" >Gästebuch</a></li>
          <li><a href="#" >Trimmstube</a></li>
          <li><a href="#" >Links</a></li>
        </ul>
        <ul>
          <li><a href="#" >Sonstiges</a></li>
          <li><a href="#" >Zertifikate</a></li>
          <li><a href="#" >Kontakt</a></li>
          <li><a href="#" >News</a></li>
        </ul>
        <ul>
          <li><a href="#" >Impressum</a></li>
          <li><a href="#">Anfahrt</a></li>
        </ul>
      </div>
  </div></div>
</div>
</div>
<div id="contentbg">
  <div id="contentblank">
    <div id="content">
      <div id="contentmid">
        <div class="midheading">
          <h2>Somelines about us</h2>
        </div>
        <div class="midtxt"><span class="midboldtxt">Nulla eget lacus ac duidictum ellentesque dapibus nibh ornare</span><br />
          volutpat, diam leo vestibulum lectus, eu molestie elit est eu ipsum. Ut accumsan nisl eu velit. Morbi eros felis, ornare sed, vestibulum cursus, vehicula et, nisl. Etiam adipiscing. </div>
        <div class="midtxt"><span class="midboldtxt">Morbi porta odio id erat. Curabitur ut massa uspendisse ipsum. In vitae dolor eget lorem</span> Suspendisse massa lacus, ullamcorper ac, pulvinar ut, aliquet et, elit. </div>
      </div>
      <div id="contentright">
        <div class="rightheading">
          <h4>Photo Gallerien</h4>
        </div>
        <div id="galleryblank">
          <div id="rightpic"><a href="#" class="rightpic"></a></div>
          <div id="rightpic02"><a href="#" class="rightpic02"></a></div>
        </div>
        <div class="rightheading02">
          <h4>Videos</h4>
        </div>
        <div id="galleryblank">
          <div id="rightpic"><a href="#" class="rightpic03"></a></div>
        </div>
        <div class="rightheading02">
          <h4>News</h4>
        </div>
        <div class="righttxt"><span class="rightboldtxt">01. Chelsea sucht ein neues zuhause</span><br />
          mehr unter der Rubrik Welpen<br />
        </div>
        <div class="righttxt"><span class="rightboldtxt">02.  1-Welpe abzugeben</span><br />
          Chelsea sucht einen neuen Wirkungskreis. Mehr unter der Rubrik Welpen</div>
        <div class="righttxt"><span class="rightboldtxt">03.  Neue Bilder </span><br />
          Es gibt neue Bilder unter der Rubrik Welpen.</div>
      </div>
    </div>
  </div>
</div>
<div id="footerbg">
  <div id="footerblank">
  <div id="footer">
      <div id="footerlinks"><a href="#" class="footerlinks">Home</a> | <a href="#" class="footerlinks">Über uns</a> | <a href="#" class="footerlinks">Email</a> | <a href="#" class="footerlinks">Impressum</a> | <a href="#" class="footerlinks">Anfahrt</a> | <a href="#" class="footerlinks">Kontakt</a></div>
      <div id="copyrights">© Copyright Krebsbach-Westies.de Alle Rechte Vorbehalten.</div>
    </div>
    </div>
  </div>
</div>
</body>
</html>
hier die CSS

HTML:
body {
    margin:0px;
    padding:0px;
    background-color:#e8d9ae;
}
h1, h2, h3, h4, h5, h6, span {
    margin:0px;
    padding:0px;
}
#headerbg {
    width:100%;
    height:309px;
    float:left;
    margin:0px;
    padding:0px;
    background-image: url(images/headerbg.jpg);
    background-repeat:repeat-x;
}
#headerblank {
    width:1004px;
    height:309px;
    float: none;
    margin:0 auto;
    padding:0px;

}
#header {
    width:1004px;
    height:309px;
    float: left;
    margin:0px;
    padding:0px;
    background-image:url(images/header.jpg);
    background-repeat:no-repeat;
}

#contentbg {
    width:100%;
    float:left;
    margin:0px;
    padding:0px;
}
#contentblank {
    width:1004px;
    float: none;
    margin:0 auto;
    padding:0px;
}
#content {
    width:1004px;
    float: left;
    margin:0px;
    padding:0px;
    background-image:url(images/bgvline.jpg);
    background-repeat:repeat-y;
}

#contentmid {
    width:735px;
    float:left;
    margin:0px;
    padding:34px 0 33px 34px;
    background-repeat:repeat-y;
}
.midheading {
    width:435px;
    float: left;
    margin:0px;
    padding:0px;
    font-family:Georgia;
    font-size:28px;
    color:#7e8901;
}
.midheading h2 {
    width:435px;
    float: left;
    margin:0px;
    padding:0px;
    font-family:Georgia;
    font-size:28px;
    font-weight:normal;
    color:#7e8901;
}
.midtxt {
    width:400px;
    float: left;
    margin:22px 0 0 0;
    padding:0px;
    font-family: Arial;
    font-size:12px;
    color:#464646;
}
.midboldtxt {
    font-family: Arial;
    font-size:12px;
    font-weight:bold;
    color:#b22d00;
}

#contentright {
    width:180px;
    float: left;
    margin:0px;
    padding:34px 0 40px 34px;
    background-image:url(images/vline.jpg);
    background-repeat:repeat-y;
}
.rightheading {
    width:180px;
    float: left;
    margin:0px;
    padding:0px;
    font-family:Georgia;
    font-size:22px;
    color:#7e8901;
}
.rightheading02 {
    width:180px;
    float: left;
    margin:20px 0 0 0;
    padding:0px;
    font-family:Georgia;
    font-size:22px;
    color:#7e8901;
}
.rightheading h4 {
    width:180px;
    float: left;
    margin:0px;
    padding:0px;
    font-family:Georgia;
    font-size:22px;
    font-weight:normal;
    color:#7e8901;
}
.rightheading02 h4 {
    width:180px;
    float: left;
    margin:0px;
    padding:0px;
    font-family:Georgia;
    font-size:22px;
    font-weight:normal;
    color:#7e8901;
}
#galleryblank {
    width:180px;
    float:left;
    margin:21px 0 0 0;
    padding:0px;
}
#rightpic {
    width:180px;
    height:68px;
    float:left;
    margin:0px;
    padding:0px;
}
.rightpic {
    width:180px;
    height:68px;
    float:left;
    margin:0px;
    padding:0px;
    background-image:url(images/rightpic.jpg);
    background-repeat:no-repeat;
}
.rightpic:hover {
    width:180px;
    height:68px;
    float:left;
    margin:0px;
    padding:0px;
    background-image:url(images/rightpic.jpg);
    background-repeat:no-repeat;
}
#rightpic02 {
    width:180px;
    height:68px;
    float:left;
    margin:13px 0 0 0;
    padding:0px;
}
.rightpic02 {
    width:180px;
    height:68px;
    float:left;
    margin:0px;
    padding:0px;
    background-image:url(images/rightpic02.jpg);
    background-repeat:no-repeat;
}
.rightpic02:hover {
    width:180px;
    height:68px;
    float:left;
    margin:0px;
    padding:0px;
    background-image:url(images/rightpic02.jpg);
    background-repeat:no-repeat;
}
#rightpic03 {
    width:180px;
    height:68px;
    float:left;
    margin:13px 0 0 0;
    padding:0px;
}
.rightpic03 {
    width:180px;
    height:68px;
    float:left;
    margin:0px;
    padding:0px;
    background-image:url(images/rightpic03.jpg);
    background-repeat:no-repeat;
}
.rightpic03:hover {
    width:180px;
    height:68px;
    float:left;
    margin:0px;
    padding:0px;
    background-image:url(images/rightpic03.jpg);
    background-repeat:no-repeat;
}
.righttxt {
    width:177px;
    float:left;
    margin:21px 0 0 0;
    padding:0px;
    font-family:Arial;
    font-size:12px;
    color:#464646;
}
.rightboldtxt {
    font-family:Arial;
    font-size:12px;
    font-weight:bold;
    color:#b22d00;
}

#footerbg {
    width:100%;
    height:354px;
    float:left;
    margin:0px;
    padding:0px;
    background-image:url(images/footerbg.jpg);
    background-repeat:repeat-x;
}
#footerblank {
    width:1004px;
    height:354px;
    float:none;
    margin:0 auto;
    padding:0px;
}
#footer {
    width:858px;
    height:313px;
    float:left;
    margin:0px;
    padding:41px 0 0 146px;
    background-image:url(images/footer.jpg);
    background-repeat:no-repeat;
}
.footertxt {
    width:184px;
    float: left;
    margin:17px 0 0 16px;
    padding:0px;
    font-family:Arial;
    font-size:12px;
    font-weight:bold;
    color:#FFF;
    text-align:center;
}
#footerlinks {
    width:715px;
    float:left;
    margin:200px 0 0 0;
    padding:0px;
    font-family:Arial;
    font-size:11px;
    font-weight:bold;
    color:#ee7e1f;
    text-align:center;
    text-decoration:none;
}
.footerlinks {
    font-family:Arial;
    font-size:11px;
    font-weight:bold;
    color:#ee7e1f;
    text-align:center;
    text-decoration:none;
    padding:0 3px 0 3px;
}
.footerlinks:hover {
    font-family:Arial;
    font-size:11px;
    font-weight:bold;
    color:#ee7e1f;
    text-align:center;
    text-decoration: underline;
    padding:0 3px 0 3px;
}
#copyrights {
    width:715px;
    float:left;
    margin:5px 0 0 0;
    padding:0px;
    font-family:Arial;
    font-size:11px;
    color:#401400;
    text-align:center;
}


/*--------------------------------------------------------------NAVIGATION-------------------------------------------------------------------------------------------------------------------*/    

#nav {
    width:500px;
    float:left;
    margin:165px 0 0 350px;
    padding:0px;
    display:inline;
}

.ul_border {
    padding-left:20px;
    border-left:1px solid #9d9993;
    display:inline;
}

#nav ul {
    height:100px;
    margin-top:14px;
    margin-right:26px;
    float:left;
}

#nav li {
    margin-bottom:6px;
    list-style:none;
}

#nav a {
    font-family:Georgia;
    font-size:14px;
    color:#9d9993;
}

#nav a:hover,
#nav a.navon {
    color:#ffffff;
}
Hoffe mir kann einer helfen! Verzweifel schon!
 
Zuletzt bearbeitet:
du kannst das hier
HTML:
<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

in deinen quellcode schreiben, und einfachn "passendes" Stylesheet für den IE schreiben
 
@Roddy: Amen.

@Themenverfasser: Das der IE (6) bugt, ist vollkommen normal und nicht zuletzt deswegen ist er bei Webdesignern verrufen. Leider nutzt ihn immer noch die Mehrheit...
 
Ich kann nichts ungewöhnliches feststellen.
Was benutzt du denn für eine Testumgebung?
- Und was soll verschoben sein?

Und was sind das für komische Antworten?
 
Entschuldige das ich mich erst jetzt melde!

Das derzeitige Problem besteht in der Navigation diese Verschiebt sich!

Also der IE6 und 7 schiebt die Navigation zu weit nach rechts also der double floatet bug denke ich!
Aber der IE8 scheint dafür die schrigt und die abstände etwas zu verkleinern.

meine Testumgebung ist der IE Tester und auch eine Virtuelle Maschine mit XP und IE6!

Habe oben den neuen Quelltxt eingestellt und auch neu auf Server geladen! vielleicht kann mir jetzt einer helfen!

Danke
 
Zuletzt bearbeitet:
Konnte den fehler fast lösen!! habe nur in der css

* { margin: 0; padding: 0; }

vergessen nun steht alles am ort wo es sein soll!

nur habe ich jetzt das problem das beim ie8 die die Schrift in der Navigation etwas kleiner wird bzw der abstand zwischen dein zeilen.
 
Zuletzt bearbeitet:
Schaue dir doch mal IE 6 bzw 7 an und dann IE 8 da siehst das sich das Navigationsmenü im Abstand verringert bzw vergrößert.
Also zur Erklärung

home und Gästebuch betrachten. Der Abstand verringert bzw vergrößert sich.
 
Hm das aber komisch! also bei mir wird das so angezeigt! Wie gesagt bin schon am verzweifeln! Habe das im IE Tester getestet!
Im echten IE8 passt es jedenfalls.

Im IE7 funktioniert der Seitenzoom nicht perfekt.
Das lässt sich im Browsermodus 7 nicht simulieren.
Glaube aber nicht, daß es daran liegt.

Mit dem IE Tester habe ich keine eigenen Erfahrungen. Im Foren führte der IE Tester aber schon öfter zu Missverständnissen.
 
Stelle den Link noch mal ein für ein paar Tage ins Forum.
Vielleicht sieht es sich der Eine oder Andere noch mal auf einem anderen System (Einstellungen / Schriften) an.
 
Zurück
Oben