✔ IE 6 Abstand Problem

Philipp- · 19. Juni 2008

Hi Community,

http://www.bullterrier-katalog.de/index.php

Schaut euch die obengenannte Seite mal im IE 6 an, dort ist im Header ein Abstand.
An was liegt das?

Meine Normale CSS Datei:

Code:

body {
	margin:0;
	padding:0;
	background-color:#3B93DE;
	}
	
	a {
		outline:none;
		}
	
	#page {
		width:1016px;
		height:auto;
		}
		
		#header {
			width:1016px;
			height:173px;
			}
			
			#header #headerTop {
				background-image:url(./images/headerTop.png);
				background-repeat:no-repeat;
				height:97px;
				}
				
			#header #headerLeft {
				float:left;
				height:76px;
				width:42px;
				background-image:url(./images/googleAdsLeft.png);
				background-repeat:no-repeat;
				}
				
			#header #headerRight {
				float:right;
				width:974px;
				height:76px;
				}
				
				#header #headerRight #headerRightTop {
					width:94px;
					height:60px;
					}
					
					#header #headerRight #headerRightTop ul {
						padding:0;
						margin:0;
						height:60px;
						width:974px;
						}
						
						#header #headerRight #headerRightTop ul li {
							list-style:none;
							float:left;
							padding:0;
							margin:0;
							}
							
						#header #headerRight #headerRightTop ul #googleAds {
							background-image:url(./images/googleAds.png);
							width:468px;
							height:60px;
							}
							
						#header #headerRight #headerRightTop ul #googleAdsRight {
							background-image:url(./images/googleAdsRight.png);
							background-repeat:no-repeat;
							width:240px;
							height:60px;
							padding:0 0 0 266px;
							}
							
				#header #headerRight #headerRightBottom {
					width:974px;
					height:16px;
					background-image:url(./images/headerRightBottom.png);
					background-repeat:no-repeat;
					}
		#logo {
			width:1016px;
			height:297px;
			clear:both;
			}
			
			#logo #headerBottom {
				background-image:url(./images/logoBottom.png);
				background-repeat:no-repeat;
				width:1016px;
				height:53px;
				}
				
				#nav {
					width:805px;
					height:34px;
					margin:0 auto;
					}
					
				#nav ul li {
					list-style:none;
					float:left;
					margin:0;
					padding:0 8px 0 0;
					width:107px;
					height:34px;
					text-align:center;
					border:none;
					}
					
				#nav ul {
					width:805px;
					padding:0;
					margin:0 auto;
					}
					
				#nav ul li a.nav {
					width:107px;
					height:34px;
					display:block;
					line-height:34px;
					font-family:"Trebuchet MS";
					font-size:12px;
					color:#2C2C2C;
					font-weight:bold;
					text-decoration:none;
					}
					
				#nav ul li a.nav:hover {
					background-image:url(./images/navOn.png);
					background-repeat:no-repeat;
					width:107px;
					height:34px;
					display:block;
					line-height:34px;
					color:#FFFFFF;
					}
							
			#logo #slogan {
				background-image:url(./images/slogan.png);
				background-repeat:no-repeat;
				height:92px;
				width:1016px;
				}
			
			#logo #links {
				width:1016px;
				height:152px;
				}
			
				#logo #links ul {
					padding:0;
					margin:0;
					}
					
					#logo #links ul li {
						list-style:none;
						padding:0;
						margin:0;
						float:left;
						}
						
		.content {
			width:1016px;
			clear:both;
			}
									
				.content #contentTop {
					background-image:url(./images/contentTop.png);
					background-repeat:no-repeat;
					width:1016px;
					height:33px;
					}
					
				.content .contentMiddle {
					background-image:url(./images/contentMiddle.png);
					background-repeat:repeat-y;
					width:1016px;
					height:auto !important;
					}
					
				.content #contentBottom {
					background-image:url(./images/contentBottom.png);
					background-repeat:no-repeat;
					width:1016px;
					height:35px;
					}					
			
		.content a {
			font-family:"Trebuchet MS";
			font-size:12px;
			color:#202020;
			text-decoration:none;
			}
			
		.content .feed {
			margin:10px 0 0 -37px;
			}
			
			#sideBarLeft {
				float:left;
				width:641px;
				}
				
				.boxLeft {
					width:641px;
					margin:0 0 0 39px;
					}
					
					.boxLeft ul {
						margin:0;
						padding:0;
						}
						
						.boxLeft ul .boxLeftTop {
							background-image:url(./images/boxLeftTop.png);
							background-repeat:no-repeat;
							height:20px;
							width:631px;
							font-family:"Trebuchet MS";
							font-size:11px;
							font-weight:bold;
							color:#fff;
							padding:4px 0 0 10px;
							}
							
							.boxLeft ul .boxLeftTop a {
								font-family:"Trebuchet MS";
								font-size:11px;
								font-weight:bold;
								color:#fff;
								text-decoration:none;
								}
							
						.boxLeft ul .boxLeftMiddle {
							padding:10px;
							width:621px;
							background-color:#fff;
							font-family:"Trebuchet MS";
							font-size:11px;
							color:#202020;
							}
							
							.boxLeft ul .boxLeftMiddle h2 {
								color:#2079A6;
								}
							
							.boxLeft ul .boxLeftMiddle a {
								font-family:"Trebuchet MS";
								font-size:12px;
								font-weight:bold;
								color:#2079A6;
								text-decoration:none;
								}
							
						.boxLeft ul .boxLeftBottom {
							background-image:url(./images/boxLeftBottom.png);
							background-repeat:no-repeat;
							height:24px;
							width:641px;
							}
						
						.boxLeft ul li {
							padding:0;
							margin:0;
							list-style:none;
							}
				
			#sideBarRight {
				float:right;
				width:283px;
				}
				
				.boxRight {
					width:283px;
					margin:0 0 0 -34px;
					}
					
					.boxRight ul {
						margin:0;
						padding:0;
						}
						
						.boxRight ul .boxRightTop {
							background-image:url(./images/boxRightTop.png);
							background-repeat:no-repeat;
							height:20px;
							width:273px;
							font-family:"Trebuchet MS";
							font-size:11px;
							font-weight:bold;
							color:#fff;
							padding:4px 0 0 10px;
							}
							
							.boxRight ul .boxRightTop a {
								font-family:"Trebuchet MS";
								font-size:11px;
								font-weight:bold;
								color:#fff;
								text-decoration:none;
								}
								
						.boxRight ul .boxRightMiddle .amazon a {
							font-family:"Trebuchet MS";
							font-size:10px;
							}
							
						.boxRight ul .boxRightMiddle {
							padding:10px;
							width:263px;
							background-color:#fff;
							font-family:"Trebuchet MS";
							font-size:11px;
							color:#202020;
							}
							
							.boxRight ul .boxRightMiddle a {
								font-family:"Trebuchet MS";
								font-size:12px;
								font-weight:bold;
								color:#2079A6;
								text-decoration:none;
								}
							
						.boxRight ul .boxRightBottom {
							background-image:url(./images/boxRightBottom.png);
							background-repeat:no-repeat;
							height:24px;
							width:283px;
							}
						
						.boxRight ul li {
							padding:0;
							margin:0;
							list-style:none;
							}

		#footer {
			background-image:url(./images/footer.png);
			background-repeat:no-repeat;
			height:201px;
			width:1016px;
			clear:both;
			}
			
			#footerLeft {
				float:left;
				width:717px;
				height:107px;
				font-family:"Trebuchet Ms";
				font-size:11px;
				color:#222222;
				padding:43px 0 0 52px; 
				}
				
				#footerLeft p.seo {
					margin:16px 0 0 0;
					}
					
					#footerLeft p.seo a {
						color:#222222;
						text-decoration:none;
						font-weight:bold;
						}
				
				#footerLeft p.copyright a {
					font-family:"Trebuchet MS";
					font-size:11px;
					font-weight:bold;
					color:#fff;
					text-decoration:none;
					}
				
			#footerRight {
				float:right;
				width:240px;
				height:107px;
				font-family:"Trebuchet Ms";
				font-size:11px;
				color:#222222;
				}
				
				#footerRight p.backToTop {
					margin:103px 0 0 58px;
					}
									
				#footerRight a {
					font-family:"Trebuchet Ms";
					font-size:11px;
					font-weight:bold;
					color:#fff;
					text-decoration:none;
					}	
