Floating Problem

[Michael]

Hallo zusammen.

Bei meiner Webseite befindet sich links die Navigation und rechts Inhalt.

Ich verwende Div und erledige die Formatierung ausschliesslich in CSS.

Im Firefox und Safari sieht die Seite korrekt nach meinen Vorstellungen aus.

Im Internet Explorer rutscht der Inhalt (rechts von der Navigation) nach unten, d.h. der Inhalt beginnt nacht der Navigation.

Wenn ich die width des Div "Site" um 5 Pixel vergrössere, kommt der Inhalt wieder neben die Navigation.

Wisst Ihr wieso der IE eine grössere Breite benötigt?
Ich möchte nun eigentlich nicht die Breite um 5 Pixel vergrössern, da dann andere Dinge nicht mehr schön übereinstimmen. Gibt es da andere Lösungen?

Vielen Dank für Eure Hilfe.

Bem: Div "Site" ist das oberste Div in meinem Div-Layer.

[Struppi]

Wisst Ihr wieso der IE eine grössere Breite benötigt?
Ich möchte nun eigentlich nicht die Breite um 5 Pixel vergrössern, da dann andere Dinge nicht mehr schön übereinstimmen. Gibt es da andere Lösungen?

Boxmodell Bug?

Struppi.

[Michael Boyd]

Hier findet ihr ein Gerüst meiner Seite.

Kann mir jemand helfen, damit der Inhalt neben den Buttons erscheint?
Im Firefox funktioniert es (wie oben bereits geschrieben)!

http://home.arcor.de/michael_boyd/

[Michael]

Habe oben ausversehen mit Michael Boyd gepostet, da könnte man meinen das sei jemand anderes gewesen.

Es ist leider ziemlich dringend...ich sollte das Problem so schnell wie möglich lösen.

Bin also für jede Hilfe dankbar.

LINK (nochmals):

http://home.arcor.de/michael_boyd/

[Cyx23]

Hallo,

wenn du für den IE 6 probeweise auf "<?xml version="1.0" encoding="ISO-8859-1"?>"
verzichtest mag sich einiges besser verhalten.

Ansonsten wäre es vorteilhaft wenn du das Problem etwas besser isolieren
könntest, deine Aussage "width des Div "Site" um 5 Pixel vergrössere," kann ich
als möglichen WA mit deinen Files gar nicht nachvollziehen.

Hast du, wenn es bei dir mit 5 Pixel mehr klappt, schon geschaut
wo diese 5 Pixel benötigt werden, einfach fürs floaten oder werden
Rahmen ähnlich wie beim boxbug fehlerhaft berechnet?

Du kannst aber auch gerne mal mit ul {float:left} meinen Lieblingshack
für Listen Menu und Internet Explorer versuchen.

Grüsse

Cyx23

[Michael]

Hallo,

wenn du für den IE 6 probeweise auf "<?xml version="1.0" encoding="ISO-8859-1"?>"
verzichtest mag sich einiges besser verhalten.

Ansonsten wäre es vorteilhaft wenn du das Problem etwas besser isolieren
könntest, deine Aussage "width des Div "Site" um 5 Pixel vergrössere," kann ich
als möglichen WA mit deinen Files gar nicht nachvollziehen.

Hast du, wenn es bei dir mit 5 Pixel mehr klappt, schon geschaut
wo diese 5 Pixel benötigt werden, einfach fürs floaten oder werden
Rahmen ähnlich wie beim boxbug fehlerhaft berechnet?

Du kannst aber auch gerne mal mit ul {float:left} meinen Lieblingshack
für Listen Menu und Internet Explorer versuchen.

Grüsse

Cyx23

Hallo Cyx23

Danke für Deine Tipps.
Dein Hack scheint beim mir nicht das Problem zu lösen.

Damit Ihr mein Problem bei Euch lokal (falls jemand lust hat) testen könnt, poste ich hier noch den Inhalt meines CSS-Files.

FILE: formate.css

body {
 background-position: center;
 font-family: sans-serif;
 font-size: 9pt;
 margin: 0em
 padding: 1em;
}

/* class definitions --------------------------------------------------------*/
.border_ru {
 background-image: url(Images/border_main_ru.jpg);
 background-position: top right;
 background-repeat: no-repeat;
 margin: 0px 0em 0em 0px;
 padding: 0px 0em 0em 0em;
}

