Homepage läuft nicht mit dem Internet Explorer (bis 8) Dringend, da Kunde schon sauer

CharlotteG

Hallo,
ich habe eine Homepage erstellt und stellte nun fest, dass diese in den Internet Explorern (bis aussieht als wäre eine Bombe eingeschlagen. Nach der Browserkompatibilitätsprüfung von Dreamweaver sah ich das es an den css Dateien liegt. Leider ist mir unbekannt wie man diese anlegt, damit die page auch in den älteren Exploren läuft.

Hier der link zu der Browserkompatibilitätsprüfung... http://www.hustert-galvanik.de/test/TMP6cw6cvw2ne.htm

Brauche dringend Hilfe, da der Besitzer der page natürlich verärgert ist.:-(

Und hier der link zu der page ansich: http://www.hustert-galvanik.de

Und hier die css Datei:

HTML

* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }


/* Global properties ======================================================== */
body {
    background:url(../images/body-bg.gif) 50% 0 #adbac2;
    font-family:Arial, Helvetica, sans-serif;
    font-size:100%;
    line-height:1.125em;
    color:#96a3aa;
}
html { min-width:960px;}
html, body { height:100%;}






/* Global Structure ============================================================= */
.container {
    margin: 0 auto;
    position: relative;
    width: 960px;
    font-size:.8125em;
}


    /* Header */
    header{
    height:320px;
    overflow:hidden;
    background:url(../images/header-tail.gif) 50% 0 repeat-x;
    }

    /* Content */
    section#content {
    position:relative;
    z-index:3;
    }
        section#content .container {
    background:#fff;
    background-color: #FFF;
        }
            section#content .inside {
    padding:20px 20px 25px 20px;
            }


    /* Footer */
    footer{
        padding:0 0 83px 0;
    }
        footer .container {
    background:#3b4043;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    font-size:12px;
    text-transform:uppercase;
    color:#6d777b;
    position:relative;
    margin-top:-10px;
    behavior: url(js/PIE.htc);
        }
            footer .inside {
    padding:28px 20px 20px 40px;
    color: #CCC;
            }






/* Left & Right alignment */


.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}


