✔ CSS Fehldarstellung in IE < v. 7.0

[mlaukel]

Hallo zusammen,
habe ein Problem mit meiner html/css webseite. In Firefox & Internet Explorer 7 wird diese korrekt dargestellt. Nur in allen Internet Explorer Versionen unter 7 wird die Seite falsch dargestellt. Ich benutze einen 950 Pixel breiten Wrapper ohne feste Höhe dieser ist in 3 Reihen und 2 Spalten gegliedert. Zudem benutze ich ein CSS Dropdown-Menu in der rechten Spalte der mittleren Zeile. Wie gesagt in Firefox, Opera, Safari etc. etc. ist alles einwandfrei.

Bin schier am Verzweifeln und finde das Problem einfach nicht. Wär nett wenn sich das mal jemand anschauen würde.

Und hier die Stylesheets:
Wrapper Style:

/* CSS Document */
.none {
display: none;
}

body
{
margin: 0;
padding: 0;
}

#wrapper{
width:950px;
float:left;
text-align:left;/*for IE5.x*/
}

/*Begin style for row DIVs*/
#head{
width:950px;
height:141px;
}

#midsect{
width:950px;
height:35px;
}

#basesect{
width:950px;
height:524px;
}
/*end style for row DIVs*/

/*Begin style for column DIVs*/
#head{
width:950px;
height:141px;
float:none;
}

#spacerleft{
width:175px;
height:35px;
float:left;
}

#naviright{
width:775px;
height:35px;
float:none;
}

#menuleft{
width:175px;
height:524px;
float:left;
}

#contentright{
width:775px;
height:524px;
float:none;
}
/*end style for column DIVs*/

Menu Style

#MainMenu 
{
	width:775px;
	height:35px;
	background: #d9e3eb;
	margin:0;
	border:0;
}
#tab 
{
	margin:0;
	top:0;
}
#tab ul 
{
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}
#tab li 
{
display:inline;
	float:left;
	margin:0;
	padding:0;
}
#tab a 
{
	background: #d9e3eb;
	margin:0;
	padding:0;
	text-decoration:none;
	border:1px solid #FFFFFF;
	display:block;
	float:left;
}
#tab a span 
{
	display:block;
	padding:0 25px 0 25px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#000000;
	line-height:35px;
}
#tab a:hover,#tab li.item_active a 
{
	background:#5A8EC6;
	border-color:#FFFFFF;
}
#tab a:hover span,#tab li.item_active a span 
{
	color:#FFFFFF;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
}
.dropmenudiv
{
	position:absolute;
	top:0;
	float:left;
	display:block;
	visibility:hidden;
	border:0 solid #000000;
	background: #d9e3eb;
	color:#000000;
	z-index:100;
	text-decoration:none;
	padding:0;
}
.dropmenudiv ul 
{
	margin:0;
	padding:0;
	list-style:none;
}
.dropmenudiv li 
{
	display:inline;
	margin:0;
	padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
	width:215px;
	margin:0;
	padding:0;
	display:block;
	border:1px solid #FFFFFF;
	color:#000000;
	background: #d9e3eb;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
}
.dropmenudiv a span 
{
	float:left;
	display:block;
	line-height:35px;
	padding:0 25px 0 25px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
}
.dropmenudiv a span 
{
	float:none;
}
.dropmenudiv a:hover
{
	border:1px solid #FFFFFF;
	background:#5A8EC6;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
	color:#FFFFFF;
}
.dropmenudiv a:hover span 
{
	background:#5A8EC6;
	color:#FFFFFF;
}

Wäre super wenn jemand helfen könnte.

Gruß

 

[Maik]

Hi und herzlich Willkommen im Forum

Sieht ganz nach dem "IE6 Three Pixel Gap"-Bug aus, bei dem der IE6 (und älter) zwischen den floatenden Blöcken, bedingt durch ihre Höhenangaben, einen Abstand von 3px erzeugt, der in deinem Layout zur Folge hat, dass die rechten Bereiche nach unten umgebrochen werden.

Mein Lösungsvorschlag:

#spacerleft{
width:175px;
height:35px;
float:left;
margin-right:0 !important;
margin-right:-3px;
}

#naviright{
width:775px;
height:35px;
float:right;
margin-left:0 !important;
margin-left:-3px;
}

