Hilfe bei Unterschied zwischen IE und allem Anderen

[SvenE]

Moin Moin!

Ich sitze seit Stunden an einem Blog. Nachdem ich fast fertig war, habe ich angefangen die Seite auch für den IE zu fixen und komme dabei überhaupt nicht weiter.

Die Seite ist: Green T - handmade music » Green T ist “Flensburg’s Lieblingsband” und bietet die ideale Unterhaltung auf Veranstaltungen jeder Art!

Am meisten Probleme machen mir die Tele der Website, wo drei Kolumnen nebeneinander liegen. Ich bekomme sie im IE nicht alle nebeneinander, ohne im CSS die Breite von "two-col" oder ".home #content ul li.latest-excerptoneandhalf{" zu ändern.

Wie bekomme ich das ganze sauber hin, so dass die schwazen bzw grauen Balken wiede rordentlich liegen? Könnt ihr mir weiterhelfen?

Hier der CSS-code:

.two-col{
border-top:1px solid silver;
display:inline;
float:left;
margin-right:15px;
width:288px;
}

.home #content ul li.latest-excerptoneandhalf{
font:12px Helvetica, Arial, sans-serif;
list-style-type:none;
margin-top:-8px;
padding:0 0 0 0px;
width:285px;
}

[Ammaletu]

Also ich sehe im IE7, dass einige Abstände größer sind als im Firefox, aber die grundsätzliche Anordnung scheint zu stimmen. Um den IE6 würde ich mich an Deiner Stelle ehrlich gesagt nicht mehr kümmern, es sei denn es ist eine kommerzielle Webseite.

Prinzipiell werden Deine Probleme an den verschiedenen Boxmodels liegen, denke ich. Wie war das... Im Firefox gilt padding + border width + width = tatsächliche Weite der Box, während im IE der width-Wert immer die tatsächliche Weite der Box ist. Als Lösung kann man dem IE ggf. andere Weiten sagen. Dazu einfach eine style_ie.css erstellen und per Conditional Comments einbinden (Forensuche opder googlen). Das ist relativ sauber und funtkioniert gut. Im IE-Stylesheet kann man dann für den IE andere Angaben notieren und wenn es mal sein muss auch Hacks. Validatoren und andere Browser ignorieren das File ja. Klar, es muss dann nach dem normalen Stylesheet eingebunden werden, damit es dessen Angaben überschreiben kann.