Probleme mit IE 5.5

[geos]

Ich habe eine Seite mit 2 nebeneinanderliegenden Boxen -> float:left mit festen Breiten
realisiert. Die Gesamtbreite des Contents ist mit 990 px festgelegt. Die Seite wird in Firefox 1.5 und IEX6 zufriedenstellend gerendert. Die rechte Box (content) wird unter die links liegende umgebrochen.
Wahrscheinlich wird die Breite falsch berechnet, obwohl ich kein padding verwendet habe.

Zum Anschauen:
http://www.zweirad-lauter.de/index2.html

Leider gibt es Probleme beim InternetExplorer 5.5.
Wie kann ich das Problem sinnvoll lösen.
Hinzu kommt, dass ich auf meinem Rechner nur IEX 6.0 laufen habe und keine direkte Möglichkeit zu testen. Nach meiner Kenntnis lassen sich keine zwei Browser Versionen IEX parallel installieren. Oder gibt es da andere Möglichkeiten.

Geos

 

[Maik]

Das von dir geschilderte Darstellungsproblem mit der Content-Box kann ich nicht entdecken.

Testumgebung: Win2k, Firefox 1.5, IE 5.01, IE 5.5, IE 6.0.

Eine sog. IE-Standalone-Version kannst du dir auf evolt.org - Browser Archive herunterladen.

 

[geos]

Danke für die schnelle Antwort,

Testbrowser: Tipp super -> ich habe IE5 und 5.5 installiert -> läuft gut
Nun zu den Problemen:
1. Float:
Das Problem taucht beim IEX 5 auf; bei 5.5 wird die Seite nicht zentriert.
Ich habe die Breite der 2. Box um 1px reduziert und die Box bricht nicht um. Ist nicht ganz optimal, da im FF jetzt ein kleiner Spalt mit bgcolor der Seite zu sehen (2px -> ich hatte schon 1px für die IEX6 Kompatibilität gebraucht.
Was mich wundert ist das die 2px nicht mit die Hintergrundfarbe der übergeordneten Box annimmt, in die ich die beiden Boxen gepackt habe?
Gibt es noch eine optimalere Lösung?
2. Zentrierung
Woran liegt es das die Seite im IEX5 und 5.5 nicht zentriert. Ich habe den Inhalt in einen Container mit

#container {		width:990px; 
					margin:10px auto;
					border:solid 1px #FFFFFF;
			}

3. Menü wird im IE5 nicht korrekt angezeigt, die padding werden nicht richtig interpretiert. Die einzelnen Menüpunkte werden im IE5 ohne Abstand angezeigt.
Ich habe das über folgende CSS realisiert

a.menu:link, a.menu:visited {
					line-height:25px;
					vertical-align: middle;
					text-decoration:none;
					font-weight:bold;
					font-size:12px;
					color:#000000;
					background-color: #FFFFFF;
					padding: 2px 8px;
					border: 1px solid #000000;
		}
a.menu:active, a.menu:hover {
					background-color: #898989;
  		}

 

[Maik]

Der IE5 und 5.5 benötigt die text-align:center-Eigenschaft für das body-Element, um das Seitenlayout zu zentrieren. Für alle linksbündig ausgerichteten DIV-Elemente muß dann text-align:left bestimmt werden, damit ihr Inhalt nicht mittig sitzt.

Wenn du die Vorgänger-Versionen des IE6 in deinem CSS-Layout berücksichtigen willst, solltest du eine CSS-Browserweiche für Internet Explorer mit Conditional Comments einsetzen, um so in entsprechenden Stylesheets / CSS-Dateien die diskrepante Boxmodell-Interpretation der einzelnen IE-Versionen zu korrigieren.

Die fehlende Hintergrundfarbe des übergeordneten DIV #mainContent resultiert daraus, daß du unmittelbar nach den beiden floatenden DIV-Elementen #leftBorder und #content nicht wieder den normalen Textfluss mit der clear:left-Eigenschaft hergestellt hast.

Du hast da wohl mehrere solcher clear-Boxen im HTML-Code eingebaut, nur leider an den falschen Stellen und mit dem falschen Wert both für die clear-Eigenschaft.

.clearbox {                                
clear: left;
height: 0;
line-height: 0;
margin: 0;
padding: 0;
font-size: 0;
}

Korrigierter HTML-Quelltext:

<DIV id="container">
<DIV id="banner"><img src="http://www.tutorials.de/forum/images/header.jpg" alt="Logo mit Schriftzug Zweirad Lauter und Bildreihe mit verschiedenen Fahrradmotiven"></DIV>

<DIV id="navigation">
<DIV id="topic">
  <H3>HOME</H3>
</DIV>
<DIV id="menu"><a class="menu" href="about.html" id="aktiv">About</a><a class="menu" href="bikes.html">Bikes</a><a class="menu" href="service.html">Service</a><a class="menu" href="angebote.html">Angebote</a><a class="menu" href="anfahrt.html">Anfahrt</a><a class="menu" href="impressum.html">Impressum</a>
</DIV>
</DIV>

<DIV id="mainContent">
<DIV id="leftBorder"><img src="http://www.tutorials.de/forum/images/aboutNew.gif" alt="Bild zum Thema About"/>
<DIV id="adresse">
<H3 class="darkgrey">Zweirad Lauter<br/>
Paulinstraße 32<br/>
54 292 Trier<br/>
Tel. 06 51/ 2 76 69</H3>
</DIV>
</DIV>
<DIV id="content">
<H2 class="dark">Herzlich willkommen </H2>
<p class="dark">Wollen Sie uns kennenlernen?<br>
<br>
Kommen Sie vorbei ....<br>
<br>
<a href="anfahrt.html">Hier finden Sie uns!</a></p>
<p class="dark">Eine tolle Radsaison und viele schöne Kilometer wünscht<br/>
    <br/>
    Leo Lauter und sein Team</p>
</DIV>
<DIV class="clearbox">&nbsp;</DIV>
</DIV>

<DIV id="footer">Zweirad Lauter April 2006&copy;</DIV>
</DIV>

 

[Maik]

3. Menü wird im IE5 nicht korrekt angezeigt, die padding werden nicht richtig interpretiert. Die einzelnen Menüpunkte werden im IE5 ohne Abstand angezeigt.

Erweitere mal die CSS-Regel für die Links mit den CSS-Eigenschaften display:block und float:left.