Mozilla Firefox vs IE

napsi · 19. Februar 2007

Hallo und guten Morgen!

Ich habe folgendes Problem:
Ich habe 2 DIV's ('left' und 'right') diese sind im body eingebaut.

nun ist es so, dass der MF die darstellung richtig macht, der IE allerdings das div 'right' nach unten schiebt, kann mir jemand helfen?

Code:

* {                           /* alle Elemente sollen urspruenglich keine Innen- und Aussenabstaende haben */
	margin: 0;
	padding: 0;
	/*border: 1px dashed red;*/
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 980px;               /* beschraeknt das body-Tag und damit alle Kindelemente auf 980px Breite */
	margin: 0;
	padding: 0;
}

#header {
	border: 0;
	background-color: #818084;
	height: 69px;      
}

#left {
	border: 0px;
	height: 424px;
	width: 667px;
	background-image:url(../img/bilder/bildofhint.jpg);
	float: left;
	margin-top: 20px;
}

#right {
	border: 0px;
	height: 424px;
	width: 313px;
	background-color: #C9E8D2;
	margin-left: 667px;
	margin-top: 20px;
	font-style:normal;
}

#right a {
	text-decoration: none;
	color:#009037;
}

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

#foot {
	border: 0px;
	height: 80px;
	margin-top: 3px;
}

#shortnews1 {
	border: 0px;
	height: 75px;
	width: 328px;
	float:left;
	padding-top:5px;
	padding-right:5px;
}

#shortnews1 a {
	text-decoration: none;
	color:#f29400;
}

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

#shortnews2 {
	border: 0px;
	height: 75px;
	width: 329px;
	float:left;
	padding-top:5px;
	padding-right:5px;
}

#shortnews2 a {
	text-decoration: none;
	color:#009037;
}

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

#shortnews3 {
	border: 0px;
	height: 75px;
	width:308px;
	float:left;
	background-color: #009836;
	padding-top:5px;
	padding-right:5px;
}

#shortnews3 a {
	text-decoration: none;
	color:#FFFFFF;
}

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


#impressum {
	border: 0px;
	height: 25px;
	background-color: #807F84;
	margin-top:3px;
}

#dreieck {
	border: 0px;
	height: 424px;
	width: 422px;
}

#content {
	border: 0px;
	height: 424px;
	width: 558px;
	background-color: #C9E8D2;
}

#mainm {
	border:0px;
	height: 18px;
	width:909px;
	position:relative;
	margin-left: 70px;
	margin-top: -25px;
	font-size:12px;
	font-weight:bold;
	color: #FFFFFF;
	font-weight:bold;
	list-style: none;
	line-height:18px;
}

#subnav ul li {
	width: auto;
	text-align:left;
	margin-left: 20px;
	list-style-image:url(../img/hpelemente/aufzz.gif);
}

#subnav ul {
	width: 840px;
	margin: 0 auto;
	list-style: none;
}

.headline {
	font-size:18px;
	font-weight:bolder;
	color:#5A5A5A;
	line-height:25px;
	margin-bottom: 15px;
}

.impressum {
	font-size:10px;
	font-weight:bold;
	color:#FFFFFF;
	line-height:25px;
}

.content {
	font-size:10px;
	font-style:normal;
	line-height:18px;
	color:#000000;
}

#contflinks {
	border: 0px;
	height: 424px;
	width: 422px;
	background-image:url(../img/bilder/Bildofenfolge.jpg);
	float: left;
	margin-top: 20px;
}

#contfrechts {
	border: 0px;
	height: 424px;
	width: 558px;
	background-color: #C9E8D2;
	margin-left: 422px;
	margin-top: 20px;
	font-style:normal;
}

#subnav {
	border: 0px;
	height: 250px;
	width: 50px;
	margin-left: 15px;
	margin-top: 20px;
}

#subnav ul {
	line-height: 20px;
}

.pictureshortnews {
	margin-left: 2px;
	margin-right:5px;
}

.shortnews1headline {
	font-size:10px;
	font-weight:bold;
	color:#f29400;
}

.shortnews1content {
	font-size:10px;
	font-weight:normal;
	color:#000000;
}

.shortnews2headline {
	font-size:10px;
	font-weight:bold;
	color:#009037;
}

.shortnews3headline {
	font-size:10px;
	font-weight:bold;
	color:#FFFFFF;
}

.shortnews3content {
	font-size:10px;
	font-weight:normal;
	color:#FFFFFF;
}

#mainm ul {
	padding-left:10px;
}