.col-1, .col-2, .col-3, .col-4 { float:left;}
.colborder {border-right:1px solid #dedede;}


.alignright { text-align:right;}
.aligncenter { text-align:center;}


.wrapper {
    width:100%;
    overflow:hidden;
}


/* The inside class provides consistent padding. To be used often! */
.inside{ padding: 20px; }




/*----- form defaults -----*/
input, select, textarea { 
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    vertical-align:middle;
    font-weight:normal;
}


/*----- other -----*/
figure img { 
    margin:0 25px 0 0; 
    float:left;
    border:4px solid #d2d9dd;
}
figure img.noborder {
    border:none;
}
.img-box { 
    width:100%; 
    overflow:hidden; 
    padding-bottom:20px;
}


.extra-wrap { 
    overflow:hidden;
}


p {
    margin-bottom:18px;
    color: #666;
    text-align: justify;
}
.p1 { margin-bottom:9px;}
.p2 { margin-bottom:18px;}
.p3 { margin-bottom:27px;
}




/*----- txt, links, lines, titles -----*/
a {
    color:#3a3a3a;
    outline:none;
    text-decoration: none;
}
a:hover{
    text-decoration:none;
    font-weight: bold;
    color: #F0F3F5;
}


h1 {
    font-size:36px;
    line-height:1.2em;
    text-transform:uppercase;
    background-image: url(../images/Hustert_logo_WEB_klein.jpg);
    background-repeat: no-repeat;
}    
    h1 a {
        color:#fff;
        text-decoration:none;
        font-style:italic;
        text-shadow:1px 1px 0 #922e02;
    }
    h1 a span {
        font-weight:normal;
    }
h2 {
    font-size:24px;
    font-weight:normal;
    line-height:1.2em;
    color:#3a3a3a;
    font-style:italic;
    margin-bottom:22px;
}
h3 {
    font-size:20px;
    line-height:1.2em;
    color:#3a3a3a;
    font-weight:normal;
    font-style:italic;
    position:relative;
    border-bottom:1px solid #dedede;
    padding:13px 0 5px 0;
    margin-bottom:7px;
    width:100%;
}
    h3 img {
        position:absolute;
        right:0;
        top:0;
    }
h4 {
    font-size:1em;
    color:#3a3a3a;
    margin-bottom:18px;
    padding-top:8px;
}
h5 {
    font-size:1em;
    color:#3a3a3a;
    margin-bottom:18px;
}
h6 {
    font-size:1em;
    color:#3a3a3a;
}




mark {color:#3a3a3a; font-weight:bold;}




.more-link {
    color:#333;
    font-weight:bold;
    text-decoration:none;
}
.more-link:hover {
    text-decoration:none;
    color: #F0F3F5;
    background: transparent;
}




.button { 
    background:#383838;
    display:inline-block;
    padding:5px 10px;
    font-size:10px;
    text-transform:uppercase;
    color:#fff;
    text-decoration:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background-image: -moz-linear-gradient(top, #5e5e5e, #383838); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5e5e5e),color-stop(1, #383838)); /* Saf4+, Chrome */
    -pie-background: linear-gradient(#5e5e5e, #383838 70%);
    behavior: url(js/PIE.htc);
    position:relative;
}
.button:hover {
    background-image: -moz-linear-gradient(top, #383838, #5e5e5e); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #383838),color-stop(1, #5e5e5e)); /* Saf4+, Chrome */
    -pie-background: linear-gradient(#383838, #5e5e5e 70%);
}




/*==================boxes====================*/
.box {
    background:#f0f3f5;
    padding:12px 12px 12px 12px;
    border:1px solid #e0e8ed;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    behavior: url(js/PIE.htc);
    position:relative;
}
    .box .inner {
    padding:0 15px 0 15px;
    color: #999;
    }


.address {
    float:left;
    width: 350px;
}
    .address dt {
    margin-bottom:18px;
    color: #666;
    }
    .address dt:first-line {
        font-weight:bold;
        color:#3a3a3a;
    }
    .address dd {
    clear:both;
    color: #666;
    }
        .address dd span {
    float:left;
    width:110px;
    color: #666;
        }
        .address dd a {
            color:#3a3a3a;
        }




blockquote {
    font-style:italic;
    color:#95a2a9;
    background:url(../images/quotes.gif) no-repeat 5px 5px;
    display:block;
    margin-bottom:12px;
}






/*===== header =====*/
header nav {
    position:relative;
    left:0;
    top:10px;
    width:960px;
    height:103px;
    border-radius:12px;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    behavior: url(js/PIE.htc);
    background:#a03100; /* Opera */
    background-image: -moz-linear-gradient(top, #c34811, #a03100); /* FF3.6 */
    background-image: url(../images/head.jpg); /* Saf4+, Chrome */

    overflow:hidden;
    z-index:1;
    background-color: #3C3A3B;
}

    header nav ul {
        float:right;
        padding:34px 25px 0 0;
    }
        header nav ul li {
            float:left;
            padding-left:1px;
        }
            header nav ul li a {
    display:block;
    float:left;
    font-size:15px;
    color:#fff;
    text-decoration:none;
    background:#722300;
    padding:6px 10px 6px 10px;
    font-style:normal;
    border-radius:5px;
    -moz-border-radius:6px;
    -webkit-border-radius:12px;
    behavior: url(js/PIE.htc);
    position:relative;
    font-weight: bold;
    background-color: #036;
    border-top-color: #036;
    border-right-color: #036;
    border-bottom-color: #036;
    border-left-color: #036;
            }
            header nav ul li a:hover {
    background:#fff;
    color:#FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: bold;
    background-color: #666;
    border-top-color: #666;
    border-right-color: #666;
    border-bottom-color: #666;
    border-left-color: #666;
            }




header .logo {
    position:absolute;
    left:-442px;
    top:22px;
    background-image: url(../images/Hustert_logo_WEB_klein.jpg);
    background-repeat: no-repeat;
    width: 404px;
    height: 46px;
}
    header .logo strong {
        display:block;
        font-size:10px;
        text-transform:uppercase;
        color:#571b00;
        margin-top:-8px;
        padding-left:3px;
    }


.slider {
    background:#fff;
    width:960px;
    height:220px;
    left:0;
    top:103px;
    position:absolute;
    z-index:2;
    padding-top:1px;
}






/*===== content =====*/
#content article {
    border-bottom:1px solid #dedede;
    padding-bottom:0px;
    margin-bottom:0px;
}
#content article.last {
    border-bottom:none;
    padding-bottom:0;
    margin-bottom:0;
}
#content .indent {
    padding:32px 5px 0px 21px;
}
    #content .indent .indent {
    padding:0 0 20px 0;
    }

    .list1 {
        margin-bottom:14px;
    }
        .list1 li {
            border-bottom:1px solid #dedede;
            font-size:12px;
            color:#6a7e88;
            padding:0 0 6px 0;
            margin-bottom:7px;
        }
            .list1 li a {
                color:#5ac1e0;
                text-decoration:none;
            }
            .list1 li a:hover {
                color:#000;
                text-decoration:underline;
            }

    .list2 {
    padding-bottom:10px;
    position: static;
    }
        .list2 li {
    background:url(../images/arrow1.gif) no-repeat 0 0;
    padding:1px 0 3px 30px;
    margin-bottom:0px;
    position:fixed;
        }
            .list2 li a {
                color:#96a3aa;
            }


/*===== footer =====*/
footer a {
    color:#6d777b;
    text-decoration:none;
}
footer a:hover {
    color:#fff;
    font-weight: bold;
}


footer span {
    color:#d4d4d4;
}




/*----- forms -----*/
#search-form {
    position:absolute;
    right:25px;
    top:25px;
}
    #search-form fieldset {
        border:none;
        display:inline;
    }
        #search-form input.text {
            width:170px;
            background:#61686f;
            padding:5px 8px 6px 20px;
            border:1px solid #b8c7cf;
            border-radius:14px;
            -moz-border-radius:14px;
            -webkit-border-radius:14px;
            color:#b6c3ca;
            margin-right:4px;
            behavior: url(js/PIE.htc);
            display:block;
            float:left;
            position:relative;
        }
        #search-form input.submit {
            font-size:11px;
            text-transform:uppercase;
            font-weight:bold;
            color:#313639;
            background:#d1dde4;
            border:none;
            border-radius:14px;
            -moz-border-radius:14px;
            -webkit-border-radius:14px;
            width:55px;
            height:27px;
            behavior: url(js/PIE.htc);
            cursor:pointer;
            display:block;
            float:left;
            position:relative;
        }