.border_lu {
 background-image: url(Images/border_main_lu.jpg);
 background-position: top left;
 background-repeat: no-repeat;
 margin: 0px 0em 0em 0px;
 padding: 5px 0em 0em 0em;
}

.border_ll {
 background-image: url(Images/border_main_ll.jpg);
 background-repeat: no-repeat;
 background-position: bottom left;
 margin: 0px 0em 0em 0px;
 padding: 0px 0em 0em 0em;
}

.border_rl {
 background-image: url(Images/border_main_rl.jpg);
 background-repeat: no-repeat;
 background-position: bottom right;
 margin: 0px 0em 0em 0px;
 padding: 0px 0em 0em 0em;
}
/* END OF class definitions -------------------------------------------------*/

/* div definitions ----------------------------------------------------------*/
div#Banner {
 background-color: white;
 margin: 0em 1em 0.2em 180px;
 padding: 3px 0em 0em 0em;
}

div#Main {
 margin: 0px 1em 0em 180px;
 padding: 0px 0em 0em 0em;
}

div#Maininner {
 margin: 0em 0em 0em 0em;
 padding: 1em 1em 1em 1em;
}

div#Maininner td#dot {
 border-right-style: dotted;
 border-right-width: 1px;
}

div#Maininner td#sep {
 border-color: grey;
 border-bottom-style: solid;
 border-bottom-width: 1px;
}

div#Maininner td#row {
 vertical-align: top;
 width: 50%
}

div#Maininner input {
 background-color: #D3E4FF;
 border-color: #000000;
 border-style: solid;
 border-width: 1px;
 padding: 0px 0px 0px 3px;
}

div#Maininner input#button {
 background-color: #D3E4FF;
 border-style: solid;
 border-width: 0px;
 padding: 0px 0px 0px 0px;
}

div#Maininner textarea {
 background-color: #D3E4FF;
 border-color: #000000;
 border-style: solid;
 border-width: 1px
}

div#Maininner select {
 background-color: #D3E4FF;
 border-color: #000000;
 border-style: solid;
 border-width: 1px;
}

div#Site {
 background-color: white;
 background-image: url(Images/white_border.gif);
 background-repeat: repeat-y;
 margin: 0 auto;
 padding: 0em;
 width: 800px;
}
/* END OF div definitions ----------------------------------------------------*/

/* list definitions ----------------------------------------------------------*/
ul#Navigation {
 display: block;
 float: left;
 font-weight: bold;
 margin: 5px 0px 0px 5px;
 padding: 0em 0em 0em .5em;
 width: 160px;
}

ul#Simple {
 display: block;
 margin: 0em 0em 0em 0px;
 padding: 0em 1em 0em 0em;
}

ul#Simple li {
 list-style: none;
 margin: 0em 1em 1em 1em;
 padding: 0em 0em 0em 0em;
}

ul#Bullet {
 display: block;
 margin: 0em 0em 0em 2.2em;
 padding: 0em 0em 0em 0em;
}

ul#Bullet li {
 list-style: circle;
 margin: 0em 0em .5em 0em;
 padding: 0em 0em 0em 0.0em;
}

ul#Navigation li {
 list-style: none;
 margin: 0em 0em 0em 1em;
 padding: 0em 0em 0em 0em;
}

ul#Navigation a {
 text-decoration: none;
}

ul#Navigation a:link {
 color: white;
}

ul#Navigation a:visited {
 color: white;
}

ul#Navigation a:hover {
 color: white;
}

ul#Navigation a:active {
 color: white;
}
/* END OF list definitions ---------------------------------------------------*/

/* heading definitions -------------------------------------------------------*/
h1 {
 font-size: 16pt;
 margin: 0 0 0.7em;
 text-align: left;
}

h3 {
 font-family: sans-serif;
 font-style: normal;
 font-size: 7pt;
 font-weight: normal;
}

h4 {
 color: #012699;
 font-family: sans-serif;
 font-style: normal;
 font-size: 10pt;
 font-weight: bold;
 margin: 0 0 0.3em;
}
/* END OF heading definitions ------------------------------------------------*/

