✔ Probleme mit IE

Status
Nicht offen für weitere Antworten.
P

Pherseus

Erfahrenes Mitglied
Hi hab folgende HTML Seite gemacht http://www.pherseus.net/test/index.htm

Funktioniert im Firefox auch wunderbar nur im IE (getest mit IE6) sieht es nicht wie gewünscht aus. Hat jemand eine Idee woran es liegt? Hier noch der entsprechende Quellcode:

Code: 
body {
    background-color:#05134D;
    margin:0px 0px;
    text-align:center;
}

img {
    border:0px;
}

div.head {
    background-image:url(./backgrounds/head_back.gif);
    margin:0px auto;
    text-align:left;
    width:998px;
}
    div.top {
        background-image:url(./backgrounds/top.gif);
            width:870px;
        height:10px;
        font-size:0px;
        margin:0px 64px;
    }

    div.banner {
        background-image:url(./backgrounds/banner.jpg);
        width:870px;
        height:116px;
        margin:0px 64px;
    }

    div.navi {
        width:870px;
        height:30px;
        margin:0px 64px;
    }

div.main {
    background-image:url(./backgrounds/head_back.gif);
    margin:0px auto;
    text-align:left;
    height:500px;
    width:998px;
}

    div.status {
        float:left;
        width:227px;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:64px;
        padding:0px;
    }
        div.status_head {
            background-image:url(./backgrounds/status_head.gif);
            width:227px;
            height:28px;
        }
            div.status_head p {
                margin:0px;
                padding-top:6px;
                padding-left:20px;
                color:#FFFFFF;
                font-family: tahoma;
                font-size: 12px;
                font-weight:bold;
            }

        div.status_back {
            background-image:url(./backgrounds/status_back.gif);
            width:227px;
        }

        div.status_foot {
            background-image:url(./backgrounds/status_foot.gif);
            height:18px;
            width:227px;
        }

    div.content {
        float:left;
        width:603px;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:40px;
        margin-right:64px;
    }

        div.content_head {
            background-image:url(./backgrounds/content_head.gif);
                width:590px;
            height:28px;
        }
            div.content_head p {
                margin:0px;
                padding-top:6px;
                padding-left:20px;
                color:#FFFFFF;
                font-family: tahoma;
                font-size: 12px;
                font-weight:bold;
            }

        div.content_back {
            background-image:url(./backgrounds/content_back.gif);
            width:590px;
            height: 250px;
        }

        div.content_foot {
            background-image:url(./backgrounds/content_foot.gif);
            height:42px;
            width:590px;
        }

HTML: 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "./xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>OpenPHP-Portal v0.01 - newsliste</title>
        <link rel="stylesheet" type="text/css" href="./default.css" />
        <meta name="description" content="OpenPHP Portal" />
        <meta name="keywords" content="OpenPHP Portal" />
        <meta name="robots" content="index,follow" />

        <meta name="revisit-after" content="1 weeks" />
            <meta name="author" content="Pherseus - http://www.pherseus.net/" />
            <meta name="language" content="de" />
        <meta name="publisher" content="Pherseus - http://www.pherseus.net/" />
    </head>
    <body>
        <div class="head">
            <div class="top"></div>
            <div class="banner"></div>

            <div class="navi">
                <map name="navi">
                    <area shape="rect" coords="0,0,110,30" href="index.php?module=news&action=list">
                    <area shape="rect" coords="111,0,219,30" href="navi2">
                    <area shape="rect" coords="220,0,328,30" href="navi3">
                    <area shape="rect" coords="328,0,438,30" href="navi4">
                    <area shape="rect" coords="438,0,548,30" href="navi5">
                    <area shape="rect" coords="548,0,658,30" href="navi6">
                    <area shape="rect" coords="658,0,768,30" href="navi7">

                    <area shape="rect" coords="768,0,870,30" href="navi8">
                </map>
                <img src="./backgrounds/navi.gif" usemap="#navi">
            </div> 
        </div>
        <div class="main">
            <div class="status">
                 <div class="status_head"><p>Latest News</p></div>
                <div class="status_back"></div>

                <div class="status_foot"></div>
            </div>
            <div class="content">
                <div class="content_head"><p>{$News}</p></div>
                <div class="content_back"></div>
                <div class="content_foot"></div>
            </div>  
        </div>
    </body>

</html>
 
Da es sich hierbei um ein CSS-Problem handelt, wandert der Thread in's entsprechende Forum ;)
 
Probier mal folgendes Stylesheet, in dem ich die relevanten margin-Angaben für den IE halbiert, und das Content-DIV mit float:right ausgerichtet habe:

CSS: 
body {
    background-color:#05134D;
    margin:0px 0px;
    text-align:center;
}

img {
    border:0px;
}

div.head {
    background-image:url(./backgrounds/head_back.gif);
    margin:0px auto;
    text-align:left;
    width:998px;
}
    div.top {
        background-image:url(./backgrounds/top.gif);
            width:870px;
        height:10px;
        font-size:0px;
        margin:0px 64px;
    }

    div.banner {
        background-image:url(./backgrounds/banner.jpg);
        width:870px;
        height:116px;
        margin:0px 64px;
    }

    div.navi {
        width:870px;
        height:30px;
        margin:0px 64px;
    }

div.main {
    background-image:url(./backgrounds/head_back.gif);
    margin:0px auto;
    text-align:left;
    height:500px;
    width:998px;
}

    div.status {
        float:left;
        width:227px;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:64px;
        padding:0px;
    }

* html div.status { /* Für IE */
margin-left: 32px;
}

        div.status_head {
            background-image:url(./backgrounds/status_head.gif);
            width:227px;
            height:28px;
        }
            div.status_head p {
                margin:0px;
                padding-top:6px;
                padding-left:20px;
                color:#FFFFFF;
                font-family: tahoma;
                font-size: 12px;
                font-weight:bold;
            }

        div.status_back {
            background-image:url(./backgrounds/status_back.gif);
            width:227px;
        }

        div.status_foot {
            background-image:url(./backgrounds/status_foot.gif);
            height:18px;
            width:227px;
        }

    div.content {
        float:right;
        width:603px;
        margin-top:10px;
        margin-bottom:10px;
        margin-left:40px;
        margin-right:64px;
    }

* html div.content { /* Für IE */
margin-right: 32px;
}

        div.content_head {
            background-image:url(./backgrounds/content_head.gif);
                width:590px;
            height:28px;
        }
            div.content_head p {
                margin:0px;
                padding-top:6px;
                padding-left:20px;
                color:#FFFFFF;
                font-family: tahoma;
                font-size: 12px;
                font-weight:bold;
            }

        div.content_back {
            background-image:url(./backgrounds/content_back.gif);
            width:590px;
            height: 250px;
        }

        div.content_foot {
            background-image:url(./backgrounds/content_foot.gif);
            height:42px;
            width:590px;
        }
 
Hi klappt wunderbar vielen dank

PS: War mir nicht ganz sicher wo es nun reinkommt, daher hab ich es lieber in HTML getan aber nächstesmal kommt es direkt nach CSS ;)
 
Pherseus hat gesagt.:
Hi klappt wunderbar vielen dank
Zum Vergrößern anklicken....
Wenn deine Frage beantwortet, das Problem gelöst ist und alles funktioniert, dann markiere deine zukünftigen Themen bitte auch als erledigt, indem du den Status-Button Frage offen klickst.

Vielen Dank ;)
 
hmm ja wollte ich eigentlich auch machen, aber hab die funktion nicht gefunden. Ich meine das war mal irgendwo auf der Seite unten aber ich find es einfach nicht mehr.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück