Im IE werden div´s verschoben - i werd narrisch

**derdrummer** · 24.11.2009 12:34

Hallo Forumsgemeinde,

der Drummer sagt erstmal "Hallo" und startet - aus Gründen der Dringlichkeit - mit der ersten Frage. Die Vorstellung wird nachgereicht, versprochen!!

Nun die Frage:

Die folgende Seite wurde von mir konstruiert:

http://www.matratzenfachmarkt.de/index_neu.html

Das Problem mit der Seite stellt sich wie folgt dar:

Darstellung im FF und Opera:

Darstellung im IE, Version 6.0.2900:

Zur Problemsuche hier der HTML-Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Matratzen, Matratze, Kissen, Shop, Variomed, prävent, gesund, schlafen, vmp, lattenroste" />
<meta name="description" content="Varomed prävent Matratzen und Kissen geben Ihnen ein schwereloses Gefühl und passen sich Ihrem Körper perfekt an. " />
<title>Matratzen und Kissen zum wohlfühlen - Variomed prävent</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body id="home" onload="MM_preloadImages('images/shop.gif','images/worauf-sie-schlafen-hover3a.gif','images/shophover3.gif','images/textiles-vertrauen-hover3.gif','images/lattenrost-hover.gif','images/kissen-hover.gif','images/matratzen-hover.gif','images/textiles-vertrauen-hover3a.gif','images/kissen-hover3.gif')">


	<div id="wrappermain">
	
		<div id="topleiste" class="vmpgreen">
		&nbsp;
		</div> <!-- END #topleiste -->
		
		<div id="sitelogo" class="vmpgreen"> <!-- BEGIN #sitelogo -->
		Mit Variomed prävent Kissen und Matratzen den Schlaf neu erleben.
		</div> <!-- END #sitelogo -->
		
		<div id="flashlogotop"> <!-- BEGIN Flashlogotop -->
		<object type="application/x-shockwave-flash" data="http://www.matratzenfachmarkt.de/flash/variomed-praevent.swf"
		width="767" height="126"
		id="Variomed-Pr&auml;vent-Matratzen-und-Kissen">
		<param name="movie" value="http://www.matratzenfachmarkt.de/flash/variomed-praevent.swf" />
		<p>You need the Flash plugin.</p>
		<p><a href="http://www.macromedia.com/go/getflashplayer/">Download Macromedia Flash Player</a></p>
		</object>
		</div> <!-- END #flashlogotop -->
		
		
		
<div id="wrappersub" class="defloat">
		
		<!-- BEGIN #nav, Navigationcontainer-->
		
        <div id="nav">
			
			<ul>
			
			  <li class="navhome bordertop">
			  <a href="http://www.matratzenfachmarkt.de/index.html" target="_self">
			  Home</a>  
			  </li>
			  
			  <li class="navmatratzen bordertop">
			  <a href="http://www.matratzenfachmarkt.de/matratzen_auflagen.html" target="_self">
			  Matratzen und Auflagen</a>
			  </li>
			  
			  <li class="navkissen bordertop">
			  <a href="http://www.sondermatratze.de/zuhause/Zuhause_1.html" target="_self">
			  Kissen und Nackenst&uuml;tzkissen </a>			  
			  </li>
			  
			  <li class="navontour bordertop">
			  <a href="http://www.sondermatratze.de/ontour/onTour_1.html" target="_self">
			  Auflagen und <br />Kissen für Unterwegs</a>			  
			  </li>
			  
			  <li class="navitech bordertop">
			  <a href="http://www.sondermatratze.de/technologien.html" target="_self">
			  Materialien</a>
			  </li>
			  
			  <li class="navirost bordertop">
			  <a href="#" target="_self">
			  Lattenroste</a>
			  </li>
			  
			  <li class="navishop bordertop">
			  <a href="#" target="_self">
			  Shop</a>
			  </li>
			  
			  <li class="navikontakt bordertop borderbottom">
			  <a href="http://www.sondermatratze.de/kontakt.html" target="_self">
			  Kontakt</a>
			  </li>
			
			</ul>
					
		</div> <!-- END #nav, Navigationcontainer -->
			
			
			
		<!-- BEGIN #wrapcontent, Hauptframe rechts -->
		
		<div id="wrapcontent">
			
			<!-- BEGIN #breadcrump -->
			<div id="bread" class="vmpgreen breadcrumb">
			<ul>
			<li>Sie befinden Sich hier:</li>
			<li><a href="http://www.matratzenfachmarkt.de/"><span>Home</span></a></li>
			<li>Matratzen</li>
			 </ul>
			 </div>
			<!-- END #breadcrumb" -->
		
		
		<div id="wrappercontentinside">  <!-- BEGIN #wrappercontentinside , ab hier Inhalt -->
		
					
			<div id="logokissen">
			<a href="#" onmouseout="MM_swapImgRestore()" onmouseover=
			"MM_swapImage('kissen','','images/kissen-hover3.png',1)">
			<img src="http://www.traum-projekt.com/forum/images/kissen.png" alt="variomed kissen" name="kissen" border="0" id="kissen" /></a>
			</div>
							 
			<div id="logomatratzen">
			<a href="http://www.matratzenfachmarkt.de/matratzen_auflagen.html" onmouseout="MM_swapImgRestore()" 
			onmouseover="MM_swapImage('Matratzen','','images/matratzen-hover3.png',1)">
			<img src="http://www.traum-projekt.com/forum/images/matratzen.png" alt="Variomed pr&auml;vent Matratzen" name="Matratzen" border="0" id=
			"Matratzen" /></a>
			</div>
							 
			<div id="logoshop">
			<a href="#" onmouseout="MM_swapImgRestore()"
			onmouseover="MM_swapImage('shop','','images/shophover3.png',1)">
			<img src="http://www.traum-projekt.com/forum/images/shop.png" alt="Zum Matratzen- und Kissenshop" name="shop" border="0" id="shop" /></a>
			</div>
							 
			<div id="logolattenrost">
			<a href="#" onmouseout="MM_swapImgRestore()"
			onmouseover="MM_swapImage('lattenrost','','images/lattenrost-hover.png',1)">  
			<img src="http://www.traum-projekt.com/forum/images/lattenrost.png" alt="Lattenroste" name="lattenrost" border="0" id="lattenrost" /></a>
			</div>
			 
				 
			<!-- BEGIN #wrappersidebar , Bilder in Flash-Animation -->
			<div id="wrappersidebar">   
			
			<object type="application/x-shockwave-flash" data="flash/variomed_sidebar3a.swf"
			width="715" height="154"
			id="variomed_matratzen_kissen">
			<param name="movie" value="flash/variomed_sidebar3a.swf" />
			<p>You need the Flash plugin.</p>
			<p><a href="http://www.macromedia.com/go/getflashplayer/">Download Macromedia Flash Player</a></p>
			</object>
			
			</div> 	
			<!-- END #wrappersidebar -->
				
   
			</div> 
			<!-- END #wrappercontentinside -->		
			
			
			
			</div> 
			 
		<!-- END #wrapcontent -->
		
			
