(css) Design im Internetexplorer verrutscht ?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

19:17, 15.11.2008

Hallo,

habe hier ein ganz blödes problem und weiß nicht so genau ob das jezt hier wirklich reinkommt. Undzwar wird das design im Firefox richtig angezeigt, aber im Internet explorer ist der Header in die Mitte gerutscht. Hier mal eine Demo zum anschauen: www.S-code.de.vu.
Scheint wohl an der Style.css zu liegen.

* {
        margin: 0;
        padding: 0;
        }

html, body {
        height: 100%;
        }

body {
        font-family: Geneva, Arial, Helvetica, sans-serif;
        }

/* -------------------------------------------------------------------------- */

#container {
        width: 750px;
        margin: 0 auto;
        min-height: 100%;
        background: url(images/containerbg.gif);
        padding-bottom: 50px;
        border-left: 5px solid #5D5D5D;
        border-right: 5px solid #5D5D5D;
        }

/* -------------------------------------------------------------------------- */

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

.clearfix {
display: inline;
}

    * html .clearfix {height: 1%;}
        .clearfix {display: block;}

/* -------------------------------------------------------------------------- */

#nav {
        width: 213px;
        float: left;
        }

h4 {
        font-size: 12px;
        height: 18px;
        color: #FFF;
        padding: 3px 0 0 10px;
        }

#nav ul {
        list-style-type: none;
        margin-bottom: 15px;
        }

#nav a {
        display: block;
        font-size: 10px;
        font-weight: bold;
        color: #999;
        text-decoration: none;
        margin: 0 4px auto 4px;
        padding-left: 5px;
        border-bottom: 1px solid #CCC;
        height: 12px;
        padding-top: 7px;
        }

#nav a:hover {
        background: #F5F5F5;
        }

#ad a {
        width: 200px;
        margin: 5px auto;
        padding: 0;
        border-bottom : 0;
        height: 400px;
        }

/* -------------------------------------------------------------------------- */

#login input {
        border: 1px solid #CCC;
        font-size: 14px;
        font-weight: bold;
        font-style: italic;
        color: #CCC;
        width: 200px;
        margin: 3px 6px;
        text-align: center;
        }

#login input#submit {
        font-style: normal;
        color: #999;
        }

#login input#uname:focus, input#pword:focus {
        border: 1px solid #999;
        font-style: normal;
        color: #999;
        }

#login fieldset {
        border: 0;
        }

#login legend {
        display: none;
        }

#login label {
        display: none;
        }

/* -------------------------------------------------------------------------- */

#rightside {
        float: right;
        width: 532px;
        }

/* -------------------------------------------------------------------------- */

h1 {
        height: 93px;
        text-indent: -9999px;
        border-bottom: 1px solid #666;
        }

/* -------------------------------------------------------------------------- */

#colourchange {
        height: 31px;
        background: url(images/colourchangebg.gif);
        text-align: right;
        }

#colourchange ul {
        list-style-type: none;
        margin-right: 15px;
        float: right;
        margin-top: 5px;
        }

#colourchange li {
        margin-right: 5px;
        width: 20px;
        height: 20px;
        float: left;
        }

#colourchange img {
        border: 0;
        }

#colourchange img:hover {
        border: #FFF;
        }

/* -------------------------------------------------------------------------- */

h2 {
        background: url(images/contenthead.gif);
        height: 14px;
        font-size: 12px;
        border-top: 5px solid #5D5D5D;
        padding: 3px 0 3px 10px;
        color: #666;
        }

/* -------------------------------------------------------------------------- */

h3 {
        font-size: 16px;
        color: #666;
        margin: 15px 7px;
        border-bottom: 3px double #999;
        }

#rightside p, a {
        font-size: 12px;
        color: #999;
        text-decoration: none;
        margin-left: 20px;
        margin-right: 10px;
        }

#colourchange a {
        margin-left: 0;
        }

#rightside a {
        margin: 0;
        }

/* -------------------------------------------------------------------------- */

#footer {
        background: url(images/footer.gif);
        width: 750px;
        margin: 0 auto;
        height: 25px;
        margin-top: -25px;
        text-align: right;
        border-left: 5px solid #5D5D5D;
        border-right: 5px solid #5D5D5D;
        }

#footer p, a {
        font-size: 12px;
        color: #666;
        margin-right: 100px;
        padding-top: 4px;
        }

#footer a {
        margin: 0;
        }

Vielen dank für eure Hilfe.

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
~~e********l~~

13:48, 19.11.2008
Bevor du irgendwas am CSS änderst, setz erstmal einen vernünftigen HTML Doctype in dein Dokument. Derzeit wird deine Seite die du angegeben hast im Quirks Modus angezeigt und das willst du mit Sicherheit nicht ^^

//edit: Und wenn ich so in deinen Code schaue...dann beginnt eine TR in mitten eines DIVs ohne die dazugehörige TABLE Definition. Da hat dein HTML Generator großen Mist an vielen Stellen gemacht...

Beitrag geÃ¤ndert: 19.11.2008 13:50:04 von evil-devil
seth93

seth93 hat kostenlosen Webspace.

14:17, 19.11.2008
Für Internet Explorer musste meistens eine 2.CSS-Datein anlegen und dann musste gucken ob da noch Pixel hinzugefügt werden müssen oder
ob du abzeihen musst, das macshte dann mit "-" (Minus)
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city