Problem mit dem IE 6.0 - Inhalt kippt unter die Sidebar...

tooltonic

Nabend...

...ich habe folgendes Problem mi meinem selbstgebastelten Theme: Der Inhalt kippt im IE 6 von Zeit zu Zeit ganz willkürlich unter die Sidebar - es kann die selbe Seite mit selben Inhalten sein (z.B. "Home") - mal gehts mal nicht...
Ich richte die Inhalte mit float: left und right aus - auch die Masse sind strikt bemessen. Probleme mit der Validierung gibt es auch nicht. Vielleicht weiss da jemand weiter wie ich? Hier die URL: http://www.megaphones.de
Danke...

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

PeterF

Da kann ich auch mal helfen

Hallo,
da kann ich Dir einen Tip geben. Das liegt unter Garantie an Deinem plugin, welches Dir die "Sprichwörter" in der Sidebar generiert.

Das Abkippen der Sidebar passiert genau dann, wenn eine Zeile 20 oder 21 Zeichen beansprucht, dann ist die Größe der Sidebar nicht mehr ausreichend und alles zusammen passt dann nicht mehr in den "Container" der header, sidbar, main und footer enthält.

Das ist auch regelmäßig bei meinen Installationen der Fall - Problemverursacher ist hier immer das "recent-comments" plugin. Das Abkippen der sidebar wird hier immer von Kommentierenden verursacht die Wörter verwenden die länger als 20 Zeichen sind. Und es ist ja heute so beliebt ganze Sätze in einem Wort in die Kommentare reinzuhauen In der Art "duckundundwegrennschlagmichnichttot".

Also entweder Sidebar an den Platzbedarf Deiner Sprichwörter anpassen, oder Zeilenumbruch in dem Plugin nach einer gewisen Buchstabenanzahl erzwingen (kann man bei "recentcomments" jedenfalls einstellen.

Beste Grüße
Peter

Monika

Hi
ich bin jetzt da wo dieser (verflixte ) IE6 mir zur Verfügung steht.

ich kann das Problem nicht nachvollziehen,

was sein kann...

Du hast die style.css ziemlich komprimiert,
also alle Angaben fast in einer Zeile,
zumindest sieht dies hier bei diesem IE so für mich aus,

bei einem background bild in der style.css spinnt da manchmal der IE,
der mag dann 1. keine style short hands und 2. alles schön untereinander

wieso?
ehrlich ich kann Dir keine Antwort geben,
ich habe nur die Erfahrung gemacht,
schreibe ich bei solch einem Problem im Cascading Style Sheet alles hübsch untereinander - nur um es leichter zu finden und leichter ändern zu können- ist das Problem weg..
obwohl ich bei den Angaben nichts tat......

was auch sein kann (Spekulation)

verlinkst Du ein Bild im Beitrag, und gibts dem keine width und height Angaben, dann braucht der IE ziemlich lange bis er das selber findet und dann kann das Verrutschen auch passieren....

ich habe Deine style.css nicht kontrolliert,
weil ich finde in der derzeit kaum was,

eben weil alles so komprimiert ist und ich in meinen Pausen nicht soviel Zeit zum Suchen habe ....

kontrolliere auch Deine Kommentare, Zitate...

lg

edit:Peter hat schneller getippt ;);)

tooltonic

Hallo...

...besten Dank für die Antworten - es lag wohl wie PeterF garantierte an dem Plugin 'Witty Text' - jetzt wo es raus ist, scheint der IE keinen Ärger mehr zu machen. Ich hatte es vorgestern erst installiert und hätte eigentlich auch drauf kommen können. Plattdeutsche Zitate bzw. Kommentare sind eben noch nicht valide ;-) bzw. unverständlich...
Monika - danke für den Tip - komprimiert ist das Style nur bedingt. Aber ich teste die ganze Zeit an dem Theme rum - und es ist einiges an CSS-Code zusammengekommen (aktuell: 439 Zeilen) - vielleicht ist das Style auch zu lang und/oder die <div>s im Theme einfach zu sehr verschachtelt?! Die Bilder füge ich nur mittels WP ein, welches automatisch die Grössenangaben im <img>-Tag vornimmt. Ein anderes Problem sind bei mir Formulare - genauer das Suchformular links in der Sidebar - während im Firefox die Grösse ok ist, nimmt das Form. im IE deutlich mehr Platz ein, wirkt höhenmässig irgendwie auseinandergezogen - kann man das umgehen/ändern? Bisher habe ich die <form>-Tags immer an anderer Stelle plaziert/versteckt - irgendwo zwischen den <div>-Tags - ist aber nicht valide...

Mein Style.css

Code

/* ---> SEITENGRUNDEINSTELLUNG <--- */
body {
    font-size: 5px;
    color: #445566;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: left;    
    background-color: #445566;
    margin-top: 10px;
}