</div> <!-- END #wrappersub -->

<!-- footer -->
	
	 <div id="footer" class="vmpgreen">
	 &Uuml;ber Variomed Pr&auml;vent&nbsp;&nbsp;|&nbsp;&nbsp;H&auml;ndler&nbsp; |&nbsp;&nbsp;		   <a href="http://www.sondermatratze.de/impressum.html">Impressum</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.sondermatratze.de">Fr&auml;nkische Schlafmanufaktur</a>
	 </div>
   	
<!-- END footer -->	
		
</div> <!-- END #wrappermain -->
	</div>



</body>
</html>

Und hier das zugehörige Stylesheet:

HTML-Code:

/* CSS Document */

*
	{
	margin: 0px;
	}

html
	{
	height: 100.3%
	}
	
h1, h2
	{
	background: #FFFFFF;
	color: #666666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}

h1 {
	font-size: 26px;
	font-weight:normal;
	}
	
	
h2 {
	font-size: 26px;
	font-weight:lighter;
	}

a:link, a:visited {
	text-decoration: none;
	color: #FFFFFF;
	}

a:hover {
	text-decoration: underline;
	color: #FF0000; 
}
a:active {
	text-decoration: none;
}

ul, li {
	margin: 0px;
	padding: 0px;
	}
	

	
body {
	font-family: Arial, Helvetica, sans-serif;
	background-image:url(images/background5.gif);
	text-align: center;
	}

div#wrappermain
	{
	width:900px;
	margin: 15px auto;
	text-align: left;
	height: auto;
	}

div#topleiste
	{
	width: 900px;
	height: 20px;
	}

div#sitelogo
	{
	float: right;
	width: 103px;
	height: 106px;
	padding: 20px 15px 0px 15px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	font-size: 15px;
	}

div#flashlogotop
	 {
	width: 767px;
	height: 126px;
	float: left;
	}
		
div#wrappersub
	{
	padding: 0px;
	background-image: url(images/bg_wrapcontent.gif);
	background-repeat: repeat-y;
	}
	
div#nav							/* Navigationscontainer */
	{
	float: left;
	width: 140px;
	margin: 0px;
	padding: 35px 5px 8px 0px;
	background-image: url(images/navi-bg5.gif);
	background-repeat: no-repeat;
	background-color: #7AAE36;
	}

div#nav ul {
	padding: 0px 0px 0px 10px;
	min-height: 450px;
	}
	
div#nav li {
	list-style-type: none;
	padding: 8px 0px 8px 0px;
	font-size: 14px;
	}

div#wrapcontent 				/* Artikelcontainer */
	{
	background: #FFFFFF;
	width: 755px;
	min-height: 400px;
	margin-left: 145px;
	padding: 0px;
	}
	
div#wrappercontentinside		/* Artikelcontainer inside*/
	{
	width: 715px;
	height: auto;
	padding: 40px 0px 0px 20px;
	margin-left: 0px;
	margin-top: 0px;
	display: block;
	right: 0px;
	padding-bottom: 35px;
	padding-right: 20px;
	}

