Unlogischer Fehler im IE

Status
Nicht offen für weitere Antworten.

Prophet05

Erfahrenes Mitglied
Ich habe folgende Seite geschrieben:
fehler.gif


Sie hat folgenden Quelltext:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  
  <html>
  	<head>
  		<title>Jan's Website</title>
  		<link rel="stylesheet" type="text/css" href="source/style.css">
  	</head>
  	<body>
 		<img src="bilder/banner.png" alt="Jans Website - Banner" style="border-bottom:solid 2px #112244;">
 		<div style="position:absolute;top:2px;left:50%;margin-left:-383px;z-index:1;">
 			<img src="bilder/valide_html.png" alt="HTML Valide" style="margin-bottom:1px;"><br>
 			<img src="bilder/valide_css.png" alt="CSS Valide" style="margin-bottom:1px;"><br>
 			<img src="bilder/valide_firefox.png" alt="Firefox" style="margin-bottom:1px;"><br>
 			<img src="bilder/valide_mozilla.png" alt="Mozilla" style="margin-bottom:1px;"><br>
 			<img src="bilder/valide_ie.png" alt="Internet Explorer" style="margin-bottom:1px;"><br>
 			<img src="bilder/valide_opera.png" alt="Opera"><br>
  		</div>
  		<div class="navi">
  			<a href="index.php">Home</a>
  			<a href="index.php">Links</a>
  			<a href="index.php">Webdesign</a>
  			<a href="index.php">Programmieren</a>
  			<a href="index.php">Witze</a>
  			<a href="index.php">Forum</a>
  			<a href="index.php">Mitglieder</a>
  		</div>
  		<div class="content">
  			Willkommen auf meiner Website
  		</div>
  	</body>
  </html>

und folgende css spezifikationen:
Code:
*
  {
  	margin:0px;
  	padding:0px;
  	color:#224488;
  	font-size:11px;
  	font-family:verdana, sans-serif;
  	text-align:justify;
  	border:none 0px transparent;
  }
  html
  {
  	height:100%;
  }
  body
  {
  	width:770px;
  	margin-left:auto;
  	margin-right:auto;
  	border-left:solid 1px #112244;
  	border-right:solid 1px #112244;
  	height:100%;
  	background-image:url(../bilder/hintergrund.png);
  	background-position:center top;
  	background-repeat:repeat-y;
  	background-color:#7788bb;
  }
  img
  {
  }
  
  /*** NAVIGATION ***/
  
  div.navi
  {
  	height:20px;
  	padding:0px;
  	border-bottom:solid 2px #112244;
  	background-color:#8899cc;
  }
  div.navi a
  {
  	display:block;
  	float:left;
  	height:20px;
  	width:110px;
  	line-height:20px;
  	text-align:center;
  	text-decoration:none;
  	background-image:url(../bilder/button_n.png);
  	color:#ccccee;
  }
  div.navi a:hover
  {
  	background-image:url(../bilder/button_h.png);
  	color:#224488;
  }
  
  div.content
  {
  	padding:5px;
  }

warum baut der ie solchen unlogischen mist? wie kann ich es beheben?


mfg Prophet
 
Warum fragen User solch unlogischen Mist? ;-] :rolleyes: :eek:
Beheben kannst du das, indem du deine Frage genauer stellst - was soll denn bitte genau gemeint sein?
 
Hast du dir das Bild oben angesehen? Wenn ja dann hätest du es wahrscheinlich auch gesehen was ich meine.:rolleyes:

Ich spreche von dieser einige Pixel großen Spalte oberhalb der Navi und dem komischen Wortfetzten der die Navi auseinanderzieht.

mfg Prophet
 
Hi, versuche es einmal so:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  
  <html>
  	<head>
  		<title>Jan's Website</title>
  		<link rel="stylesheet" type="text/css" href="style.css">
  	</head>
  	<body>
 		<div style="position:absolute;top:2px;left:50%;margin-left:-385px;z-index:1;">
 		   <img src="bilder/banner.png" alt="Jans Website - Banner" style="border-bottom:solid 2px #112244;">
 		   <div>
			<img src="bilder/valide_html.png" alt="HTML Valide" style="margin-bottom:1px;"><br>
 			<img src="bilder/valide_css.png" alt="CSS Valide" style="margin-bottom:1px;"><br>
 			<img src="bilder/valide_firefox.png" alt="Firefox" style="margin-bottom:1px;"><br>
 			<img src="bilder/valide_mozilla.png" alt="Mozilla" style="margin-bottom:1px;"><br>
 			<img src="bilder/valide_ie.png" alt="Internet Explorer" style="margin-bottom:1px;"><br>
 			<img src="bilder/valide_opera.png" alt="Opera"><br>
		   </div>
  		   <div class="navi">
  			<a href="index.php">Home</a>
  			<a href="index.php">Links</a>
  			<a href="index.php">Webdesign</a>
  			<a href="index.php">Programmieren</a>
  			<a href="index.php">Witze</a>
  			<a href="index.php">Forum</a>
  			<a href="index.php">Mitglieder</a>
  		   </div>
  		   <div class="content">
  			Willkommen auf meiner Website
  		   </div>
	        </div>
  	</body>
  </html>

Greetz
 
ich habe es jetzt so gemacht das hatte es zwar nicht mehr den fehler mit dem Wortfetzten aber dafür war die seit komplett durcheinander ale ich es reparirt hatte war es wiedr so wie vorher.
 
Kannst du das etwas genauer beschreiben?

Aus deinem Post kann ich nicht entnehmen, ob dein Problem gelöst ist bzw. welches Problem du hast.

Greetz
 
Mein Problem ist das der IE einfach so einen Wortfetzten dahin schreibt. Ohne das ich ihm den befehl dazu gegeben habe. Das wird auch aus dem Bild oben deutlich den dort sieht man es wenn man auf die Navi-Leiste achtet. Mein problem ist das ich der IE dies völlig grundlos macht, wöhrend alle anderen Browser es richtig darstellen.Ich möchte jetzt einfach nur das dieser Wortfetzen dort verschwindet.

Zu deinem verbesserungsvorschlag dort hast du zwar das Problem gelöst aber danch war alle untereinander geklatscht und nicht mehr ordentlich Positoniert.

mfg Prophet05
 
Ach ja, der IE

sry, daran hab ich nicht gedacht

Code:
  div.navi
  {
	width:770px;
  	height:20px;
  	padding:0px;
  	border-bottom:solid 2px #112244;
  	background-color:#8899cc;
  }
  div.navi a
  {
  	float:left;
  	height:20px;
  	width:110px;
  	line-height:20px;
  	text-align:center;
  	text-decoration:none;
  	background-image:url(../bilder/button_n.png);
  	color:#ccccee;
  }

Ich habe hier display:block weggenommen und der Navi eine Breite gegeben.
Leider kann ich dir nicht sagen, warum der IE das falsch dargestellt hat.

Greetz
 
danke hat super funktioniert hast du noch eine idee wie ich den dünnen spalt oben zwischen banner und navi wegbekommen?

danke

mfg Prophet05
 
Versuche es mal überall (auch bei img) )mit

Code:
margin:0;
padding:0;


Daran liegt so etwas meistens

Greetz
 
Status
Nicht offen für weitere Antworten.
Zurück