Inkompatibilitätsprobleme beim Internet Explorer

Chr!s · 10.10.2006, 23:00

Abend,
und ich hab mal wieder Probleme mit dem Internet Explorer, die ich nicht gebacken bekomme. Ich hoffe ihr könnt mir helfen.

Da der "Kunde" diskretion erwünscht hat, stelle ich hier mal unkenntlich gemachte Screenshots rein, bei denen man das Problem aber schön erkennen kann. Ich bin für jeden Tipp dankbar.

Hier einmal der HTMLCode:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<!-- Meta Angaben, CSS Angaben, JavaScript-Angaben herausgenommen -->
<link rel="stylesheet" href="framework.css" type="text/css" />
</head>

<body>
    <div id="master">
        <h1>&Uuml;berschrift</h1><br class="clear" />


        <div id="navigation">
            <img src="img/nav_left.gif" width="5" height="32" alt="" class="left inline" />
            <img src="img/nav_right.gif" width="5" height="32" alt="" class="right inline" />

            <div id="navigationcontent">
                <a href="#">Breadcumb-Content</a>
            </div>
        </div>

        <!-- Language Switch rausgenommen -->

        <div id="contentframe">
            <img src="img/tl_curve_white.gif" width="6" height="6" alt="" class="left inline" />
            <img src="img/tr_curve_white.gif" width="6" height="6" alt="" class="right inline" />

            <div id="rightmenu">
                <div id="sectionlinks">
                </div>

                <div id="relatedlinks">
                    <div id="menu">
                        <ul>
                            <li><a href="#">HTML-Pr&auml;sentation</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                            <!-- Links herausgenommen -->
                        </ul>
                    </div>
                </div>
            </div>

            <div id="breadcumb">
                Nochmal ne &Uuml;berschrift
            </div>

            <div id="content">
            Hier steht dann der Content ... (Die große weisse Fläche)
            </div><br class="clear" />

            <div id="copyright">
            <p class="center">

                | &copy;2006 Projekt |
            </p>
        </div>

    </div> <!-- contentframe -->
</div> <!-- master -->

</body>
</html>

Und der CSSCode (zum reproduzieren

Code:

body {
    font: normal 1em Arial, Verdana, Tahoma, Sans-Serif;
    color: #333;
    background: #ccc url(../img/background.jpg) repeat-x fixed;
    margin-bottom: 0;
}

h1{
    font: normal 120% Arial, Verdana, Tahoma, Sans-Serif;
    color: #fff;
    display: block;
    float: left;
    padding: 0;
    margin: 0;
}

ul, li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

img {
    border: 0;
}

label {
    color: #eee;
}

#logo {
    width: 229px;
    height: 71px;
    float: right;
}

#master {
    width: 96%;
    margin: 0 auto;
}

* html #master {
    position: absolute;
    margin-left: 2%;
    margin-right: 2%;
}

#languageswitch {
    float: right;
    background: #fff;
    border: 1px solid #000;
    width: 25%;
    height: 32px;
    font: normal 75% Arial, Verdana, Tahoma, Sans-Serif;
    text-align: center;
    line-height: 33px;
    color: #ddd;
}

#navigation {
    display: inline;
    margin-top: 12px;
    width: 100%;
    vertical-align: middle;
    background: url(../img/nav_middle.gif) repeat-x;
    height: 32px;
}

#navigation a:link, #navigation a:visited {
    font: bold 80% Arial, Verdana, Tahoma, Sans-Serif;
    color: #000;
    text-decoration: none;
}

#navigation a:hover, #navigation a:active {
    font: bold 80% Arial, Verdana, Tahoma, Sans-Serif;
    color: #000;
    text-decoration: none;
    background: url(../img/nav_hover.gif);
}

#navigationcontent {
    padding-top: 6px;
    font-weight: bold;
    background: url(../img/nav_middle.gif) repeat-x;
    height: 32px;
}

#contentframe {
    width: 100%;
    background: #fff;
}

#breadcumb {
    padding: 5px 0px 5px 10px;
    font: small Verdana, Tahoma, Helvetica, sans-serif;
    color: #aaa;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

#breadcumb a {
    color: #aaa;
}

#breadcumb a:hover {
    color: #005FA9;
    text-decoration: underline;
}

#content {
    padding: 0 10px 0 0;
    margin: 0 178px 0 10px;
    vertical-align: top;
    min-height: 200px;
    height: 200px;
}

html>body #content {
    height: auto;
}

#rightmenu {
    float: right;
    width: 178px;
    background: #f5f7f7;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font: small Verdana, Tahoma, Arial, sans-serif;
    margin: 0;
    margin-right: -6px;
    padding: 0;
}