#contacts-form fieldset {
    border:none;
    width:100%;
    overflow:hidden;
    display:block;
}
    #contacts-form .col-1 {
        width:290px !important;
        margin-right:0 !important;
    }
    #contacts-form .col-2 {
        width:290px !important;
        margin-right:0 !important;
    }
    #contacts-form label {
        display:block;
        height:54px;
        overflow:hidden;
    }
        #contacts-form input {
            color:#111;
            border:1px solid #a4a4a4;
            background:none;
            padding:3px 0 3px 5px;
            width:235px;
        }
        #contacts-form textarea {
            color:#111;
            border:1px solid #a4a4a4;
            background:none;
            padding:3px 0 3px 5px;
            width:280px;
            overflow:auto;
            height:177px;
            margin-bottom:18px;
        }
        #contacts-form .button {
            float:right;
            margin-left:20px;
        }
.inner_copy {border:0;color:#f00;float:left;width:50%!important;margin:-202px 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:12px} 


/*==========================================*/

Alles anzeigen

sejuma

Bereinige zunächst diese Validierungsfehler.
Daran ist ausnahmsweise nicht der IE schuld.

Unregistriert

Ich würde mich schämen, einem Kunden eine Seite mit so vielen Fehlern abzuliefern. Wenn du sowas nicht wirklich drauf hast, sollest du solche Aufträge nicht annehmen

Grevas

Zitat von Unregistriert

Ich würde mich schämen, einem Kunden eine Seite mit so vielen Fehlern abzuliefern. Wenn du sowas nicht wirklich drauf hast, sollest du solche Aufträge nicht annehmen

Hängt natürlich noch davon ab, wie viel man dafür genommen hat (naja, ok, ist dennoch ne schlampige Leistung).
Wenn du den Kunden nicht auf Browserprobleme Hingewiesen hast, ist es natürlich jetzt dein Problem. Das nächste mal legst du fest, welche Browser getestet & sauber laufen sollen - und beim IE6-7 soll man auch gut ~20% extra einplanen (je nach aufwändigkeit, bei der Seite wäre es gar nicht soooo schlimm - wenn man die Erfahrung hat).
Reine Umsetzung des Layouts & des komischen Sliders (ohne Flash, sondern mit JS), würde ich persönlich auf 1-2 Tage schätzen (was je nach einem durschnittlichen Developersatz immerhin schon 960 eus wären). Sprich, wenn du weniger genommen hast und das Layout und Rest übernommen hast - kriegt er das wofür er bezahlt hat...

Bandit

Zitat von Grevas

Hängt natürlich noch davon ab, wie viel man dafür genommen hat

Wenn man zuwenig bekommen hat, hat man eben schlecht verhandelt. Deswegen sollte man trotzdem nicht so eine schlampige Arbeit abliefern, denn a) ist das dem Kunden gegenüber nicht fair und b) verbaut man sich selber die Chance auf Folgeaufträge.

Tags