IE setzt div's nicht richtig um.

Speedrat · 18.06.2009

Hio,
ich bin gerade dabei mir eine eigende kleien Homepage zu erstellen und bin naklar zunächst mit den design angefangen

Es ist zwar nicht das schönste aber reicht für meien Zwecke

Doch habe ich nun ein kleines Problem, und zwar setzt IE die DIVs nicht richtig um und so sind die Blöcke nicht da wo ich sie gehn hätte.
Firefox aber interpretiert es genau so wie ich es haben will.

index.html:

HTML:

<html>
  <head>
  <LINK rel="stylesheet" href="design.css" type="text/css">
  <title>IMP-GAMES || [BETA]</title>
  </head>
  <body>
    <div id="root">
        <div id="head">
            <img src="pics/header.png" alt="header.png, 78kB" title="IMP-GAMES">
        </div>
        <div id="menu">MENU
        </div>
        <div id="main">
            <div id="sub-menu">SUB_MENU
            </div>
            <div id="content">INHALT
            </div>
        </div>
    </div>

  </body>
</html>

design.css:

HTML:

body{
        padding:0px;
        margin:0px;
        background-color:#ffffcc;
}
#root{
        width:1024px;
        margin:0px auto;
        overflow: hidden;
}
#head {
        float: left;
        width:1024px;
        height: 170px;
}

#menu {
        float: left;
        width: 174px;
        padding:5px;
        font-family:verdana, sans-serif;
        text-transform:uppercase;
        color:#000000;
        background-color:#990000;
        background-image: url(pics/menu_bg.gif);
        background-repeat:repeat-y;
        padding-bottom: 5000px;
        margin-bottom: -5000px;
}
#menu a{
        text-decoration:none;
        color:#000000;
}
#main{
        float: left;
        width: 840px;
}
#sub-menu {
        float: left;
        width: 830px;
        height: 23px;
        padding:5px;
        background-color:#990000;
        background-image: url(pics/sub-menu_bg.gif);
        background-repeat:repeat-x;
        text-align: center;
}
#content {
        float: left;
        width: 810px;
        padding:15px;
        background-image: url(pics/CB-bg.png);
        background-repeat:no-repeat;
        background-color: #ffcc99;
        padding-bottom: 5000px;
        margin-bottom: -5000px;
}

Weiß jemand evtl. den Grund für dieses Verhalten ?

Danke im Voraus!

BaMac · 18.06.2009

AW: IE setzt div's nicht richtig um.

Mach doch mal nen Link zu der Seite, damit man sich das auch mal ansehen kann...

Speedrat · 18.06.2009

AW: IE setzt div's nicht richtig um.

oh, ganz vergessen ^^

Hier bitte:
IMP-GAMES || [BETA]

Sniperfan · 18.06.2009

AW: IE setzt div's nicht richtig um.

Das Microsoft sich nicht an internationale Standards halten kann, sollte doch bekannt sein

Mach einfach nen extra .css und binde es wie folgt ein:

Code:

<!--[if lte IE 6]>
<link rel="StyleSheet" href="wasauchimmer.css">
<![endif]-->

Dann einfach die div´s, die der IE nicht richtig versteht entsprechend anpassen.

Speedrat · 18.06.2009

AW: IE setzt div's nicht richtig um.

Blos wie kann man die dann anpassen so das IE die auch versteht ? :rolleyes:

kleinerOnkel · 18.06.2009

AW: IE setzt div's nicht richtig um.

Box model hack bzw. margin + padding auf 0

Speedrat · 18.06.2009

AW: IE setzt div's nicht richtig um.

Also ich nun schon ein halbwegs annehmbare version für den IE, dank eurer Hinweise
Doch will IE nicht das ganze zentrieren (zumindest nicht damit wie ich mache ^^)

und ich habe noch so einen doofen rand unter mein header:

BaMac · 18.06.2009

AW: IE setzt div's nicht richtig um.

Mach mal in dein #root ein text-align: center; Musst du dann nur in den entsprechenden Containern für den Text wieder auf left setzen.

Speedrat · 18.06.2009

AW: IE setzt div's nicht richtig um.

also im root selbst bringt es nix, aber im body zentriert das ganze richtig -> THX!

jetzt ist nur noch die sache mit den Rand

BaMac · 19.06.2009

AW: IE setzt div's nicht richtig um.

