Komme nicht weiter:Darstellung absolut falsch in IE6 und IE7

Unregistriert

Hallo zusammen,
bisher habe ich meine CSS-Probleme immer u.a. durch Lesen in diesem Forum beheben können. Dafür schon einmal vielen Dank.

Jetzt habe ich allerdings ein Darstellungsproblem im IE6 und IE7, welches ich leider alleine nicht beheben kann...

Mehrere Elemente innerhalb eines Iframes (als roter Kasten auf dem ersten Bild sichtbar) werden nicht richtig positioniert und das graue Menü wird am unteren Rand zu früh abgeschnitten.
[Blockierte Grafik: http://www.medikalprodukte.de/assistent/cssfehler/ie6.jpg]

[Blockierte Grafik: http://www.medikalprodukte.de/assistent/cssfehler/ie7.jpg]

Eigentlich sollte die Seite folgendermaßen aussehen: (screenshot Firefox)

[Blockierte Grafik: http://www.medikalprodukte.de/assistent/cssfehler/firefox.jpg]

Hat jemand von euch eine Idee wie ich diese Darstellungsfehler beheben kann?
Hier ist einmal eine Testseite zu dem Projekt:
http://www.profis-pflegen.de/schutzbrillen/assistent/index.html

Schon einmal im Vorraus vielen Dank für eure Mühe.

Viele Grüße
Euer Stefan

PS: Das ist der CSS-Code des Iframes.

Code

*{
  margin:0;
  padding:0;   
}
/*
Schliesst alles ein:
*/
html,body {
    font:95% Arial, Geneva, Arial, Helvetica, sans-serif;   
    color:#000;
    background:#fff;
   margin:0;
    padding:0;
    height:100%;
   border:0;
   overflow:hidden;

}
/*
Links
*/
a {
   color:#333333;
   text-decoration: underline;
   font-style:normal;
   font-weight:bold;
}
a img {
   border:0;   
}


a:hover {
   color:#333333;
   text-decoration:underline;
}


/*
Überschriften
*/
h1,h2,h3 {
   font-family:Tahoma, Geneva, Arial, Helvetica, sans-serif;
   color:#000000;
   background:transparent;
}
h1{
   font-size: 1.0em;
}


h2{
   font-size:0.8em;
}
h3{
   font-size:0.7em;
}
/*
Kompletter Body inklusive Auswahlmaske:
*/
#container{
   margin:0;
   height:100%;
    overflow:hidden; /* vorher auto*/
   color:#000000;;
   background:#ffffff;
   width:510px;   
}
/*
Auswahlmaske des Assistenten:
*/
#header{
   background:#ffffff;
   position:fixed;/*absolute;*/
   top:0; left:0; right:0;


    top:0px;
    background:#efefef;
    text-align:left;
    padding-right:0px;
   width:460px;
   height:492px;
   padding-left:0px;
   margin-left:20px;
   margin-right:20px;
   border-bottom:2px solid #c0c0c0;
   line-height:140%;
   font-size:0.95em;
   overflow:hidden;
   border:medium;
   border:2px solid #cecece;-moz-border-radius:14px 14px 14px 14px;
}


.auswahlstatuschecked{
   background-color:#bed3a0; /* vorher #e2ecd5;*/
   font-weight:bold;
   border:6px solid #bed3a0;-moz-border-radius:7px 7px 7px 7px;/*#808080*/
   color:#000000;      
}
label.auswahlstatuschecked:hover{
   background-color:#86ae4f;
   border:6px solid #86ae4f;-moz-border-radius:7px 7px 7px 7px;/
}
.auswahlstatusunchecked{
   background-color:#efefef;
   font-weight:bold;
   border:6px solid #DDDDDD;-moz-border-radius:7px 7px 7px 7px;
   color:#000000;

}
label.auswahlstatusunchecked:hover{
   background:#bed3a0;
   border:6px solid #bed3a0;-moz-border-radius:7px 7px 7px 7px;/*#808080*/
}


#title{
   font-size:1.4em;
   font-weight:bold;
   margin-bottom:3px;
   width:440px;
   height:28px;
   margin-left:0px;
   text-align:center;
}
#menue{
   width:460px;
   margin-bottom:10px;
   padding-left:0px;
   padding-top:10px;
   padding-bottom:10px;
   hight:621px;
}
/* Abstaende im Menue auf der linken Seite der Radiobuttons*/
#ja1, #ja2, #ja3, #ja4, #ja5, #ja6, #ja7, #ja8, #ja9, #ja10{
   margin-left:15px;
}
.auswahl{
   font-size:1.3em;
   font-weight:bold;
   margin:0px 0px 10px 0px;

   padding-left:15px;
   padding-top:5px;
}
div.eigenschaft:hover{
   background-color:#f5f5f5; /*#dfdfdf;*/
   padding-bottom:10px;
   border-width:thin;
   border-top-style:dotted;
   border-top-color:#b6b6b6;
}
.eigenschaft{
   padding-bottom:10px;
   border-width:thin;
   border-top-style:dotted;
   border-top-color:#b6b6b6;
}
.letzteeigenschaft{
   padding-bottom:10px;
   border-width:thin;
   border-top-style:dotted;
   border-top-color:#b6b6b6;-moz-border-radius-bottomleft:14px;-moz-border-radius-bottomright:14px;
}
div.letzteeigenschaft:hover{
   background-color:#f5f5f5;
   padding-bottom:10px;
   border-width:thin;
   border-top-style:dotted;
   border-top-color:#b6b6b6;-moz-border-radius-bottomleft:14px;-moz-border-radius-bottomright:14px;
}
.einprodukt{
   min-height:120px;
   /*Trennlinie*/
   border-left:solid;
   border-color:#87b45a;
   border-width:thin;
   border-bottom-style:dotted;
   border-bottom-color:#b6b6b6;


}
/*
Kompletter Text der Produkte in den Ergebnissen:
*/
#gesamtzahl{ /* div-Bereich wo Zahl Treffer und Gesamtzahl stehen */
   margin-top:500px;
   width:460px;
   padding-left:20px;
   text-align:center;
   padding-top:5px;
}


