Thema: IE 6 Komponenten Darstellung, Inhalt unten

Guten Tag zusammen,

Auf meiner Testseite: kienast.teneriffa.interway.ch ist es so, dass wenn man z.B. beim Tuning den Teilekatalog anklickt oder unter Weiteres den Kontakt auswählt, im Internet Explorer 6 der Inhalt unter der linken Navigation angezeigt wird. Der Inhalt sollte jedoch wie der "normale" Content oben angezeigt werden.

Der einzige Unterschied den ich sehen kann ist, das bei der Anzeige von Componenten contentpaneopen nicht verwendet wird, im Unterschied zu allen anderen Inhalten.

Ich habe schon alles mögliche ausprobiert und leider kam ich bis jetzt zu keiner Lösung. Weiss da evt. jemand Bescheid, an was dieses IE 6 Phänomen liegen könnte? Kein anderer Browser (getestet wurde: Opera 9.0, IE 7, Firefox 2) interpretiert falsch.

Jetzt schon Danke für alle die dazu eine Idee oder Lösung haben.

Danke für die schnelle Antwort, nur da stehe ich wieder bei meinem Anfangsproblem.

Wenn ich Float: left verwende, schiebt Firefox und Opera den Inhalt nach unten, der IE behält den Inhalt oben, ausser den Teilekatalog und die Kontaktdaten (welche als Komponenten eingebunden sind.) --> jetzt zu sehen im Tuningbereich. Darum kam ich auf die Lösung margin-left: 20%;
Was dann den normalen Inhalt überall richtig darstellte.

Was könnte es denn sonst noch sein?

Edit: musste es auf die alten Einstellungen margin-left: 20% zurücknehmen.

Ohje, ich verzweifle. Das ganze hat noch weitere Auswirkungen im Virtuemart. Für alle Browser. Die Artikel werden jetzt leider zu weit unten angzeigt.
Ein Produkt ist oben, alle anderen unten.

Ich sehe einfach die Ursache nicht.

Danke für alle Ideen und Feedbacks.

Guten Tag RedRaptor,
Bin ich froh um deine Antwort, ich bin zur Zeit sehr ratlos bezüglich dem Problem.

Habe das Padding Entfernt und margin-left auf 21% eingestellt, damit der Text nicht an den Naviboxen klebt. Doch leider ändert sich nichts.

Beim Virtuemart hat sich das Problem ja auf alle Browser ausgedehnt.

Folgendes ist die in meinem Fall die Lösung:
#content
float: left;
width: 70%;
padding-top: 10px;
margin-left: 8px;

1000end Dank an RedRaptor ich bin sehr dankbar, für deine investierte Zeit.

Ja spinnen die denn total. Ich hab mir den Wolf gesucht und Stunden meiner Zeit
verschwendet nur weil der IE, übrigens auch der 7er im aktuellen Patchlevel,
einen Padding Tag nicht korrekt interpretiert.

Vielen Dank für euren Hinweis nochmal, ich geh mal brechen!

Das Problem hat der IE 6 aufgrund eines float drop-bugs.

Folgendes könnte helfen: display: inline; einfügen bei #content.

Sollte das nicht helfen, muss die width Angabe absolut angegeben werden. Also nicht in % sondern z.B. in px. Dann verschiebt der IE es nicht mehr.

Hi ich habe ein ähnliches Problem.

www.cybermusique.de

meine Tmpl:

Code:

BODY#body{
	margin:0;
	padding:0;
	text-align: center;
	background: #000;
}

body, td, th, tr, p, div {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333;
	line-height: 145%;
}

#home_module div,
#home_module p {
	color: #666;
}

#right div,
#right p {
	color: #fff;
}

.moduletable {
	margin: 0;
	padding: 10px;
}

#content .moduletable {
	padding-right: 0;
}

p {
	margin:0;
	padding: 10px;
	padding-left: 0;
}

#left .moduletable,
#left .moduletable_text,
#left .moduletable_menu {
	padding-left: 10px;
}

#wrapper {
	position: relative;
	width: 740px;
	margin: 0 auto;
	text-align: left;
}

#header {
	position: relative;
	height: 110px;
}

#logo {
	position: absolute;
	top: 60px;
	left: 0;
	width: 210px;
	height: 120px;
}

#menu {
	position: absolute;
	right: 190px;
	bottom: 10px;
	
}

#wrapper_content {
	float: left;
	width: 537px;
	background: #fff;
	padding-top: 10px;
}

#right {
	width: 200px;
	float: right;
	
}

#right .moduletable {
	padding-right: 0;
}

#right p {
	padding: 10px;
}

#home_img {
	width: 535px;
	height: 388px;
	text-align: center;
}