[Cyx23]

Hallo,

Dein Hack scheint beim mir nicht das Problem zu lösen.

bei mir klappts offenbar mit 6, 55 und 50.

Grüsse

Cyx23

[jb]

Das dürfte der floating/boxmodel-bug vom IE sein.

Ich nehem an deine Seite ist HTML4.01 transitional.

Wenn Du sie in XHTML strict machst (HTML4.01 strict geht glaube ich auch, Hauptsache strict) rendert auch der IE sowas korrekt ohne diesen Darstellungsbug. Ansonsten gibt es im Netzt ein paar Workarrounds dafür. Finde ich persönlich sehr unschön.

Ich hoffe das hilft irgendwie

[Michael]

Das dürfte der floating/boxmodel-bug vom IE sein.

Ich nehem an deine Seite ist HTML4.01 transitional.

Wenn Du sie in XHTML strict machst (HTML4.01 strict geht glaube ich auch, Hauptsache strict) rendert auch der IE sowas korrekt ohne diesen Darstellungsbug. Ansonsten gibt es im Netzt ein paar Workarrounds dafür. Finde ich persönlich sehr unschön.

Ich hoffe das hilft irgendwie

Hi Du kannst ein Gerüst meiner Seite anschauen
unter http://home.arcor.de/Michael_Boyd/

Meine Seite ist in XHTML strict geschrieben.
Jedoch macht der IE die Fehler trotzdem.

[Struppi]

Meine Seite ist in XHTML strict geschrieben.
Jedoch macht der IE die Fehler trotzdem.

durch diese Zeile: <?xml version="1.0" encoding="ISO-8859-1"?>
wird der IE in den Quirksmodus geschickt. In dem Falle greift der Boxmodell Bug (du hast sicherlich schon recherchiert, was das bedeutet)

Struppi.

[Cyx23]

Hallo Struppi,

durch diese Zeile: <?xml version="1.0" encoding="ISO-8859-1"?>

Der BoxBug ists aber wohl nicht sondern ein ähnlicher Effekt.

Ausserdem vermute ich dass er sowieso gerade etwas am Beispiel geändert
hat, so CSS im Head, vielleicht damit es etwas übersichtlicher wird.

Trotzdem kann ich nicht mehr nachvollziehen warum sein Workaround mit
den 5 zusätzlichen Pixeln bei den von mir runtergeladenen Dateien
nicht funktioniert hat, dafür aber die floatende Liste.

Vielleicht kann Michael das Problem ja noch etwas isolieren
(wenn es denn überhaupt sinnvoll ist so "pixelgenau" vorzugehen),
abgesehen von irgendwelchen IE-Bugs mit Boder oder float
mögen die relativen Angaben bei margin, die fehlerhafte Vererbung
des IE (bis zu Schriftgrößen) beteiligt sein.

Grüsse

Cyx23

[Struppi]

durch diese Zeile: <?xml version="1.0" encoding="ISO-8859-1"?>

Der BoxBug ists aber wohl nicht sondern ein ähnlicher Effekt.

hmm, ich hab mir es tatsächlich nicht genau angeschaut (hab momentan kein Zeit für sowas). Der IE stellt es auch falsch dar, ohne diese Zeile?

Struppi.

[Auge]

Hallo

Das dürfte der floating/boxmodel-bug vom IE sein.

Ich nehem an deine Seite ist HTML4.01 transitional.

Wenn Du sie in XHTML strict machst (HTML4.01 strict geht glaube ich auch, Hauptsache strict) rendert auch der IE sowas korrekt ohne diesen Darstellungsbug. Ansonsten gibt es im Netzt ein paar Workarrounds dafür. Finde ich persönlich sehr unschön.

Ich hoffe das hilft irgendwie

Das wird es nicht, da es falsch ist. Den MSIE interessiert nicht, ob transitional oder strict verwendet wird. Ihn interessiert, worauf du wahrscheinlich hinaus willst, ob er in den 'standard comliants mode' geschickt wurde.

Dies erreicht man durch Angabe der URL der betreffenden DTD. Und zwar auch(!) bei den transitional-Varianten der jeweilige (X)HTML-Version.

siehe: SELFHTML: Dokumenttyp-Deklaration

Tschö, Auge