#treffer{
   font-size:22px;
   font-weight:bold;
}
#treffertext{
   text-align:center;
   font-weight:normal;
   font-size:11px;
   color:#808080;
}
.ergebnisse{
   margin-top:5px;
   height:1380px;
   overflow:scroll; /* bisher 1630px */
   position:relative;
   border-top:solid;
   border-top-color:#87b45a;
   border-top-width:thin;


}
.produktinfos {
   float:right;
   width: 300px;
   margin-top:5px;
}
.produkttitel{
   font-size:1.0em;
   font-weight:bold;
}
.artikelnr{
font-size:0.79em;
font-weight:normal;   
}
.artnrfett{
   font-weight:bold;
   margin-right:17px;   

}
.lieferzeit{
   font-weight:bold;
   font-size:0.79em;
}
.imglieferzeit{
   margin-left:0.2em;
   }
.kurzbeschreibung{
   font-family:Tahoma,Helvetica,sans-serif;
   font-weight:normal;
   font-size:0.78em;
   text-align:left;
}   
.preis{
   color:#0000ff;
   font-weight:bold;
    text-align:right;
   width:290px;
}
.mwst, .versandkosten {
   font-size:0.6em;
   font-weight:normal;
   text-align:right;
   width:290px;   
}


.produktbild{
   margin-bottom:50px;
   padding-left:10px;
}


.imgbasket{
   margin-left:390px;
   margin-bottom:20px;

#ffffd2;   
}
.details{

}
/*
FÜR MOUSEOVER-Info zu Eigenschaften im Menü
*/
#dhtmltooltip{
position: absolute;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color:lightyellow;
visibility: hidden;
z-index: 100;
font:#003580;
/*Unten wird ein Schatten erzeugt*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}


#java{
   color:#ff0000;
   font-weight:bold;
   font-size:larger;
}
#deaktiviert{
   text-decoration:underline;
}


/*
Bei Null Treffern
*/ 
#nulltreffer, #nulltreffer2{
   font-weight: bold;
   font-size:17px;
   color:#bb0000;
}
#beratung1{
   margin-top:70px;
   font-size: 15px;
}

Alles anzeigen

Billbos

Hast du auf das clearen geachtet? Vielleicht ein margin oder padding falsch. Ich weiß nicht ganz recht, ob es richtig ist, das sind meine Fehler die ich desthäufigeren mache. Für den IE6 würde ich mich nicht mehr so in Schale schmeißen, außer du sprichst eine Zielgruppe an, bei der du auf die Barrierenfreiheit acht geben musst!

Bandit

Bei 89/6 Fehlern wundert mich nix:

http://validator.w3.org/check?uri=http…=Inline&group=0

http://jigsaw.w3.org/css-validator/…nt%2Findex.html

Unregistriert

