✔ Darstellung IE6

schutzgeist · 22. Juni 2009

Guten Morgen

Ich hab im IE6 mit folgender Seite massiv Probleme...
Der innere Aufbau besteht aus 3 Spalten, was im IE7 und FF auch wunderbar funktioniert..
Nur im IE6 reißt es mir da ein Loch rein, das der mittlere Kasten nach unten rutscht und er da anfängt, wo links/rechts zu Ende ist...

HTML:

HTML:

<div id="container">
<div id="subnavi"></div>
<div id="head"></div>
<div id="navi"></div>

<div id="wrapper" class="clearfix">
    <div id="left">
    
        <div id="dentalhead"><a href="shop/abc.html">ABC</a></div>
        <div id="dentalmain"></div>
        <div id="dentalbottom"></div>
    
        <div id="buerohead"><a href="shop/abc.html">ABC</a></div>
        <div id="bueromain"></div>
        <div id="buerobottom"></div>
        
        <div id="leistunghead">ABC</div>
        <div id="leistungmain"></div>
        <div id="leistungbottom"></div>
    
    </div>

    <div id="right">
     
        <div id="suchehead">Suche</div>
        <div id="suchemain" style="text-align: center"></div>
        <div id="suchebottom"></div>
         
        <div id="pdtdentalhead">ABC</div>
        <div id="pdtdentalmain"></div>
        <div id="pdtdentalbottom"></div>
    
        <div id="pdtbuerohead">ABC</div>
        <div id="pdtbueromain"></div>
        <div id="pdtbuerobottom"></div>
         
         
         <div id="neuheithead">ABC</div>
        <div id="neuheitmain"></div>
        <div id="neuheitbottom"></div>
     </div>
     
         
     <div id="center">
     
        <div id="contenthead">
        <!-- Inhalt -->
        </div>
        <div id="contentbottom"></div>
        
    </div>
</div>
<div id="foot"></div>

CSS:

Code:

/* CSS Document */

html, body {
	margin:0;
	padding:0;
	height: 100%;
	background-color: #eee;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#container {
	margin: 0 auto;
	width: 994px;
	min-height: 100%; /* Moderne Browser */
	height: auto !important; /* Moderne Browser */
	height: 100%; /* IE */
}
#subnavi {
	position: relative;
	margin-left: 58px;
	top: 26px;
	font-size: 11px;
	font-weight: bold;
	text-align: right;
	width: 923px;
	border: #F00 1px solid;
	height: 18px;
	background: url(../img/bg_silver.gif) repeat-x;
	padding: 7px 4px 2px 0px;
	white-space: nowrap;
}
#subnavi b {
	display: none;
}
#subnavi a {
	text-decoration: none;
	color: #000;
	padding: 0 20px 1px 0;
}
#subnavi a:hover {
	text-decoration: underline;
}
#head {
	position: relative;
	top: 25px;
	width: 994px;
	height: 233px;
	background: url(../img/head.jpg);
}
#navi {
	position: relative;
	top: 24px;
	width: 922px;
	height: 18px;
	background: url(../img/bg_silver.gif) repeat-x;
	border: #F00 1px solid;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	padding: 7px 4px 2px 0px;
	white-space: nowrap;
	margin-left: 7px;
}

#navi b {
	display: none;
}
#navi a {
	text-decoration: none;
	color: #000;
	padding-right: 20px;
	padding-left: 20px;
}
#navi .space1 {
	padding-right: 40px;
	}
#navi .space2 {
	padding-left: 40px;
	}
#navi a:hover {
	text-decoration: underline;
}
#wrapper {
	margin: 0 auto;
	width: 994px;
	margin-top: 40px;
}
#wrapper a {
	color: #F00;
	text-decoration: none;
}
#wrapper a:hover {
	color: #F00;
	text-decoration: underline;
}
#wrapper input, textarea {
	border: 1px solid #F00;
	font-size: 11px;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#wrapper .button {
	width: 149px;
	background: #FFF;
}
#wrapper .contact {
	width: 300px;
}
div#left {
	float: left;
	width: 217px;
	background: #FFF;
	font-size: 11px;
	font-weight: bold;
	background-color: #eee;
	margin-left: 7px !important;
	margin-left: 3px;
}
div#left .link {
	text-align: center;
	margin-bottom: -9px !important;
	padding-bottom: -25px;
	margin-top: -9px !important;
	margin-top: -25px;
}
div#left .big {
	font-size: 14px;
}
div#left .red {
	color: #F00;
}
div#right {
	float: right;
	width: 217px;
	background: #FFF;
	font-size: 11px;
	font-weight: bold;
	background-color: #eee;
}
div#center {
	margin: 0 200px;
	margin-left: 230px;
	width: 542px;
	background: #FFF;
	font-size: 11px;
	font-weight: bold;
	background: url(../img/box_main_bg.jpg) repeat-y;
}
div#center .red {
	color: #F00;
}