/* Clearfix */
.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 */
/* Clearfix End */

.catlist {
	margin-top:6px;
	margin-bottom:12px;
	margin-right:30px;
}
.catlist img {
	float:left;
	margin-right:10px;
}
.catlist a,
.catlist a:active,
.catlist a:visited {
	color:#006699;
}
.catlist a:hover {
	color:#000000;
}



.catlink {
	font-size:14px;	font-weight:bold;
}

Meine IE 6 FIX CSS Datei:

Code:

.boxRight {margin:0; width:317px;}
#footerLeft {padding:55px 0 0 52px}

Mein Html Code vom Header:

HTML:

<div id="page">
	<a id="top"></a>
	<div id="header">
		<div id="headerTop"></div>
		<div id="headerLeft"></div>
		<div id="headerRight">
			<div id="headerRightTop">
				<ul>
					<li id="googleAds"><script type="text/javascript"><!--
google_ad_client = "pub-1783700323180339";
/* 468x60, Erstellt 17.06.08 */
google_ad_slot = "3903092623";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></li>
					<li id="googleAdsRight"><form action="./search.php" method="post">
			<input type="text" name="search" value="Suchbegriff eintragen" onfocus="if(this.value=='Suchbegriff eintragen')value='';" onblur="if(this.value=='')value='Suchbegriff eintragen';" />
			<input type="submit" name="submit" value="Suchen" />
		</form></li>
				</ul>
			</div>
			<div id="headerRightBottom"></div>
		</div>
	</div>
	<div id="logo">
		<div id="links">
			<ul>
				<li><a href="./forum/"><img src="templates/standard/images/forum.png" alt="Bullterrier-Forum" border="0" /></a></li>
				<li><a href="./index.php"><img src="templates/standard/images/logo.png" alt="" border="0" /></a></li>
			</ul>
		</div>
		<div id="slogan"></div>
		<div id="headerBottom">
			<div id="nav">
				<ul>
					
					<li><a class="nav" href="./new_links.php">Neue Eintr&auml;ge </a></li>
					<li><a class="nav" href="./add_link.php">Eintrag anmelden</a></li>
					<li><a class="nav" href="./edit_link.php">Eintrag &auml;ndern </a></li>
					<li><a class="nav" href="./forum/index.php?page=Announce">Flohmarkt</a></li>
                                        <li><a class="nav" href="./forum/index.php?page=News">Bullterrier News</a></li>                                      
                                        <li><a class="nav" href="./search.php">Bulli Suche</a></li>
					<li><a class="nav" href="./imprint.php">Impressum</a></li>
				</ul>
			</div>
		</div>
	</div>

Ich freu mich über jeden Vorschlag.
Mit freundlichen Grüßen
Philipp Bosshart

Maik · 19. Juni 2008

Hi,

nimm mal die folgenden Regelerweiterungen im Stylesheet vor:

Code:

#logo img { display:block; }

                                #header #headerRight #headerRightBottom {
                                        width:974px;
                                        height:16px;
                                        background-image:url(./images/headerRightBottom.png);
                                        background-repeat:no-repeat;
                                        overflow:hidden;
                                        }

mfg Maik

Philipp- · 21. Juni 2008

Danke für deine Hilfe.
Hat prima funktioniert!

Mit freundlichen Grüßen
Philipp Bosshart

✔ IE 6 Abstand Problem

Philipp-

Maik

Philipp-

Neue Beiträge