#home_module {
	float: right;
	width: 315px;
}

#in_img {
	height: 115px;
	padding: 10px;
	padding-top: 0;
}

#left {
	float: left;
	width: 200px;
}

#content {
	float: left;
	width: 300px;
}



#footer {
	text-align: left;
}

#logo img {
	display: block;
}

.space {
	height: 50px;
}

.clear {
	clear: both;
}


/* GENERAL PURPOSE STYLES */

a:link, 
a:active, 
a:visited {
	color: #9B0F05;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

#header2 .moduletable {
	padding: 0;
	margin: 0;
}

.inputbox {
	margin-right: 5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	border: 1px solid #ddd;
}

.sectiontableentry1 {
	background-color: #fff;
}

.sectiontableentry2 {
	background-color: #f9f9f9;
}

.small {
  font-size: 9px;
  text-decoration: none;
  font-weight: normal;  
}

form {
	padding: 0;
	margin: 0;
}

#footer a, 
#footer a:link, 
#footer a:visited,
#right a:link, 
#right a:visited  {
	color: #999;
}

#footer a:hover {
	text-decoration: underline;
}

.componentheading,
.contentheading {
	font-size: 13px;
	color: #E13D0C;
	font-weight: bold;
	padding: 0;
	margin: 0;
	padding-bottom: 5px;
	text-transform: lowercase;
}


/* new tags */

h1, h2, h3, h4 {
	margin: 0;
	padding: 10px;
	padding-bottom: 0;
	padding-left: 0;
}

h1 {
	font-size: 14px;
}

h2 {
	font-size: 13px;
	color: #333;
}

h3 {
	font-size: 12px;
}

#left h3 {
	padding-right: 0;
	padding-bottom: 5px;
	text-transform: lowercase;
}

#right h3 {
	background: url(../images/right_h3.jpg) no-repeat left top;
	padding: 5px;
	padding-left: 10px;
	text-transform: lowercase;
	height: 24px;
}

#footer h3 {
	display: none;
}

h4 {
	font-size: 11px;
	color: #333;
}

ul { 
	margin: 2px;
	padding: 6px;
	padding-left: 15px;
}

li {	
	list-style: none;
	padding-left: 1px;
	line-height: 150%;
}

#content li {
	list-style-image: url(../images/arrow.png);
}

ul.arrow1 li,
ul.arrow2 li {
	padding-left: 5px;
	padding-bottom: 2px;
	padding-top: 2px;
}

ul.arrow1,
ul.arrow2  {	
	line-height: 150%;
	padding-bottom: 3px;
	margin-top: 2px;
}

ul.arrow1 li {	
	list-style-image: url(../images/arrow1.jpg);
}

ul.arrow2 li {
	list-style-image: url(../images/arrow2.jpg);
}

#left ul {
	margin: 0;
	padding: 0;
	padding-left: 10px;
}

#left ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-image: none;
}

#left ul li a, 
#left ul li a:link, 
#left ul li a:visited {
	text-decoration: underline;
	line-height: 20px;
	font-size: 11px;
	color: #666;
}

#left ul li a:hover,
#left ul li a:active {
	color: #E13D0C;
}

/* primary menu - at the top of this site */


#menu ul, 
#menu li {
	list-style-type:none;
	list-style-image:none;
	padding: 0;
	margin: 0;
}

#menu ul li {
	float: left;
	line-height: 30px;
}

#menu a, 
#menu a:link, 
#menu a:visited  {
	font-size: 11px;
	color: #C9C0A3;
	padding-left: 12px;
	padding-right: 12px;
	text-transform: lowercase;
}

#menu ul li a:hover,
#menu ul li a#active_menu {
	text-decoration: underline;
}



img, fieldset {
	border: 0;
}

Irgendwie rutscht es nach unten, Padding ist auch genug drin, leider habe ich nicht allzuviel Ahnung.

Gruß

Zitat von amidalaself

Guten Tag RedRaptor,
Bin ich froh um deine Antwort, ich bin zur Zeit sehr ratlos bezüglich dem Problem.

Habe das Padding Entfernt und margin-left auf 21% eingestellt, damit der Text nicht an den Naviboxen klebt. Doch leider ändert sich nichts.

Beim Virtuemart hat sich das Problem ja auf alle Browser ausgedehnt.

Folgendes ist die in meinem Fall die Lösung:
#content
float: left;
width: 70%;
padding-top: 10px;
margin-left: 8px;

1000end Dank an RedRaptor ich bin sehr dankbar, für deine investierte Zeit.

Danke Leute! Ihr habt mir den Tag gerettet!

Grüße,
Markus