#wrappercontentinside h2 h1
	{
	color:#627AB3;
	}
	
div#logomatratzen
	{
	width:316px;
	height:162;
	}
	
div#logokissen
	{
	float: right;
	top: 5px;
	width:316px;
	height: 162px;
	}
		
div#logoshop
	{
	float: right;
	width: 316px;
	height: 162px;
	margin-top: 30px;
	}	
	
div#logolattenrost 
	{
	left: 0px;
	width: 316px;
	height: 162px;
	margin-top: 30px;
	}
	
div#footer
	{
	left: 0px;
	width: 900px;
	height: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	font-weight: lighter;
	text-align: center;
	padding-top: 3px;
	padding-bottom: 3px;
	clear: left;
	}

div#wrappersidebar					/* unteres Flashmovie */
	{
	left: 20px;
	width: 715px;
	height: 154px;
	margin-top: 30px;
	}

div#sidebar
	{position: absolute;
	top: 386px;
	left: 0px;
	width: 715px;
	height: 154px;
	}	
	
	
.defloat {
	clear: both;
	}
	
/* Boderdefinitionen */

.bordertop
	{
	border-top-style: solid;
	border-top-color: #E2EED5;
	border-top-width: 1px;
	}
	
.borderbottom
	{
	border-bottom-style: solid;
	border-bottom-color: #E2EED5;
	border-bottom-width: 1px;
	padding-top: 8px;
	}
	
.bordergreen2
	{
	border: 1px solid #7AAE36;
	}
	
.borderwhite2px
	{
	border: 2px solid #FFF;
	}
	

	
div#bread							/* breadcrumb */
	{
	float: left;
	color: #FFFFFF;
	width: 100%;
	height: 13px;
	margin-top: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 11px;
	font-weight: lighter;
	}

.breadcrumb ul{
	margin:0px;
	padding-left: 0px;
	list-style-type: none;
}

.breadcrumb ul li{
	padding: 0px;
	margin: 0px;
	list-style:none;
	display:inline;
	}
	
.breadcrumb ul li a{
	color: #FFFFFF;
	text-decoration:none;
	display:inline;
	background-image: url(images/breadcrumbImage.gif);
	background-repeat: no-repeat;
	padding-left: 0px;
	background-position: right -3px;
	margin-right: 7px;
	font-weight: lighter;
}

	
.breadcrumb ul li a span{
	padding:0 15px 0 5px;
	}
.breadcrumb ul li a:hover span{
	text-decoration:underline;
	color:#FF0000;
}
.breadcrumb ul li a.active{background:none;}
.breadcrumb ul li a.active span{color:#FFFFFF;}
.breadcrumb ul li a.active:hover span{text-decoration:none;}





/* Farbdefinitionen */
	
.vmpgreen
	{
	background-color: #7AAE36;
	}
	
.vmpwhite
	{
	background-color: #FFFFFF;
	}

Nach drei stunden Suchen habe ich den Fehler, der den "#wrappercontentinside" unter den "#wrappersub" verschiebt, immer noch nicht gefunden...

Für eure Hilfe schonmal Danke im Voraus!

Edith hat die id´s korrigiert

**derdrummer** · 24.11.2009 18:39

Hat einer von den Forumsmembern evtl. eine Vergleichsmöglichkeit mit dem IE6?

Könnte sein, daß es nur bei meiner Version nicht funktioniert...

**hero-master** · 24.11.2009 19:14

Moin Drummer

du clearst das falsch. Das ist so eine Geschichte für sich. dazu ein paar Links:
- Link 1
- Link 2
- Link 3

Am besten ist es immer beide Objekte zu floaten, da du bei dem jetzigen Clear-Einsatz das floaten auch für dein Menu "entfernst".
Floate beide und bau mit der Pseudoklasse :after ein Clear ein

**derdrummer** · 24.11.2009 20:13

Danke für den Tip Hero

werde ich morgen im Büro gleich mal antesten... im IE > 6 tut´s ohne Probleme.

**derdrummer** · 25.11.2009 08:22

Zitat von hero-master

Moin Drummer

du clearst das falsch. Das ist so eine Geschichte für sich. dazu ein paar Links:
- Link 1
- Link 2
- Link 3

Am besten ist es immer beide Objekte zu floaten, da du bei dem jetzigen Clear-Einsatz das floaten auch für dein Menu "entfernst".
Floate beide und bau mit der Pseudoklasse :after ein Clear ein

Klasse, genau das war´s - 5 Minuten Nachdenken hätten mir nen Tag Suchen erspart

Vielen Dank nochmal!

zur Startseite vom TP

Thema: Im IE werden div´s verschoben - i werd narrisch

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Im IE werden div´s verschoben - i werd narrisch

Ähnliche Themen

Elemente können nicht erstellt, gelöscht, verschoben werden

Ich werd wahnsinnig...

Abhängige Dateien bereitstellen ( i werd narrisch )

Fireworks 8||Masken werden nicht mit verschoben

Wie werd ich Loomes los?

Aktive Benutzer

Aktive Benutzer