#mainm ul li {
	list-style-type:none;
	display: inline;
}

#mainm ul li a{
	background: url(../img/hpelemente/dreieckmenuegruen.gif) no-repeat 0px 0px;
	color:#FFFFFF;
	font-size:10pt;
	padding:0px 7px 0px 10px;
	text-decoration:none;
}
#mainm ul li a:hover{
	background:url(../img/hpelemente/dreieckmenueorange.gif) no-repeat 0px  0px;
	color:#C9E8D2;
	text-decoration:underline;
}
#mainm ul li a:active{
	background:url(../img/hpelemente/dreieckmenuegruen.gif) no-repeat 0px  0px;
	color:#C9E8D2;
	text-decoration:underline;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Kaschuetz - Gussverarbeitung ist unsere Staerke</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-style-type" content="text/css"> <!-- Angabe des Content-Style-Typs darf nicht fehlen! -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<link href="css/colorofen.css" rel="stylesheet" type="text/css" media="all">
<link href="css/image.css" rel="stylesheet" type="text/css" media="all">
<style type="text/css">

</style>
</head>
<body>

	<div id="header">
		<img src="img/hpelemente/dreieckgruen.jpg" alt="" width="40" height="40" border="0" style="top: 0px; right: 0px; float: right;">
		<img src="img/hpelemente/dreieckflamme.jpg" alt="" border="0" style="top: 0px; left: 0px;">
	</div>
	
	<div id="mainm">
			<ul><li><a href="unternehmen.htm" target="_self">Unternehmen</a></li>
			<li><a href="gusstechnik.htm" target="_self">Gusstechnik</a></li>
			<li><a href="heiztechnik.htm" target="_self">Heiztechnik Kachelofen</a></li>
			<li><a href="produkte.htm" target="_parent">Produkte</a></li>
			<li><a href="news.asp" target="_self">News</a></li>
			<li><a href="kontakt.asp" target="_self">Kontakt</a></li>
			<li><a href="partner.asp" target="_self">Partner</a></li>
			<li><a href="galerie.asp" target="_self">Fotogalerie</a></li>
			<li><a href="login.asp" target="_self">Member</a></li>
			</ul>
	</div>


	<div id="left">
		<a href="index.htm"><img src="img/hpelemente/logo.gif" alt="" border="0" style="position:relative; top:-7px; left:70px"></a>
		<p></p>
<img src="img/hpelemente/siegel.gif" alt="" width="124" height="124" style="margin-left:61px">	</div>
<div id="right">
	  	<p align="right" class="headline">Die neue Qualit&auml;t <br>
   	  	des Heizens</p>
  	  <p align="right"><span class="content">Optimalen Komfort bei maximaler Sicherheit - <br>
     	das bietet Ihnen das Zusatzpaket <br>
      	euromatic Abbrandregelung</span><br>
        <span class="shortnews2headline">&lt;&lt;<a href="#" target="_self">mehr</a>&gt;&gt;</span></p>
	  	<img src="img/bilder/bildofen.jpg" alt="" width="173" height="111" style="position:relative; top: 10px; left:-60px">
		<img src="img/bilder/bildprod.jpg" alt="" width="173" height="111" style="position:relative; top: -102px; left: 139px">
		<img src="img/bilder/bildguss.jpg" alt="" width="171" height="116" style="position:relative; top: -90px; left:-60px">
</div>
	
	<div id="foot">
		<div id="shortnews1">
  		  <p><img src="img/bilder/dummy.jpg" alt="" align="left" class="pictureshortnews"><span class="shortnews1headline">Short News 1</span>
	  		<span class="shortnews1content"><br>
  		  Hier steht die Kurzform vom News2 wir testen weiter</span>	</p>
    		<p align="right" class="shortnews1headline">&lt;&lt;<a href="#">weiter</a>&gt;&gt;</p>
		</div>
	
		<div id="shortnews2">
  		  <p><img src="img/bilder/dummy.jpg" alt="" align="left" class="pictureshortnews"><span class="shortnews2headline">Short News 2</span>
	    	<span class="shortnews1content"><br>
  		  Hier steht die Kurzform vom News2 wir testen weiter</span>	</p>
	 	 	<p align="right" class="shortnews2headline">&lt;&lt;<a href="#">weiter</a>&gt;&gt;</p>
		</div>
	
		<div id="shortnews3">
 		  <p><img src="img/bilder/dummy.jpg" alt="" align="left" class="pictureshortnews"><span class="shortnews3headline">Short News 3
	 		</span><span class="shortnews1content"><br>
  		  </span><span class="shortnews3content">Hier steht die Kurzform vom News2 wir testen weiter	</span></p>
	  		<p align="right" class="shortnews3headline">&lt;&lt;<a href="#" class="shortnews3headline">weiter</a>&gt;&gt;</p>	
		</div>
	</div>
	
	<div id="impressum">
	  	<p align="center" class="impressum">KASCHÜTZ Gesellschaft m.b.H., A-3163 Rohrbach/Gölsen, Dreikreuzstr. 42, Tel.: +43(0)2764/24 01, Fax: +43(0)2764/76 82,  kaschuetz@kaschuetz.at</p>
	</div>
	