Hallo Billboss und Bandit600,
vielen Dank für eure schnelle Antworten und die Tipps.
Ich werde mit diesen neuen Informationen jetzt erst ein paar Tage selber herumprobieren...
Die Sache mit dem clearen habe ich nämlich z.B. nicht beachtet.

Nachdem ich versucht habe eure Verbesserungsvorschläge umzusetzen werde ich mich wieder melden und ggf konkretere Fragen stellen können..

Schon einmal vielen Dank

Viele Grüße
Euer Stefan

PS: Über ergänzende Vorschläge oder Ideen freue ich mich natürlich trotzdem immer

synaptic

also der ie6 kennt schomma position:fixed nich...

ich würd an deiner stelle nochma dahergehen und des ding neu aufziehen ohne irgednwelche positions..
sondern mit wrappern, paddings und margins
dazu noch verschiedene stylesheets und die dann mitconditional comments eingebunden.. dabei kannste auch direkt darauf achten die fehler für validen code auszubessern

stefan24

Hallo synaptic,
vielen Dank für deine interessanten Vorschläge.

Deine Idee klingt genial und logisch zugleich. Wenn man keine positions verwendet, können die schließlich auch keine Probleme machen ;-).

Leider hapert es bei mir aber an der Umsetzung, denn ich benötige für das Auswahlmenü einen feststehenden Bereich im Kopf der Seite.

Kann man einen Bereich in einer Website statisch gestalten ohne position zu verwenden? Mir würden da nur frames einfallen, aber die werden meines Wissens inzwischen nur noch sehr selten bis gar nicht mehr verwendet...(ist aber wie gesagt nur meine Anfängermeinung. Kann sein, dass ich gerade totalen Mist erzähle.)

Kennt jemand von euch eigentlich eine gute Infoseite für wrapper?
Ich habe bei meinen Recherchen meist nur gefunden, wie man damit Texte zentriert. Außerdem habe ich noch diesen Assistenten für jede erdenkliche Textform gefunden aber ich würde lieber das Prinzip von wrappern verstehen und es dann selber schreiben.
http://csstextwrap.com/#export

Wo genau ist der Unterschied von wrappern im Vergleich zu herkömmlichen margins und paddings?

Über eine Antwort würde ich mich sehr freuen.

Vielen Dank für eure Mühe

Euer Stefan

synaptic

also ich hab dir mal nen anfang gemacht.. ggf blickste ja was abgeht

HTML

