✔ Wie setze ich dieses Layout um?

[Maik]

Ich dachte da eher so:

#Header {
                width: 740px;
                height: 180px;
                background: #ff0000 url(Bilder/Header.jpg) no-repeat 10px 10px;
                margin-right: 10px;
                padding:10px;
                float:right;
                }

Zur Orientierung poste ich dir hier erstmal zwei IE6-Screenshots vom oberen und unteren Teil der Seite:



mfg Maik

 

[Rayne]

Aber warum ist das Layout im IE6 so zerschossen Sieht fast so aus, als würde der die floats nicht richtig interpretieren. Habe ich da einen Fehler gemacht?

 

[Maik]

Er interpretiert die floats soweit schon richtig, aber IE6 rückt floatende Boxen zu weit ein - was tun?

mfg Maik

 

[Rayne]

Wie sieht es jetzt aus? Habe zu den floats zusätzlich display: inline; eingefügt.

Gibt es eine Möglichkeit, auch unter Vista den IE6 zu bekommen?

 

[Maik]

Sieht nicht im Ansatz besser aus, da du entweder das aktuelle Stylesheet nicht hochgeladen, oder den Workaround an der/den falschen Stellen angewendet hast.

Zum Thema "IE6 als Standalone-Version unter Vista" hab ich gerade via den Artikel Internet Explorer 6 in Windows Vista (IE6) - part 1 gefunden.

Ansonsten kannst du folgende Dienste nutzen, um die Darstellung einer Website im IE6 zu überprüfen:

• http://browsershots.org/
• http://meineipadresse.de/netrenderer/ (IE-only)

mfg Maik

 

[Rayne]

Sorry, nicht hochgeladen. Jetzt aber.

 

[Maik]

Wenn du hier noch die Breitenangabe entfernst

#Sub-Navi-Links {
			/*width: 100%;*/
			height: 100%;
			margin-left: 50px;
			margin-top: 10px;
			}

sitzt das Layout im IE6 wie angegossen

mfg Maik

 

[Rayne]

Laut http://meineipadresse.de/netrenderer/ befindet sich ganz rechts neben dem Design ein weißer Balken beim IE6. Wo kommt der denn nun noch her?

#Sub-Navi-Links {
			height: 100%;
			margin-left: 50px;
			margin-top: 10px;
			}

#Login-Links {
			/*width: 100%;*/
			height: 100%;
			margin-top: 10px;
			text-align: right;
			}

 

[Rayne]

OK, Fehler gefunden. Das width hat das Layout zerschossen. Ich hoffe, dass jetzt alles passt

Danke für die ausdauernde und sehr gute Hilfestellung!!

#Huelle-Footer-Inhalt {
/*width: 100%;*/
height: 100%;
padding-top: 7px;
margin-left: 20px;
color: #bdbdbd;	
}

 

[Rayne]

Ich habe heute versucht, ein Sub-Menü zu erstellen, aber anscheinend habe ich mich irgendwo vertan, denn das Ergebnis entspricht nicht meinen Vorstellungen.

Hier die aktuelle Seite: http://www.sky-divezone.de/Other/WIKO/index2.html

Ich möchte für das Untermenü keine Pfeile, sondern beispielsweise diese Standard-Quadrate. Aber ich bekomme beim Sub-Menü die Pfeile/Background-Images nicht weg.

#Huelle-Navi {
		width: 220px;
		height: auto;
		background: #3e4d55;
		margin-left: 20px;
		float: left;
		display:inline; /* The IE5/6 Doubled Float-Margin Bug */
		color: #FFFFFF;
		padding-bottom: 32768px; /*equal hight columns*/
		margin-bottom: -32768px;
		}

#Huelle-Navi h1 {
			margin-top: 30px;
			margin-left: 50px;
			margin-bottom: 20px;
			font-weight: bold;			
			font-size: 17px;
			text-transform: uppercase;
			color: #8cca42;
			}


#Huelle-Navi ul li a {
			margin-left: 50px;
			margin-right: 20px;			
			font-weight: bold;
			font-size: 14px;			
			padding-top: 10px;
			text-align: right;
			border-bottom: 1px dashed #667e8b;
			list-style: none;	

			color: #FFFFFF;
			display: block;
			background: url(Bilder/Liste.gif) no-repeat left center;		
			}

#Huelle-Navi ul li a:hover {
				margin-left: 50px;
				margin-right: 20px;			
				font-weight: bold;
				font-size: 14px;			
				padding-top: 10px;
				text-align: right;
				border-bottom: 1px dashed #667e8b;
				list-style: none;
	
				text-decoration: none;
				color: #8cca42;
				background: url(Bilder/Liste-over.gif) no-repeat left center;		
				}

#Huelle-Navi ul ul li a {
				font-weight: bold;
				font-size: 12px;			
				padding-top: 5px;
				text-align: right;
				border-bottom: 1px dashed #667e8b;
				list-style: none;
				margin-left:70px;


				color: #FFFFFF;
				display: block;
				/*background: url(Bilder/Liste.gif) no-repeat left center;*/			
				}

#Huelle-Navi ul ul li a:hover {
				font-weight: bold;
				font-size: 12px;			
				padding-top: 5px;
				text-align: right;
				border-bottom: 1px dashed #667e8b;
				list-style: none;
				margin-left:70px;


				text-decoration: none;
				color: #8cca42;
				/*background: url(Bilder/Liste-over.gif) no-repeat left center;*/			
				}

Wo liegt denn genau der Fehler? Denn wenn ich beispielsweise die Schriftgröße nur für das Untermenü ändere, geht es. Aber wenn ich das background rauskommentiere, passiert gar nichts.