#menuleft{
width:175px;
height:524px;
float:left;
margin-right:0 !important;
margin-right:-3px;
}

#contentright{
width:775px;
height:524px;
float:right;
margin-left:0 !important;
margin-left:-3px;
}

 

[mlaukel]

Herzlichsten Dank für den super schnellen Lösungsansatz. Hat mich schon mal etwas weiter gebracht. In den alten IEs ist die Seite nun zumindest nicht mehr zweigeteilt.

Nur offenbart ein neuer Screenshot das nächste Problem. Jetz taucht über und unter der 2. Zeile ein sehr unschöner weißer Spalt auf. Und die Navigationsfelder sind schwarz umrandet.

Hoffe ich bekomme nochmal so eine schnelle Antwort.

 

[Maik]

Wo der IE6 bei dir nun den schwarzen Rahmen um die Links herzaubert, kann ich nicht nachvollziehen, denn bei mir taucht er überhaupt nicht auf.



Mit der folgenden Regelerweiterung und -änderung schliessen sich die unerwünschten Lücken:

style.css

img {
display:block;
}

menu.css

#tab a span
{
        display:block;
        padding:0 25px 0 25px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:14px;
        color:#000000;
        line-height:33px;
}

 

[mlaukel]

Nochmals danke.

Habe die genannten Änderungen vorgenommen.

Kannst du bitte nochmals einen Screenshot machen ? Und fällt dir sonst noch irgendwas fehlerhaftes oder verbesserungswürdiges auf ? Die Navigation ersetze ich in absehbarer Zeit mit folgendem 1A CSS-Dropdown: http://www.cssplay.co.uk/menus/final_drop2.html

 

[Maik]

Hier der aktuelle Screenshot:



Ansonsten fällt mir nichts fehlerhaftes auf.

Verbesserungswürdig wäre der Austausch der Tabellen durch ein CSS-gestütztes Konzept, da Tabellen semantisch für diesen Anwendungsfall nicht vorgesehen sind - das ist aber letztlich eine Frage der persönlichen Einstellung, wie man sein Dokument auszeichnet

Stu Nicholls' CSS-Menüs sind immer eine gute Wahl

 

[mlaukel]

Suuuuper !

Die weißen Balken sind weg. Vielen vielen Dank !

Das mit den Tabellen wusste ich Das wird auch noch geändert. Aber vorerst tut es das auch.

Noch eine Frage:
Wie bekomm ich egal welche Auflösung eingestellt ist die Seite an den Seiten in der selben Farbe des Designs weiterläuft. Sprich es wäre besser wenn ich den Wrapper zentriere und entsprechend oben, unten, links, rechts die entsprechende Farbe des Designs angezeigt wird und somit eine 100% Breite erreicht werden kann ?

 

[Maik]

body
{
margin: 0;
padding: 0;
background:#b8c5cc; /* entspricht dem Hintergrund der linken Spalten */
text-align:center; /* Für IE5.x, damit er #wrapper im Viewport horizontal zentriert */
}

#wrapper{
width:950px;
/*float:left;*/ /* auskommentiert = deaktiviert */
margin:0 auto; /* zentriert Box horizontal im Viewport */
text-align:left;/*for IE5.x*/
}

Hab hier mal die Farbe der linken Spalte als "Design-Farbe" angenommen, falls du aber die Farbe des Headers meinst, lautet der Hex-Code für den Seitenhintergrund #a8c1e3

 

[mlaukel]

Das sieht dann schlecht aus den body einfarbig zu machen. Ich meinte eine Möglichkeit die verschieden Farben fortzuführen.

links: 3 farbig
rechts: 3 farbig
oben: 1 farbig
unten: 2 farbig

 

[Maik]

Du willst also u.a. die Hintergrundfarbe des Header-, Menü- u. Contentbereichs nach links und rechts zum Fensterrand fortführen?

Da diese drei Bereiche laut CSS eine feste Höhe besitzen, sollte es kein Hindernis darstellen, deren Hintergründe in einer Hintergrundgrafik zu vereinen, die im Elternelement horizontal wiederholt wird - in der derzeitigen Struktur des Markups wäre das das body-Element.

Oder hab ich jetzt die linke und rechte Farbaufteilung mißverstanden?