Setz mal im DIV #head margin=0px ein. Dann sollte das weg sein.

Jo

Speedrat · 20.06.2009

AW: IE setzt div's nicht richtig um.

Danke für den Hnweis,
aber es schein bei IE keine Wirkung zu zeigen

BaMac · 21.06.2009

AW: IE setzt div's nicht richtig um.

Also bei mir das funktioniert IE 7..

BaMac · 21.06.2009

AW: IE setzt div's nicht richtig um.

Ääähhhh, was für ein Deutsch!!!! Klartext: bei mir funktioniert die Anzeige im IE 7 ohne Probleme. Da fehlen natürlich die ganzen Bilder, aber der "Strich" ist weg.
Jo

Speedrat · 21.06.2009

AW: IE setzt div's nicht richtig um.

Danke das du dir die Mühe gemacht hast es zu probieren,
doch bei mir unter IE 8 bekomme ich den Rand einfach nicht weg ^^
und bei IE7 (vom PC von meinen Bruder aus) gibt es auch noch ein Rand, echt komisch

Ich habe mal eine neue Version auf IMP-GAMES || [BETA] hochgeladen, wäre wirklich nett wenn du die eben mit dein IE7 testen könntest.

BaMac · 22.06.2009

AW: IE setzt div's nicht richtig um.

Ich habe mal auch beim #sub-menu den margin=0px gesetzt. Das sah ganz gut aus...

noosh · 23.06.2009

AW: IE setzt div's nicht richtig um.

Speedrat schrieb:
Danke das du dir die Mühe gemacht hast es zu probieren,
doch bei mir unter IE 8 bekomme ich den Rand einfach nicht weg ^^
und bei IE7 (vom PC von meinen Bruder aus) gibt es auch noch ein Rand, echt komisch

Ich habe mal eine neue Version auf IMP-GAMES || [BETA] hochgeladen, wäre wirklich nett wenn du die eben mit dein IE7 testen könntest.

Ich bin mir nicht ganz sicher ob es der Fehler sein könnte aber in deiner index.html/.php hast du eingegeben  mach daraus mal einen

weil dann ändert er es nicht nur für ie6 sondern für alle IEs
und du musst in der "ieonly".css datei das mit dem

body { text-align:center; }

rein schreiben

wahlweise auch hier nach gucken: KLICK HIER!!

hoffe ich konnte helfen

mfg

Speedrat · 23.06.2009

AW: IE setzt div's nicht richtig um.

Naja, ich lasse es nun einfach so ^^
wer IE benutzt hat halt selbst schuld und bei ihn sieht es dann halt nicht so gut aus

Nochmals danke für deine Mühe

edit: sry, noosh habe deins erst später gelesen,
also ich habe im mon einfach für IE folgendes mit in der css Datei:

/* ONLY FOR STUPID Internet Explorer!!! */
/* CSS-Kommentar vor dem Hack \*/ * html #menu { width: 184px; /* CSS-Kommentar nach dem Hack */}
/* CSS-Kommentar vor dem Hack \*/ * html #sub-menu { width: 840px; } * html #sub-menu { height: 33px; /* CSS-Kommentar nach dem Hack */ }
/* CSS-Kommentar vor dem Hack \*/ * html #content { width: 840px; /* CSS-Kommentar nach dem Hack */}

noosh · 23.06.2009

AW: IE setzt div's nicht richtig um.

und jetzt setzte einfach noch ohne hack oder so einfach ganz normal das ein:

body { text-align:center; }

Speedrat · 23.06.2009

AW: IE setzt div's nicht richtig um.

habe ich bereits drin, damit IE das überhaupt zentriert darstellt

siehe:

noosh · 23.06.2009

AW: IE setzt div's nicht richtig um.

Ja du musst am besten eine seperate css datei erstellen mit der du dann alles anpasst deswegen ja auch

dies ist der link zu der externen css datei sprich 2 css datein ... die erste für das normale also firefox o.Ä. und die andere speziell für IE in der du dann alle anpassungen der einzelnen divs "die vershcoben sind" annimmst

body { text-align:center; }

ist lediglich dazu da das auch im IE die Website in der mitte ist ^^

IE Css:

#menu {
margin-top:-10px; /*sichbare differenz ausgleichen*/
}
#main {
height:800px; /*größe angeben*/
}
...