<!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>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    #outer_wrap{
        width:906px;
        margin:0 auto;
    }
    #searchbar{
        float:right;
        height:27px;
        margin-top:5px;
        width:290px;
    }
    #header{
        background:url(http://www.profis-pflegen.de/images/logo.gif) no-repeat;
        height:117px;
        width:896px;
        float:left;
    }
    #upper-right{
        background:url(http://www.profis-pflegen.de/images/upper-right.gif) no-repeat;
        height:117px;
        width:10px;
        float:left;
    }
    #border_left{
        background:url(http://www.profis-pflegen.de/images/border-left.gif);
        height:33px;
        width:4px;
        float:left;
    }
    #navi{
        height:33px;
        width:895px;
        background:url(http://www.profis-pflegen.de/images/1st-nav-bg.png);
        float:left;
    }
    #border_right{
        background:url(http://www.profis-pflegen.de/images/border-right.gif);
        height:33px;
        width:4px;
        float:left;
    }
    #center_wrap{
        margin:0 auto;
    }
    .sidecol{
        width:190px;
        float:left;
        border:1px dashed black;
        background:#a5f5bf;
    }
    .maincol{
        float:left;
        border:1px dashed black;
        width:520px;
        background:#f89a9c;
    }
    .sidecol p, .maincol p{
        padding:5px;
    }
    #footer_wrap{
        width:895px;
        text-align:center;
        border:1px dotted red;
    }
    .clearer{
        clear:both;
    }
    </style>
    </head>
    <body>
        <div id="outer_wrap">
            <div id="top_wrap">
                <div id="header">
                    <div id="searchbar"><input type="text" size="17" value="hier is leer" /> <a href="javascript:alert('hier gibbet nix')">suche bla</a></div>
                </div>
                <div id="upper-right"></div>
                <div id="border_left"></div>
                <div id="navi">
                    die html-coderei für die navi spar ich mir hier...
                </div>
                <div id="border_right"></div>
                <div class="clearer"></div>
            </div>
            <div id="center_wrap">
                <div class="sidecol">
                    <p>
                        Ca se nutus Vallo Sollertia solum. Ago 
                        inhaeresco at vis socer attollo Elatus.
                        Mus Qua, Immanis Me. Opera tutus hae Cur resumo 
                        Inflexus laxo hortus seu multipliciter officiosus, 
                        Daci humus Exsupero ivi vituperabilis Depascor 
                        stabilis an animus. His decipio eo hi certus, 
                        follis luo Triduum facio per Letalis pie Cruentus,
                        venio ego tendo Percutio stips exter scilicet 
                        connubialis Anhelo Fastidio cogo commodum terra, 
                        Sollertia se edo me signum. Pullulo edo Lugo in 
                        lex Edoctus capio concedo ictus, ego sic magnificabiliter
                        Retribuo an Laurus penitus, refero abeo os ile 
                    </p>
                </div>
                <div class="maincol">
                    <p>
                        Ca se nutus Vallo Sollertia solum. Ago 
                        inhaeresco at vis socer attollo Elatus.
                        Mus Qua, Immanis Me. Opera tutus hae Cur resumo 
                        Inflexus laxo hortus seu multipliciter officiosus, 
                        Daci humus Exsupero ivi vituperabilis Depascor 
                        stabilis an animus. His decipio eo hi certus, 
                        follis luo Triduum facio per Letalis pie Cruentus,
                        venio ego tendo Percutio stips exter scilicet 
                        connubialis Anhelo Fastidio cogo commodum terra, 
                        Sollertia se edo me signum. Pullulo edo Lugo in 
                        lex Edoctus capio concedo ictus, ego sic magnificabiliter
                        Retribuo an Laurus penitus, refero abeo os ile 
                        ferito nam De ora Personam Strepitus carina Refero
                        Optatus arma texo arca Dilgenter ferox Luxuria. 
                        Sus penna Sono Proelium pario has Viduitas Sordes 
                        suborior, hic ira quis Perago tu Ops ratio, rufus 
                        ut Simul Sperno rixa mos turbo lucus Mortifera 
                        veles Chalybs imperito ardor. Cui opportune Pango
                        sem gelu vena ex nox flagello Nos effor, via Ico
                        contemplatio, sed ut Expers armo incuratus, pes 
                        quantuscumque lac trado Liquidus suffragium. Dito
                        abeo solum captus fastigate, se Contentus gaza eduro 
                        redigo, se Cuneus aura stupeo tam ac Despero sedulo 
                        de Agrarius. Solito nego sepulcrum vos Ergo nam ualeo
                        lex desero. Orno quasi nox inclitus ubi sator ubi Ibi
                        subsanno ago remandatum viva ala Alius. Pala iam, 
                        voluptuosus Didicerat, sesquimellesimus Lama nam 
                        qui quo seco Paciscor nam Se specialitas lumen.
                    </p>
                </div>
                <div class="sidecol">
                    <p>
                        Ca se nutus Vallo Sollertia solum. Ago 
                        inhaeresco at vis socer attollo Elatus.
                        Mus Qua, Immanis Me. Opera tutus hae Cur resumo 
                        Inflexus laxo hortus seu multipliciter officiosus, 
                        Daci humus Exsupero ivi vituperabilis Depascor 
                        stabilis an animus. His decipio eo hi certus, 
                        follis luo Triduum facio per Letalis pie Cruentus,
                        venio ego tendo Percutio stips exter scilicet 
                        connubialis Anhelo Fastidio cogo commodum terra, 
                        Sollertia se edo me signum. Pullulo edo Lugo in 
                        lex Edoctus capio concedo ictus, ego sic magnificabiliter
                        Retribuo an Laurus penitus, refero abeo os ile 
                    </p>
                </div>
                <div class="clearer"></div>
            </div>
            <div id="footer_wrap">
                <p>
                    Ca se nutus Vallo Sollertia solum. Ago 
                    inhaeresco at vis socer attollo Elatus.
                    Mus Qua, Immanis Me. Opera tutus hae Cur resumo 
                </p>
            </div>
        </div>
    </body>
</html>

Alles anzeigen

is nur im firefox getestet.. dafür is es aber valides xhtml und ohne tabellen hatte jetzt leider keine zeit mehr denn ich muss pennen und vorher noch knapp 20 viecher versorgen

stefan24

Hallo,
schon mal vielen Dank. Echt super nett :). Ich werde mir das nachher, bzw. morgen mal in Ruhe anschauen.

Noch einen schönen Abend

Viele Grüße

Stefan

Tags