✔ IE6.0 3px Bug

sente · 12. November 2007

Hallo,
ich weiß - es gibt schon unzählige Threads zu dem Thema IE6.0 und divs, aber ich weiß normalerweiße wie man den bug umgeht nur bekomme ich es hier nicht hin und habe leider keine Ahnung warum.

Deswegen wende ich mich an euch.

Seite kann man unter http://cstromi.cs.ohost.de ansehen.

Ich bin leider komplett aufgeschmissen, wollte die Seite nur von Tables auf Divs umbauen und hab jetzt nur mehr Probleme. :suspekt:

Das ist eines der falsch dargestellten Div in der index.php:

HTML:

<div id="Container_Headlines" class="clearfix">
<div id="HeadlineLastProjects">
<a href="?page=references"><img src="images/HeadlineLeft.jpg" border="0" /></a>
</div>
<div id="HeadlineOffers">
<a href="?page=offers"><img src="images/HeadlineRight.jpg" border="0" /></a>
</div>
</div>

Und dazu das CSS für die 2 IDs:

Code:

div#HeadlineLastProjects{
	margin-left:0px !important; /* Für moderne Browser */
	margin-left:-3px; /* Für IE 6.0*/
	width:479px;
	height:83px;
	position:relative;
	background-image:url(./images/HeadlineLeft.jpg);
	float:left;
}
div#HeadlineOffers{
	margin-left:0px !important; /* Für moderne Browser */
	margin-left:-3px; /* Für IE 6.0*/
	width:238px;
	height:83px;
	position:relative;
	background-image:url(./images/HeadlineRight.jpg);
	float:right;
}

Und das ganze zieht sich so durch die Seite durch... u.A auch hier: (start.php - default)

HTML:

<div class="ContentBottom">
	<div class="ContentLeft">
		<h1>Firmenseiten</h1>
		<a href="?page=firmpages"s><img src="./sites/images/HeadlineFirmPages.jpg" width="120" height="150" border="0" align="left" class="offers"/></a>
		<p>Internetpräsenz für Firmen gewinnt in der heutigen Zeit immer mehr an Bedeutung. 
			Die globale Vernetzung schreitet immer mehr voran und immer mehr Unternehmen springen aus profitablen Gründen auf diesen Zug auf - 
			Sie auch? 
			<br /><a href="?page=firmpages">Weiter...</a></p>
	</div>
	<div class="ContentRight">
		<h1>Private Homepage</h1>
		<a href="?page=privatepages"><img src="./sites/images/HeadlinePrivatePages.jpg" width="120" height="150" border="0" align="left" class="offers"/></a>
		<p>Sie benötigen eine private Seite um sich im Internet vorzustellen? 
			Egal ob für berufliche Zwecke, der Vorstellung Ihrer Familie oder wenn Sie einfach nur Ihre Hobbies 
			und Ansichten mit der Internetgemeinschaft teilen wollen. Wir haben die passende Lösung. 
			<br /><a href="?page=privatepages">Weiter...</a></p>
	</div>
</div>

Und hier das gesamte CSS File, falls das jemand braucht.

HTML:

/* gfx.css */
/* Pagelayout based on div's */

/* Habe auf Browserweichen verzichtet und stattdessen lieber
das Layout so aufgebaut, dass keine Fehlinterpretation von den Browsern 
möglich ist. */

/* BODY */
body{
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	/*background-color:#cccccc;*/
	background-position:center;
	background-repeat:repeat-y;
	background-image:url(images/BG.jpg);
}

/***************/
/* TEXT STYLES */
/***************/
/* List */
li{
	list-style:none;
	list-style-image:url(./images/li.gif);
	list-style-position:inside;
}
ul{ margin-top:5px; margin-bottom:5px;}
/* Absatz */
p{margin-top:8px; margin-bottom:10px;}

/* Headlines */
h0{font-size:12px;}
h1{font-size:14px;}
h2{font-size:16px;}
h3{font-size:18px;}
h1, h2, h3{
	color:#464646;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-bottom:0px;
	margin-top:0px;
	padding-left:5px;
	border-left:solid;
	border-bottom:dotted;
	border-bottom-width:1px;
	border-left-width:3px; /* doesnt work on IE7.0 ?! */
	border-color:#3f85d3;
}

.bold{
	font-weight:bold;
}

img.offers{
	float:left; 
	margin-top:5px; 
	margin-right:5px; 
	margin-bottom:5px;
}

.copyright{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#777777;
}