#page, #header, #navigation {
    width: 760px;
}


#page {
    background-color: #445566;
}


/* ---> HEADER/Banner <--- */
#header {
    width: 760px;
    background-repeat:no-repeat;
    background-image:url(img/header.gif);
    background-position: left;
    height: 110px;
}


/* ---> Textnavigation unter Banner <--- */
#navigation {
    padding-top: 95px;
}


.navigate, .navigate_bottom, .navigate_left {
    width: 100px;
    vertical-align: top;
    clear: none;
    text-align: center;
}


.navigate {
    padding-top: 2px;
    height: 15px;
    float: right;
    background-repeat:no-repeat;
    background-image:url(img/navigate.gif);
    background-position: left;
}


.navigate_bottom {
    height: 15px;
    padding-top: 2px;
    float: left;
    background-image:url(img/navigate_b.gif);
    background-position: left;
}


.navigate_left {
    width: 160px;
    float: left;
}


/* ---> Linie unterhalb der Textnavigation/Banner <--- */
#line {
    width: 760px;
    background-repeat:no-repeat;
    background-image:url(img/line.gif);
    background-position: left;
    height: 10px;
    float: left;
}
.navigate_line, .navigate_line_middle, .navigate_line_left {
    height: 10px;
}


.navigate_line, .navigate_line_middle {
    background-repeat:no-repeat;
    background-image:url(img/navigate_w.gif);
    background-position: left;
    width:100px;
    float: right;
}


.navigate_line_middle {
    width: 100px;
    float: left;
    margin-left: 30px;
}


.navigate_line_left {
    background-repeat:no-repeat;
    background-image:url(img/navigate_l.gif);
    background-position: left;
    width: 140px;
    float: left;
    margin-left: 15px;
}


a.block, a.block:hover, a.block_left, a.block_left:hover {
    height: 7px;
    margin-top: 1px;
    margin-bottom: 1px;
}


a.block {
    display: block;
    margin-left: 2px;
    float: left;
    width: 96px;
}


a.block_left {
    display: block;
    width: 130px;
}


a.block:hover, a.block_left:hover {
    background-color: #ffffff;
}


a.block:hover {
    margin-left: 2px;
    float: left;
    width: 96px;
}


a.block_left:hover {
    width: 130px;
}


/* ---> BODY LINKE & RECHTE SPALTE <--- */
#left, #left_top, .left_m_top, .left_m_middle, .left_m_bottom, #left_bottom, .left_break {
    background-position: left;
    width: 170px;
    float: left;
}
    #left {
        background-image:url(img/left.gif);
        float: left;
    }


    #left_top {
        height:20px;
        background-image:url(img/left_top.gif);
        background-repeat:no-repeat;
    }


    .left_m_top {
        height:20px;
        background-image:url(img/left_m_top.gif);
        background-repeat:no-repeat;
    }


    .left_m_middle {
        background-image:url(img/left_m_middle.gif);
        padding-bottom: 5px;
    }


    .left_m_bottom {
        height:10px;
        background-image:url(img/left_m_bottom.gif);
    }


    .left_break {
        height:5px;
    }


    #left_bottom {
        margin-top: 15px;
        height:20px;
        width: 170px;
        background-image:url(img/left_bottom.gif);
    }


#right, #right_top, #right_end, .right_m_top, .right_m2_top, .right_m_middle, .right_m_bottom, #right_bottom, .right_break {
    width: 590px;
    float: right;
    background-position: left;
}
    #right {
        background-image:url(img/right.gif);
    }


    #right_top {
        height:20px;
        background-image:url(img/right_top.gif);
        background-repeat:no-repeat;
    }
    
    .right_m_top {
        height:20px;
        background-repeat:no-repeat;
        background-image:url(img/right_m_top.gif);
    }


    .right_m2_top {
        height:20px;
        background-repeat:no-repeat;
        background-image:url(img/right_m2_top.gif);
    }


    .right_m_middle {
        padding-top: 10px;
        padding-bottom: 5px;
        background-image:url(img/right_m_middle.gif);
    }


    .right_m_bottom {
        height:10px;
        background-image:url(img/right_m_bottom.gif);
        background-repeat:no-repeat;
    }
    .right_break {
        height:5px;
        width: 590px;
    }


    #right_bottom {
        margin-top: 15px;
        height:20px;
        background-image:url(img/right_bottom.gif);
        background-repeat:no-repeat;
    }


    #right_end {
        padding-top: 2px;
        background-color: #445566;
        text-align: right;
    }


/* ---> TEXTFORMAT <--- */
.font_left, .font_le, .font_right, .font_ri, .font_head, .font_c, a:link, a:visited, a:hover, a:active {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: left;
    font-size: 10px;
    color: #445566;
    font-size: 10px;
    font-weight: bold;
}