</body>
</html>

Maik · 19. Februar 2007

Hi,

entferne mal die Breitenangabe für das DIV right.

napsi · 19. Februar 2007

Danke, die Idee ist gut, hilft aber auch nicht viel, immerhin bleibt dann ein rand von 3 px. obwohl ich die breitenangaben genau durchgerechnet habe. ausserdem ist das div 'right' aus irgend einem grund im IE länger (im die höhe ca. 40px) als im MF.

Irgendwie verstehe ich das alles nicht.

Maik · 19. Februar 2007

Den "3px-Bug" im IE kannst du folgendermaßen lösen:

Code:

#left {
        border: 0px;
        height: 424px;
        width: 667px;
        background:url(../img/bilder/bildofhint.jpg);
        float: left;
        margin-top: 20px;
        margin-right: 0 !important; /* Für moderne Browser */
        margin-right: -3px; /* Für IE */
}

#right {
        border: 0px;
        height: 424px;
        background-color: #C9E8D2;
        margin-left: 667px !important; /* Für moderne Browser */
        margin-left: 664px; /* Für IE */
        margin-top: 20px;
        font-style:normal;
}

Kannst du die Seite mal online stellen, damit ich mir das mit dem Höhenunterschied genauer anschauen kann?

napsi · 19. Februar 2007

mache ich unter folgender URL:

http://members.kabsi.at/Gerald/main.htm

ist in 3 minuten am server

Maik · 19. Februar 2007

Okay, erweiter mal die CSS-Regel für das DIV right folgendermaßen:

Code:

#right {
        border: 0px;
        height: 424px;     
        background-color: #C9E8D2;
        margin-left: 667px !important; /* Für moderne Browser */
        margin-left: 664px; /* Für IE */
        margin-top: 20px;
        font-style:normal;
        position: relative;
}

und nimm für die drei Bilder folgende Positionierung vor:

Code:

<img src="img/bilder/bildofen.jpg" alt="" width="173" height="111" style="position:absolute; top: 140px; left:-60px">
<img src="img/bilder/bildprod.jpg" alt="" width="173" height="111" style="position:absolute; top: 140px; left: 139px">
<img src="img/bilder/bildguss.jpg" alt="" width="171" height="116" style="position:absolute; top: 260px; left:-60px">

napsi · 19. Februar 2007

Danke, funkt ganz gut, allerdings ergibt sich jetzt ein neues problem, ich brache in einem div einen scrollbalken, jedoch verschiebt sich dann der ganze aufbau vom DIV 'contrechts' erst wieder.

was soll ich nun tun.

ist wieder online

lg.

napsi

Maik · 19. Februar 2007

Probier mal Folgendes:

Code:

#contfrechts {
        border: 0px;
        height: 424px;
        width: 558px;
        background-color: #C9E8D2;
        margin-top: 20px;
        font-style:normal;
        overflow:auto;
        float: right;
}

#foot {
        border: 0px;
        height: 80px;
        margin-top: 3px;
        clear: both;
}

napsi · 19. Februar 2007

tut leid, aber da bin ich wieder wie am anfang. der contrechts schließt sich wieder unten an, und alle abstände sind total verschoben. das wegen dem scrollbar ist auch nur im MF komischer weise

Maik · 19. Februar 2007

Hm, bei mir funktioniert's einwandfrei.

Vielleicht hilft es, wenn du das bestehende Layout in ein umschliessendes DIV #wrapper packst:

Code:

#wrapper {
width: 980px;
}

Code:

<body>
    <div id="wrapper">
        <!-- Hier folgt der Bestand -->
    </div>
</body>

Mozilla Firefox vs IE

napsi

Erfahrenes Mitglied

Maik

napsi

Erfahrenes Mitglied

Maik

napsi

Erfahrenes Mitglied

Maik

napsi

Erfahrenes Mitglied

Maik

napsi

Erfahrenes Mitglied

Maik

Neue Beiträge