/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */



#dentalhead {
	background:url(../img/box_klein_head.jpg) repeat top;
	font-size: 11px;
	font-weight: bold;
	padding: 9px;
	width: 199px;
	height: 10px;
	}
#dentalhead a{
	color: #000;	
}
#dentalhead a:hover{
	text-decoration: none;
}
#dentalmain {
	padding: 9px;
	width: 199px;
	background: url(../img/box_klein_bg.jpg) repeat-y;
}
#dentalbottom {
	background:url(../img/box_klein_bottom.jpg) repeat top;
	height: 8px;
	margin-bottom: 7px;
}
#buerohead {
	background:url(../img/box_klein_head.jpg) repeat top;
	font-size: 11px;
	font-weight: bold;
	padding: 9px;
	width: 199px;
	height: 11px;
}
#buerohead a{
	color: #000;	
}
#buerohead a:hover{
	text-decoration: none;
}
#bueromain {
	padding: 9px;
	width: 199px;
	background: url(../img/box_klein_bg.jpg) repeat-y;
}
#buerobottom {
	background:url(../img/box_klein_bottom.jpg) repeat top;
	height: 8px;
	margin-bottom: 7px;
}

#leistunghead {
	background:url(../img/box_klein_head.jpg) repeat top;
	font-size: 11px;
	font-weight: bold;
	padding: 9px;
	width: 199px;
	height: 11px;
}
#leistungmain {
	padding: 9px;
	width: 199px;
	background: url(../img/box_klein_bg.jpg) repeat-y;
}
#leistungbottom {
	background:url(../img/box_klein_bottom.jpg) repeat top;
	height: 8px;
}

#contenthead {
	background:url(../img/box_main_head.jpg) repeat top;
	font-size: 11px;
	font-weight: bold;
	padding: 9px;
	height: 11px;
}
#contentmain {
	padding: 12px;
	width: 514px;
	font-weight: normal;
}
#contentmain .bigblack {
	font-weight: bold;
	font-size: 17px;
}
#contentmain .bigred {
	font-weight: bold;
	font-size: 17px;
	color: #F00;
}
#contentmain .bigcenter {
	text-align: center;
}
#contentbottom {
	background:url(../img/box_main_bottom.jpg) repeat top;
	height: 8px;
}
#pdtdentalhead {
	background:url(../img/box_klein_head.jpg) repeat top;
	font-size: 11px;
	font-weight: bold;
	padding: 9px;
	width: 199px;
	height: 11px;
}
#pdtdentalhead a{
	color: #000;	
}
#pdtdentalhead a:hover{
	text-decoration: none;
}
#pdtdentalmain {
	padding: 9px;
	width: 199px;
	background: url(../img/box_klein_bg.jpg) repeat-y;
}
#pdtdentalbottom {
	background:url(../img/box_klein_bottom.jpg) repeat top;
	height: 8px;
	margin-bottom: 7px;
}


#suchehead {
	background:url(../img/box_klein_head.jpg) repeat top;
	font-size: 11px;
	font-weight: bold;
	padding: 9px;
	width: 199px;
	height: 11px;
}
#suchemain {
	padding: 9px;
	width: 199px;
	background: url(../img/box_klein_bg.jpg) repeat-y;
}
#suchebottom {
	background:url(../img/box_klein_bottom.jpg) repeat top;
	height: 8px;
	margin-bottom: 7px;
}


#pdtbuerohead {
	background:url(../img/box_klein_head.jpg) repeat top;
	font-size: 11px;
	font-weight: bold;
	padding: 9px;
	width: 199px;
	height: 11px;
}
#pdtbuerohead a{
	color: #000;	
}
#pdtbuerohead a:hover{
	text-decoration: none;
}
#pdtbueromain {
	padding: 9px;
	width: 199px;
	background: url(../img/box_klein_bg.jpg) repeat-y;
}
#pdtbuerobottom {
	background:url(../img/box_klein_bottom.jpg) repeat top;
	height: 8px;
	margin-bottom: 7px;
}