.font_left {
    padding-top: 2px;
    margin-left: 25px;
    margin-right: 25px;
}


.font_le {
    margin-left: 25px;
    margin-right: 25px;
}


.font_right  {
    padding-top: 2px;
    margin-left: 30px;
    margin-right: 30px;
}


.font_ri {
    padding-bottom: 5px;
    font-size: 11px;
    margin-left:60px;
    margin-right:60px;
    text-align: justify;
    font-weight: normal;
}


.font_ri a:link, .font_ri a:visited, .font_ri a:hover, .font_ri a:active {
    font-size: 11px;
}


div.font_ri a[href^="http"] {
    background: url(img/offsite.gif) no-repeat center right;
    padding-right: 10px;
}


div.font_ri a[href^="http://gardena.informatik.uni-oldenburg.de:1978/"],
div.font_ri a[href^="http://www.gardena.informatik.uni-oldenburg.de:1978/"],
div.font_ri a[href^="http://megaphones.de"],
div.font_ri a[href^="http://www.megaphones.de"] {
    background: transparent;
    padding-right: 0px;
}




div.font_ri a:link, 
div.font_ri a:visited, 
div.font_ri a:hover, 
div.font_ri a:active {
    font-size: 11px;
    font-weight: normal;
    text-decoration: underline;
}


.font img {
    border:1px solid #445566;
}


.font img:hover {
    border:1px solid #ff9900;
}


.font_head {
    font-size: 10px;
    height: 15px;
    border-bottom: 1px solid #e0e0e0;
    margin-top: 30px;
    margin-bottom: 10px;
}
.font_head a:link, .font_head a:visited, .font_head a:hover, .font_head a:active {
    font-size: 10px;
}


.font_c {
    font-size: 11px;
    border: 1px solid #d0d0d0;
    padding: 10px;
    background-color: #f9f9f9;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 35px;
    margin-right: 45px;
    text-align: justify;
    font-weight: normal;
}


.left, .right {
    vertical-align: top;
}


.right {
    float: right;
    text-align: right;
}


.left {
    float: left;
    text-align: left;
}


/* ---> TEXTFORMAT LINKS<--- */
a:link, a:visited, a:hover, a:active {
    font-weight: bold;
    text-decoration: none;
}


a:hover {
    color: #ff9900;
}    


/* ---> FORMULARE <--- */


.form {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
}


.form_s, .button_s, .conform, .contacterror, .conbutton {
    margin-top: 5px;
    width: 200px;
    font-size: 11px;
    color: #EEEEEE; 
    background-color:#556677;
    border: 1px solid #d0d0d0;
}


.contacterror {
    border: 1px solid #ff9900; 
}


.conbutton {
    width: 75px;
}


.form_s {
    width: 80px;
}


.button_s {
    width: 30px;
}


/* ---> KALENDER <--- */
.cal_row {
    width: 126px;
    height: 12px;
    margin-bottom: 5px;
    font-size: 10px;
    text-align: justify;
}


.cal_cal, .cal_caled, .leer {
    float: left;
    width: 15px;
    font-size: 10px;
    margin-right: 1px;
    border:1px solid #eeeeee;
}


.cal_cal, .leer {
    border:1px solid #eeeeee;
}


.leer {
    color: #ffffff;
}


.cal_caled {
    border:1px solid #445566;
}
 
/* ---> BILDER <--- */
.img_l img, .img_r img {
    border:1px solid #445566;
    margin-top: 0px;    
    margin-bottom: 10px;    
    padding: 5px;
}


.img_l img {
    float: left;
    margin-right: 10px;    
}


.img_r img {
    float: right;
    margin-left: 10px;    
}


.img_l img:hover, .img_r img:hover, #flickr img:hover {
    border:1px solid #ff9900;
}


#feed img {
    margin-bottom: 2px;
}
.attachment img {
    padding: 4px;
}

Alles anzeigen

Monika

Du magst ein absolut pixelgenaues Design

der IE und Browser gehen mit margins und paddings anders um,

kann sein, dass es daran liegt,

subjektive Rückmeldung

ich kann auf Deinem Blog kaum was lesen,
daher stört mich dies eher weniger, ob dies langgezogen ist oder nicht,

wenn ich die Schrift vergrößern mag, geht das bei Dir nicht....

drum ist das Verlängern der Suchbox mein geringstes Prob als Userin...

lg

tooltonic

Inwiefern kaum was lesen - Schrift zu klein? Ein Screenshot wäre mir echt hilfreich...

LG Patrick

Im Firefox lässt sich die Schrift sehr wohl mit strg + + vergrössern...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Problem mit dem IE 6.0 - Inhalt kippt unter die Sidebar...

Jetzt mitmachen!