Problem mit Webseite IE und Firefox

[schebi]

Ich habe für einen Kollegen eine Webseite im Aufbau bzw. sie fast fertig ich bin beim Debuggen. Nun stellt sich mal wieder die Fragen warum die Seite unter den einzelnen Browsern unterschiedlich aussieht! Ich habe sie erstmal für den Firefox - Browser programmiert bzw. angepasst, denn es handelt sich eigentlich um ein CMS - System ( Joomla) wo ich das Template angepasst habe. Nun wird das Logo-Bild beim IE nicht korrekt positioniert. Woran kann das liegen ? Und welche Infos braucht ihr für eure Hilfe ? Das Template ist komplett auf DIV`s aufgebaut und das für das Bild im Logo ist Class Top-Bottom.

hier der link zur Zeite http://www.rasoft-ware.eu

Vielleicht kann ja mal einer kurz reinschauen und mich in die richtige Richtugn schupsen wo ich suchen sollte !
Danke im Vorraus !
Schebi

 

[yan1]

Ich glaube das liegt an einem height/min-height Problem?

Internet Explorer hält sich nicht an die Standards und macht aus dem height Befehl automatisch einen min-height Befehl. Das heisst, der Internet Explorer gibt bei dem div nach unten nach, der Firefox macht das nicht, er fixiert das div bei dieser Größe. Dazu sollte eigentlich min-height da sein, aber Microsoft muss wieder mal aus der Reihe tanzen... *g*

 

[versuch13]

Das liegt wohl am IE double Float-Margin Bug.

#top-bottom {
height: 90px;
width: 700px;
background: transparent;
margin-left: -17px;
margin-top: -35px;
float: Left;
z-index: 2;
}

Die margin Werte hier werden verdoppelt. Füge dem ganzen einfach mal display:inline; hinzu.

 

[schebi]

Grrr hilft nicht ! Kann jemand mir vielleicht paar dinge zu den bekannten IE Bug sagen oder wo ich mich belesen kann um das Problem zu lösen ?

Ich hasse IE ! Wieso können sie sich nicht an den Standard halten !

 

[Maik]

Mir erscheinen da ein paar Regeln etwas unstimmig, wie beispielsweise diese hier:

#maincol-broad-800{
 float: left;
 width: 422px !important;
 margin-left: 0px !important;
 margin-left: -5px;
 width: 417px;
 }

Normalerweise sollte die margin-Regel bei einer rechts umflossenen Box (float:left) so lauten:

margin-right: 0px !important; /* Für nicht-IE-Browser */
margin-right: -3px; /* Für IE */

und bewirkt, daß im IE der 3-Pixel-Abstand bei floatenden Boxen geschlossen wird.

Und wieso verkürzt du die Boxbreite für den IE um 5 Pixel?

Zudem ist in deinem Dokument die Divitis ausgebrochen, wie man unschwer an diesem Code-Ausschnitt erkennen kann:

<div class="module">
                        <div>
                                <div>
                                        <div>
                                                <h3><img src="http://www.tutorials.de/forum/images/M_images/home_16.png" alt="ModuleImages_Hauptmenü" />  Hauptmenü</h3>
...
                                        </div>
                                </div>
                        </div>
</div>

Und noch ein Tipp: schicke den HTML- und CSS-Code mal durch den Validator.

1. HTML-Code: http://validator.w3.org/check?uri=http://www.rasoft-ware.eu/
2. CSS-Code: http://jigsaw.w3.org/css-validator/...css.css&warning=1&profile=css2&usermedium=all