/*********/
/* LINKS */
/*********/
/* MenuPoints */
.MenuPoints a:link, .MenuPoints a:active, .MenuPoints a:visited{
	color:#efefef;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	letter-spacing:0px;
	text-decoration:none;
}
.MenuPoints a:hover{
	color:#3f85d3;
}

/* Content */
.Content a:link, .Content a:active, .Content a:visited,
.ContentLeft a:link, .ContentLeft a:active, .ContentLeft a:visited,
.ContentRight a:link, .ContentRight a:active, .ContentRight a:visited{
	color:#3f85d3;
	text-decoration:none;
}
.Content a:hover, .ContentLeft a:hover, .ContentRight a:hover{
	color:#3f85d3;
	text-decoration:underline;
}
.LeftSpecialOfferContent a:link, .LeftSpecialOfferContent a:active, .LeftSpecialOfferContent a:visited{
	color:#6a6765;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:11px;
}
.LeftSpecialOfferContent a:hover{
	color:#252021;
}
.LeftSpecialsContent a:link, .LeftSpecialsContent a:active, .LeftSpecialsContent a:visited{
	color:#6a6765;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:11px;
}
.LeftSpecialsContent a:hover{
	color:#252021;
}

/* Footer */
.FooterPoints a:link, .FooterPoints a:active, .FooterPoints a:visited{
	color:#474747;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	text-decoration:none;
	cursor:help;
}
.FooterPoints a:hover{
	color:#3f85d3;
	background-color:#f8f8f8;
}

.activeCaption a:link, .activeCaption a:active, .activeCaption a:visited{
	color:#00FF00 !important;
}


/*************/
/* CONTAINER */
/*************/
div#Container_Outside{
	width:912px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	background-image:url(./images/BackGround.jpg);
	background-repeat:repeat-y;
}
div#Container_left{
	width:195px;
	margin-left:0px !important; /* Für moderne Browser */
	margin-left:-3px; /* Für IE 6.0*/
	height:auto;
	position:relative;
	float:left;
}
div#Container_right{
	width:717px;
	margin-left:0px !important; /* Für moderne Browser */
	margin-left:-3px; /* Für IE 6.0*/
	height:auto;
	position:relative;
	float:right;
}
div#Container_Headlines{
	width:717px;
	height:83px;
	position:relative;
}
div#Container_Content{
	width:717px;
	height:auto;
	position:relative;
}


/********/
/* ID's */
/********/
div#HeaderTop{
	width:717px;
	height:23px;
	position:relative;
	background-image:url(./images/HeaderTop.jpg);
}
div#Header{
	width:717px;
	height:162px;
	position:relative;
	background-image:url(./images/Header.jpg);
}
div#Menu{
	width:717px;
	height:29px;
	position:relative;
	background-image:url(./images/Menu.jpg);
}
div#HeadlineLastProjects{
	margin-left:0px !important; /* Für moderne Browser */
	margin-left:-3px; /* Für IE 6.0*/
	width:479px;
	height:83px;
	position:relative;
	background-image:url(./images/HeadlineLeft.jpg);
	float:left;
}
div#HeadlineOffers{
	margin-left:0px !important; /* Für moderne Browser */
	margin-left:-3px; /* Für IE 6.0*/
	width:238px;
	height:83px;
	position:relative;
	background-image:url(./images/HeadlineRight.jpg);
	float:right;
}
div#LeftClanpackage{
	width:170px;
	height:90px;
	margin-left:25px;
	position:relative;
	background-image:url(./images/ClanpageOffer.jpg);
}
div#LeftOffers{
	background-image:url(./images/OffersLimeSolutionIcon.jpg);
}

div#LeftSpecialOffer{
	background-image:url(./images/OffersLimeSolutionIconSpecialOffer.jpg);
}
#LeftOffers, #LeftSpecialOffer{
	width:170px;
	height:93px;
	margin-left:25px;
	position:relative;
}
div#Footer{
	width:auto;
	height:19px;
	margin-top:5px;
	margin-bottom:20px;
	position:relative;
	background-image:url(./images/Bottom.jpg);
}


