✔ Mal wieder IE6 Bug

uran · 25. Oktober 2007

Hi,
Ich kämpfe mom mit einem CSS-Bug im IE6 bzw. irgendeinem fehler den ich gemacht habe.

In allen aktuellen browsern funktioniert die Seite zu 100% (IE7, Safari 2, FF2, Opera) nur im IE6 zerfetzt die Seite. Wenn ich den Navigationsblock rausnehme geht es im IE6. Muss also irgendwas mit der Navi sein.

Hier der HTML-Code:

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 type="text/css" href="1.css" rel="stylesheet" media="screen" />
<title>Der Nostalgie Bäcker</title>
<link rel="shortcut icon" href="#" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
	<div id="banner" ><a href="index.php?a=startseite"><img src="img/kopfleiste.jpg" border="0" /></a></div>
<div id="left">
<div id="nav1"><a onfocus="this.blur();" href="index.php?a=startseite"></a></div>
        <div id="navbreaker"></div>
		<div id="nav2"><a onfocus="this.blur();" href="index.php?a=philosophie"></a></div>
        <div id="navbreaker"></div>
        <div id="nav3"><a onfocus="this.blur();" href="index.php?a=backwaren"></a></div>
        <div id="navbreaker"></div>
		<div id="nav4"><a onfocus="this.blur();" href="index.php?a=kontakt"></a></div>
        <div id="navbreaker"></div>
        <div id="nav5"><a onfocus="this.blur();" href="index.php?a=bestell"></a></div>
        <div id="navbreaker"></div>
	  	<div id="nav6"><a onfocus="this.blur();" href="index.php?a=impressum"></a></div>
        </div>
  <div id="content">
    <?
			switch($a){
				case "startseite":
					include ("startseite.php");
					break;
				case "philosophie":
					include ("phil.php");
					break;
				case "backwaren":
					include ("backw.php");
					break;
				case "bestell":
					include ("bestellung.php");
					break;
				case "kontakt":
					include ("kontakt.php");
					break;
				case "impressum":
					include ("impressum.php");
					break;
				default:
					include ("startseite.php");
			}
		
		?>
  </div>
  <div class="text-copyright" id="footer">Copyright 2007 Nostalgie Bäcker | Design und Programmierung: <a href="#">Das Format Werbeagentur GbR</a></div>
</div>
</body>
</html>

CSS-Code:

Code:

body {
	background-color: #d1c5b4;
	color:#504940;
	padding:0px;
	margin:0px;
}
.text-copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	margin-top: 10px;
	margin-left: 10px;
}

a {
	color: #CD0043;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
}
a:visited {

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

/* ----------container zentriert das layout-------------- */
#container {
	width: 970px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(img/seiten_hg.gif);
}

/* ----------banner for logo-------------- */
#banner {
background-color: #e1ddd9;
text-align: right;
padding: 0px;
margin: 0px;
}

/* -----------------Inhalt--------------------- */
#content {
	padding: 0px;
	margin-left: 248px;
	margin-right: 0px;
}



/* --------------left navigavtion div------------- */
#left {
	float: left;
	width: 248px;
	margin: 0px;
	padding: 0px;
}

/* --------------navigation------------- */
#navbreaker {
	width: 189px;
	background-image: url(img/nav_trennlinie.gif);
	height: 13px;
	float: left;
	margin-left: 30px;
	}


#nav1 a {
	width: 150px;
	background-image: url(img/nav_start_aus.gif);
	height: 18px;
	float: left;
	margin-left: 30px;
	margin-top: 20px;
}
#nav1 a:hover {
	background-image: url(img/nav_start_an.gif);
}
#nav2 a {
	width: 150px;
	background-image: url(img/nav_phil_aus.gif);
	height: 18px;
	float: left;
	margin-left: 30px;
}
#nav2 a:hover {
	background-image: url(img/nav_phil_an.gif);
}
#nav3 a {
	width: 150px;
	background-image: url(img/nav_backw_aus.gif);
	height: 18px;
	float: left;
		margin-left: 30px;
}
#nav3 a:hover {
	background-image: url(img/nav_backw_an.gif);
}
#nav4 a {
	width: 150px;
	background-image: url(img/nav_kontakt_aus.gif);
	height: 18px;
	float: left;
		margin-left: 30px;
}
#nav4 a:hover {
	background-image: url(img/nav_kontakt_an.gif);
}
#nav5 a {
	width: 150px;
	background-image: url(img/nav_bestell_aus.gif);
	height: 18px;
	float: left;
		margin-left: 30px;
}
#nav5 a:hover {
	background-image: url(img/nav_bestell_an.gif);
}
#nav6 a {
	width: 150px;
	background-image: url(img/nav_impress_aus.gif);
	height: 18px;
	float: left;
	margin-left: 30px;
}
#nav6 a:hover {
	background-image: url(img/nav_impress_an.gif);
}

/* -----------footer--------------------------- */
#footer {
	clear: both;
	margin: 0px;
	text-align: left;
	background-image: url(img/fuss_hg.gif);
	height: 40px;
	padding-left: 30px;
	padding-top: 55px;
}
.text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	margin-top: 10px;
	margin-left: 10px;
}
.text-gross-weiss {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	margin-top: 10px;
	margin-left: 10px;
}
.contentrahmen {
	padding-top: 0px;
	padding-right: 40px;
	padding-bottom: 0px;
	padding-left: 30px;
	width: 651px;
}
.text-hl {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #453929;
}
.text-content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #453929;
	line-height: 20px;
}

Code ist noch nicht aufgeräumt, also nicht rummeckern

Wäre für eine schnelle Hilfe dankbar.

Grüsse
Holger

Maik · 25. Oktober 2007

Hi,

kannst du bitte auch kurz erläutern, wie sich bei dir der Bug im IE6 bemerkbar macht, denn ich kann da keinen Unterschied zu den anderen Browsern erkennen.

uran · 25. Oktober 2007

Hier kannste mal schauen:
XXX

Im IE6 werden die Trennlinien in der Navi grösser und der gesamte Content rutscht ca. 300 pxl nach unten.

Maik · 25. Oktober 2007

Bitte schön

Code:

#navbreaker {
        width: 189px;
        background-image: url(img/nav_trennlinie.gif);
        height: 13px;
        float: left;
        margin-left: 30px !important;
        margin-left:15px;
        overflow:hidden;
        }

Maik · 25. Oktober 2007

Sorry, hab doch glatt das Problem mit dem Content-Bereich vergessen:

Code:

#content {
        padding: 0px;
        margin-left: 248px !important;
        margin-left: 245px;
        margin-right: 0px;
}

#left {
        float: left;
        width: 248px;
        margin: 0px !important;
        margin-right:-3px;
        padding: 0px;
}

uran · 25. Oktober 2007

Jau super die hälfte hätten wir geschaft^^ Die Navi funktioniert jetzt aber der content ist immer noch weiter unten und im IE7 werden keine trennlinien mehr gezeigt

Maik · 25. Oktober 2007

Du hast da jetzt ein Gatterzeichen zuviel im ID-Selektor #navbreaker

uran · 25. Oktober 2007

Danke für den Rest das klappt jetzt auch. Nur hab ich jetzt das Problem das im IE7 die Navigations-Trennlinien nicht angezeigt werden

uran · 25. Oktober 2007

lol nach 9 Std. Arbeit wird man blind. Grossen dank! Mal wieder was dazu gelernt

✔ Mal wieder IE6 Bug

uran

Mitglied

Maik

uran

Mitglied

Maik

Maik

uran

Mitglied

Maik

uran

Mitglied

uran

Mitglied

Neue Beiträge