probleme mit größe des root-divs im IE

[rob-kleinert]

Hallo,
folgendes Problem:

Mir zeigts meinen Root-Div im IE größer an als festgelegt. Die Hintergrundwiederholung hab ich bereits behoben, aber der div-container is immer noch größer. Hat das irgendwas mit dem boxenmodel des IE zu tun?

Hab grad gesehen, dass es bei den anderen divs genauso ist.

URL: http://www.dj-dannyo.de

Hier der code des root-containers:

Code: Alles auswählen

#root
{
   margin: 10px auto;
   width: 982px;
   height: 744px;
   border: 1px solid #000000;
   background-image:url(background.jpg);
   font-weight:normal;
   font-family:Arial,Helvetica,sans-serif;
   background-repeat:no-repeat;
}

[Eyecatcher]

Also ich seh da keinen Größenunterschied und da ist eigentlich auch keiner...

...vielleicht kommt es dir aber gerade so vor, weil beim IE immer der vertikale Scrollbalken angezeigt wird und dadurch der Div nach links verschoben wird!

[rob-kleinert]

bei mir eben schon. der schwarze border liegt nicht am "rootbackground" an und das deutet wohl drauf hin, dass der root div im IE größer ist, ebenso beim content-div....

URL zur CSS:

.../style.css

[Eyecatcher]

Ist auch immer gut zu wissen welche Bugversion du gerade benutzt? IE 5,6,7?

[Nase]

Ich benutze für den IE5.* immer den Tantek-Hack:
Beispiel:

Code: Alles auswählen

div#blabla
   {
    margin-top: 100px;
    height: 200px; /* Angabe für den IE 5.x */
    voice-family: "\"}\""; /*verwirrt den IE */
    voice-family: inherit;
    height: 100px;/*Angabe für normale Browser - Höhe minus margin*/
   }

div#dummy
  {
   margin: 0;
  } /*Dummy-DIV um IE zu "entwirren"*/


Musst halt alle Pixel von margin, padding, border usw. zusammenzählen, für alle normalen Browser von der Höhe des DIVs abziehen und für den IE die ursprüngliche Höhe hinschreiben.

[rob-kleinert]

Benutze IE 6. Soweit des aus selfhtml hervorgeht, gilt dieser hack sowie der tan-hack nur für IE bis IE 5.5? Habs trotzdem mal probiert:

Code: Alles auswählen

#root
{
   margin: 10px auto;
   width: 982px;
   height: 744px;
   border: 1px solid #000000;
   background-image:url(background.jpg);
   font-weight:normal;
   font-family:Arial,Helvetica,sans-serif;
        background-repeat:no-repeat;

* html #root
{  /* nur fuer Internet Explorer */
   width:984px;     /* Version 5.x */
   w\idth:982px;    /* Version 6 */
   height: 756px
   he\ight: 744px;
}

Tan-Hack

Code: Alles auswählen

#root
{
   margin: 10px auto;
   width: 982px;
        height: 756px;
   border: 1px solid #000000;
   background-image:url(background.jpg);
   font-weight:normal;
   font-family:Arial,Helvetica,sans-serif;
        background-repeat:no-repeat;
       voice-family:"\"}\""; /* ab hier ignoriert IE 5.x nachfolgende Deklarationen */
       voice-family:inherit;
        width:982px;
        height: 744px;
}

Tantek-Hack

==> Ergebnis: nichts!

Was mach ich falsch?

[Ingo]

Hi.

Ich denke, es liegt am margin-bottom des #navi zusammen mit der IE-Marotte, Divs ungeachtet einer
width- oder height-Angabe einfach zu erweitern, wenn der Inhalt mehr Platz braucht als width/height
ihm lassen.
Ändere doch testhalber mal im #navi die margin-Angabe auf margin:70px 20px 0px; (t l/r b)
Wenn das auch nicht hilft, kann man im #root overflow:hidden setzen, um den IE davon abzuhalten,
das #root-Div eigenmächtig zu vergrößern.

Gruß, Ingo

[rob-kleinert]

Ok danke, mit der margin änderung gings nur teilweise (warum auch immer?) aber mit overflow hat alles geklappt, danke =)

btw: @Ingo: Welches programm is des in deinem screenshot?

[Ingo]

Das göttliche Tool ist der Firebug, eine Firefox-Erweiterung. Grundlage ist der Firefox 2, dazu:

Firebug 1.05
Der Firebug bietet u.a. einen DOM-Inspektor inklusive der Möglichkeit, HTML, JS und CSS "live" zu verändern;
JavaScript-Debugging ... ; weitere Nützlichkeiten:

Web Developer 1.1.5
Der Webdeveloper enthält einen Haufen interessanter Werkzeuge, u.a. den direkten Aufruf eines Validators
oder auch neben der normalen Quellcode-Ansicht die Option "view generated source", die Möglichkeit, Bilder
oder Tabellen(-zellen) zu markieren, ein Messwerkzeug ('ruler' ist eine Untertreibung) u.v.a.m.

IE NetRenderer (als FF-Extension)
Der IE NetRenderer rendert in wenigen Sekunden Ansichten im IE 5.5 oder 6 oder 7 (neu: 8 Beta).

Gruß, Ingo