/***********/
/* CLASSES */
/***********/
div.ContactPoints{
	width:auto;
	height:30px;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding-bottom:5px;
}
div.LeftHeadlines{
	width:150px;
	height:22px;
	margin-left:25px;
	margin-top:10px;
	padding-left:20px;
	padding-top:1px;
	position:relative;
	background-image:url(./images/MenuPointsLeft.jpg);
	
	color:#3f85d3;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
	line-height:22px;
}
div.MenuPoints{
	width:auto;
	height:29px;
	margin-left:5px;
	margin-right:5px;
	position:relative;
	float:left;
	line-height:29px;
}
div.Content{
	width:auto;
	height:auto;
	margin-right:5px;
}
div.ContentLeft{
	width:329px;
	height:180px;
	margin-left:0px !important; /* Für moderne Browser */
	margin-left:-3px; /* Für IE 6.0*/
	/*margin-right:3px;*/
	float:left;
}
div.ContentRight{
	width:329px;
	height:180px;
	margin-left:0px !important; /* Für moderne Browser */
	margin-left:-3px; /* Für IE 6.0*/
	margin-right:5px;
	float:right;
}
div.ContentBottom{
	width:auto;
	height:auto;
	position:relative;
}
div.Content, div.ContentLeft, div.ContentRight{
	position:relative;
	
	background-color:#f7f7f7;
	
	margin-top:5px;
	margin-left:5px;
	/*margin-bottom:2px;*/
	
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
	
	border-style:dotted;
	border-color:#2b2b2b;
	border-width:1px;
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#474747;
}
div.LeftSpecialOfferContent{
	width:150px;
	height:103px;
	background-image:url(./sites/images/LeftHeadlinesOffers.jpg);
	margin-left:25px;
	position:relative;
	
	padding-top:147px;
	padding-left:20px;
	color:#252021;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:11px;
}
div.LeftSpecialsContent{
	width:150px;
	height:103px;
	background-image:url(./sites/images/LeftHeadlinesSpecialOffer.jpg);
	margin-left:25px;
	position:relative;
	
	padding-top:147px;
	padding-left:20px;
	color:#252021;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:11px;
}
div.ContactContent{
	width:auto;
	height:auto;
	margin-right:5px;
	position:relative;
	
	background-color:#f7f7f7;
	
	margin-top:5px;
	margin-left:20px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#474747;
}
div.ContactTitle{
	width:500px;
	height:auto;
}
div.ContactForm{
	width:400px;
	height:auto;
}
div.FooterPoints{
	width:auto;
	height:19px;
	position:relative;
	float:left;
	line-height:19px;
	margin-top:2px;
	margin-left:5px;
	margin-right:5px;
	border-left:dotted #2b2b2b;
	border-right:dotted #2b2b2b;
	border-width:1px;
}

/* SPACER */
div.Spacer{
	width:5px;
	height:29px;
	position:relative;
	float:left;
}


/* CLEARFIX FOR FIREFOX "BUG" */
.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 */

Danke vielmals für eure Hilfe!
Und mal ein rießen großes Lob an das Forum! Ohne euch wäre ich schon sehr oft verzweifelt.

MfG
Chris

Maik · 13. November 2007

Hi,

setz mal dieses Stylesheet ein:

Code:

div#Container_left{
        width:195px;
        margin-right:0px !important; /* Für moderne Browser */
        margin-right:-3px; /* Für IE 6.0*/
        height:auto;
        position:relative;
        float:left;
}

div#HeadlineLastProjects{
        margin-right:0px !important; /* Für moderne Browser */
        margin-right:-3px; /* Für IE 6.0*/
        width:479px;
        height:83px;
        position:relative;
        background-image:url(./images/HeadlineLeft.jpg);
        float:left;
        overflow:hidden;
}

div.ContentLeft{
        width:329px;
        height:180px;
        margin-left:5px !important;
        margin-left:2.5px; /* "Double-Margin-Bug" im IE6 */
        float:left;
}

div.ContentRight{
        width:329px;
        height:180px;
        margin-right:5px !important;
        margin-right:2.5px; /* "Double-Margin-Bug" im IE6 */
        float:right;
}

div.Content, div.ContentLeft, div.ContentRight{
        position:relative;

        background-color:#f7f7f7;

        margin-top:5px;
        /*margin-left:5px;*/ /* auskommentiert = deaktiviert */

        padding-top:10px;
        padding-left:10px;
        padding-right:10px;
        padding-bottom:10px;

        border-style:dotted;
        border-color:#2b2b2b;
        border-width:1px;

        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:11px;
        color:#474747;
}

Grundsätzlich gilt nämlich beim Beheben des "3px-Gap-Bugs":

float:left -> margin-right:0 !important; margin-right:-3px;
float:right -> margin-left:0 !important; margin-left:-3px;

Bei den DIVs .ContentLeft und .ContentRight tritt im IE6 nicht der "3px-Gap-Bug", sondern der "Double-Margin-Bug" in Erscheinung.

sente · 13. November 2007

Danke vielmals für die Hilfe!
Hat super funktioniert und ich glaub ich habs diesmal gecheckt.

MfG

✔ IE6.0 3px Bug

sente

Erfahrenes Mitglied

Maik

sente

Erfahrenes Mitglied

Neue Beiträge