#neuheithead {
	background:url(../img/box_klein_head.jpg) repeat top;
	font-size: 11px;
	font-weight: bold;
	padding: 9px;
	width: 199px;
	height: 11px;
}
#neuheitmain {
	padding: 9px;
	width: 199px;
	background: url(../img/box_klein_bg.jpg) repeat-y;
}
#neuheitbottom {
	background:url(../img/box_klein_bottom.jpg) repeat top;
	height: 8px;
}
h1 {
	color:#F00;
	font-weight: bold;
	font-size: 12px;
}
.quote {
	border: 1px solid #ccc;
	width: 450px;
	padding: 10px;
	font-style: italic;
	font-weight: bold;
	
}
#foot {
	position: relative;
	left: 7px;
	top: 7px;
	font-size: 11px;
	font-weight: bold;
	text-align: right;
	width: 963px;
	border: #F00 1px solid;
	height: 18px;
	background: url(../img/bg_silver.gif) repeat-x;
	padding: 7px 15px 2px 0px;
	white-space: nowrap;
	margin-bottom: 30px;
}
#foot a {
	text-decoration: none;
	color: #000;
	
}
#info {
	visibility: hidden;
	position: absolute;
	top: 520px;
	border: 1px solid #F00;
	padding: 15px;
	width: 400px;
	background: #FFF;
	font-size: 14px;
}

Auch hab ich Probleme im IE6 mit den Abständen/Ränder der Kästen.. ich habe mal einen Screenshot mit angehängt.
Die unteren Ränder der Kästen werden komischerweise nochmal wiederholt und die obere rote Linie wird doppelt angezeigt...

Danke schonmal im voraus,
schutzgeist

Maik · 22. Juni 2009

Moin,

versuch es mal hiermit:

CSS:

div#center {
	margin: 0 200px;
	margin-left: 230px;
	/*width: 542px;*/ 
	background: #FFF;
	font-size: 11px;
	font-weight: bold;
	background: url(../img/box_main_bg.jpg) repeat-y;
}

Dort wo der IE6 die Hintergründe doppelt anzeigt bzw. wiederholt, gib zusätzlich overflow:hidden an, damit er das Element in der gewünschten Höhe darstellt.

mfg Maik

schutzgeist · 22. Juni 2009

Hallo,

die Box ist nun oben.. nur schneidet er jetzt danach alles ab

Maik · 22. Juni 2009

Kann man sich das irgendwo "live" anschauen?

mfg Maik

schutzgeist · 22. Juni 2009

Hallo Maik

Ja, hier.

Maik · 22. Juni 2009

Bei mir wird danach nichts abgeschnitten:

Dafür macht sich im linken Spaltenblock sein "Doubled-Float-Margin-Bug" bemerkbar.

Lösung:

Code:

div#left {
        float: left;
        width: 217px;
        background: #FFF;
        font-size: 11px;
        font-weight: bold;
        background-color: #eee;
        margin-left: 7px; /* wird vom IE6 verdoppelt */
        display: inline;
}

mfg Maik

schutzgeist · 22. Juni 2009

Da scheint mein IE6 blöd zu tun.. mal ist es da mal nicht

Hab jetzt soweit alles noch angepasst.. IE6 & 7 sieht nun aus wie es soll..

Im FF nimmt er mit aber nun den mittleren Kasten etwas auseinander..
mit margin erreich ich da leider nichts.

Maik · 22. Juni 2009

Im FF2 sieht mit der mittleren Box (noch) alles perfekt aus, im FF3 hingegen nicht mehr.

Muß mal später schauen, was dem FF3 da aufstößt

//edit: Im Opera (9.6) stellt sich die Seite übrigens so dar, wie zuvor im IE6 :suspekt:

mfg Maik

schutzgeist · 22. Juni 2009

rrr... das ist ja zum in die Tischkante beißen.. Opera hab ich jetzt gar nicht getestet, muss ich gestehen..

egal wie ich das Ding hin und und her schupps, es ändert sich im FF nichts.. oder es sieht noch scheppser aus :-(

Maik · 22. Juni 2009

Wenn du etwas Geduld hast, werd ich schauen, ob ich dir bis morgen ein neues CSS aufzusetzen, denn da scheint wohl irgendwo in dem Stylesheet etwas im Argen zu liegen.

mfg Maik

✔ Darstellung IE6

schutzgeist

Erfahrenes Mitglied

Anhänge

Maik

schutzgeist

Erfahrenes Mitglied

Maik

schutzgeist

Erfahrenes Mitglied

Maik

schutzgeist

Erfahrenes Mitglied

Maik

schutzgeist

Erfahrenes Mitglied

Maik

Neue Beiträge