#sectionlinks a:link, #sectionlinks a:visited {
    display: block;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    background: url(../img/bg_nav.jpg);
    font-weight: bold;
    padding: 3px 0 3px 10px;
    color: #21536a;
    text-decoration: none;
}

#sectionlinks a:hover, #sectionlinks a:active {
    border-top: 1px solid #ccc;
    background: #ddeeff;
    font-weight: bold;
    text-decoration: none;
}

#rightmenu a:link, #rightmenu a:visited {
    display: block;
}

#rightmenu a:hover, #rightmenu a:active {
    display: block;
}

#rightmenu h3{
    font: bold 1em Arial,sans-serif;
    color: #334d55;
    margin: 0;
    padding: 10px 0px 2px 0px;
    border-bottom: 1px solid #cccccc;
}

#menu ul, #menu li {
    padding: 0;
    margin: 0;
}

#relatedlinks {
    padding: 0 0px 2px 10px;
}

#relatedlinks a:link, #relatedlinks a:visited, #menu a:link, #menu a:visited {
    color: #005fa9;
    text-decoration: none;
    margin: 0;
    font: normal 1em Arial, Verdana, Tahoma, Sans-Serif;
}

#relatedlinks a:hover, #relatedlinks a:active, #menu a:hover, #menu a:active {
    color: #005fa9;
    text-decoration: underline;
    margin: 0;
    font: normal 1em Arial, Verdana, Tahoma, Sans-Serif;
}

#copyright {
    border-top: 1px solid #cccccc;
    font-size: small;
    color: #ccc;
    padding: 10px 10px 10px 10px;
    margin-top: 0;
    background: #fff;
}

.clear {
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

.inline {
    display: inline;
}

Ich wäre echt froh wenn jemand eine Lösung für mein (typisches?) Problem hat, oder zumindest einen Lösungsansatz. Letzte Möglichkeit wär einfach die runden Ecken wegzulassen aber ob das dem Kunden gefällt ist das andere ..

Danke im Vorraus

Ben · 10.10.2006, 23:30

Zitat:

Zitat von Chr!s

bei denen man das Problem aber schön erkennen kann.

Sorry .. ähm, was genau?

Chr!s · 11.10.2006, 00:04

Zitat:

Sorry .. ähm, was genau?

Okay

Die runden Ecken sind im Internet Explorer (erstes Bild) nicht nur rund, sondern da legt sich noch das Hintergrundbild drüber. Das ist so bei allen runden Ecken.

Außerdem ist das Menü (rechts) total deformiert, und ich habe bisher nicht rausbekommen, warum. Das sieht man jetzt nicht so gut am Screenshot, ok, aber man erkennt die unterschiedlichen Schriftgröße und es wird auch deutlich, wenn man den Code den ich gepostet hab mal laufen lässt.

PS: Aha, wir haben ja schon 0 Uhr, alles gute Ben zum Geburtstag!

Xean · 12.10.2006, 16:16

Hast du die Bilder noch irgendwo???
Ich kenn da jemanden, der dir helfen könnte, dem würd ich dann das ganze packet zu schicken

Artemis · 13.10.2006, 19:37

Entferne mal die XML-Deklaration am Anfang und gib das Charset per Meta-Angabe aus.
So wie bisher schaltet der IE in den Quirks-Modus, wo bekanntlich einiges anders dargestellt wird.

13.10.2006, 19:37	Nach oben #5
Artemis Semantic Web Fanatic Registriert seit: 03.06.2006 Beiträge: 237	Entferne mal die XML-Deklaration am Anfang und gib das Charset per Meta-Angabe aus. So wie bisher schaltet der IE in den Quirks-Modus, wo bekanntlich einiges anders dargestellt wird. __________________ Applikations-Programmierung: BlitzMax, BlitzPlus Webentwicklung: PHP, (X)HTML, CSS, JavaScript, MySQL

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Internet Explorer 8.0 im Visier der Entwickler	Ben	Nachrichten	2	26.10.2006 16:18
Internet Explorer RC1 veröffentlicht	Lars	Nachrichten	1	13.09.2006 09:03
Pluginseite für den Internet Explorer veröffentlicht	Ben	Nachrichten	4	04.09.2006 13:08
Sicherheitsleck lässt Internet Explorer abstürzen	Ben	Nachrichten	11	03.11.2005 13:21

12.10.2006, 16:16	Nach oben #4
Xean Erfahrener Benutzer Registriert seit: 17.08.2005 Beiträge: 425	Hast du die Bilder noch irgendwo??? Ich kenn da jemanden, der dir helfen könnte, dem würd ich dann das ganze packet zu schicken

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken