Anzeigefehler zwischen FF und IE

lobo3000 · 24.04.2008, 21:07

Guten Abend...

Hab mir meine HP heut fertig gestellt, nur leider treten unterschiedliche Darstellungsproblebe zwischen FF und IE auf...

Öffnet mal http://philogyn.ph.funpic.de/index2.html

Vielleicht wisst ihr den Grund dafür, dass in der Navileiste im IE das Feld "Kontakt" fehlt, während es bei FF angezeigt wird; ebenso ein Darstellungsfehler mit dem Abstand unterhalb der Navileiste - in FF korrekt und im IE fehlherhaft!

Würde noch gern in Erfahrung bringen wie ich das anstellen kann, dass zb wenn ich auf Seite "Gedichte" bin, der "Button" Gedichte auch weiß "aktiviert" bleibt?!

LG
lobo3000

Anbei CSS und html Code:

CSS:

Code:

/* Global Styles */

body {
	margin:0px;
	
	}
	
td {
	font:11px Verdana, Arial, Helvetica, sans-serif;	
	}
	
a {
	color: #FF6600;
	font-weight:bold;
	}
	
a:hover {
	color: #6600FF;
	}

/* ID Styles */

.menu {
	position:absolute; 
	background-color:#E6F3FF;
	height:auto;
	text-align:center;
	width:760px;	
	}


#navigation a {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	line-height:3em;
	letter-spacing:0.1em;
	text-decoration: none;
	padding:5px 50px 5px 36px;
	border-bottom:2px solid #FFFFFF;
	border-top:2px solid #FFFFFF;
	background-color:#E6F3FF;
	background:#E6F3FF url("listpoint.gif") 14px 45% no-repeat;
	margin:2px;
	}
	
#navigation a:hover {
	background: #ffffff url("listpoint.gif") 14px 45% no-repeat;
	color:#6600ff;
	border-bottom:1px solid #6600FF;
	border-top:1px solid #6600FF;
	}
	
#navigation a:active {
	background: #ffffff url("listpoint.gif") 14px 45% no-repeat;
	color:#6600ff;
	border-bottom:1px solid #6600FF;
	border-top:1px solid #6600FF;
	}

/*#logo 	{
	font:24px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	letter-spacing:.3em;
	line-height:30px;
	background-color:#8cbdbd;
	}*/

#gedichte {
	position: absolute;
	top:146px;
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	background-color:#E6F3FF;
	border-bottom:2px solid #8cbdbd;
	border-top:2px solid #8cbdbd;
	border-left:2px solid #8cbdbd;
	border-right:2px solid #8cbdbd;
	padding:20px 20px 20px 20px;
	width:720px;
	height:auto;
	line-height:18px;
	}
	
#gedichte a:link {

	color:#003366;
	text-decoration:none;
	
	}
	
#gedichte a:hover {
	background: #FFFFFF;
	color:#003366;
	text-decoration:italic;
	border-bottom:1px solid #6600FF;
	border-top:1px solid #6600FF;
	}

#gedichte a:visited {
	background:#E6F3FF;
	color:#6600FF;
	text-decoration:none;
	}
	
#gedichtetext {
	position: auto;
	font: 15px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	background-color:#E6F3FF;
	padding:10px ;
	line-height:18px;
	width:auto;
	text-decoration:none;
	padding-left:40px;
	text-align:left;
	}
	
#text {
	position: auto;
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	background-color:#E6F3FF;
	padding:10px 20px 20px 20px;
	line-height:18px;
	width:auto;
	text-decoration:none;
	padding-left:40px;
	}

HTML:

HTML-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">
<!-- DW8 -->
<head>
<title>Eine Welt voller Gef&uuml;hle...Home</title>
<meta name="description" content="Dieser Beschreibungstext soll einem
Anwender im Suchdienst bei Auffinden dieser Datei erscheinen.">
<meta name="author" content="NK">
<meta name="keywords" content="Gedichte ">
<meta name="date" content="2001-12-15T08:49:37+02:00">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="kn2.css" type="text/css" />
</head>

<body bgcolor="#C0DFFD">

<div style="width:760px;margin:0px auto;"> <!--Zum verkleinern der Seite auf 760 Pixel und zentriert!-->

<table width=100% bgcolor="8cbdbd" cellpadding="0" cellspacing="0" cols="2" border="0">

  <tr>
  	<tr>	<td height="2" bgcolor="#ffffff" width=100% colspan="20" ></td></tr>
  	<td width="760" bgcolor="8cbdbd"> <img src="header.jpg" alt="header" /></td>
	<tr>	<td height="2" bgcolor="#ffffff" width=100% colspan="20" ></td></tr>
	<tr>	<td height="5" bgcolor="#C0DFFD" width=100% colspan="20" ></td>
		
    <!--Header mit Hilfe von Tabellenzellen
	<td width=20% bgcolor="8cbdbd"><img src="traene1.jpg" alt="traenenauge" /></td>
    <td width=60% bgcolor="8cbdbd" id="logo" height="100" align="center"><b>E</b>ine <b>W</b>elt <b>v</b>oller <b>G</b>efühle...</td>
    <td width=10% bgcolor="8cbdbd"><img src="lach2.jpg" alt="lachen" /></td>
  </tr>
	<tr bgcolor="FFFFFF">
	<td height="5" bgcolor="#ffffff" width=100% colspan="20" ></td>
  </tr>
  <tr bgcolor="8cbdbd">
	<td height="2" bgcolor="#8cbdbd" width=100% colspan="20" ></td>-->
	
  </tr>
</table>

<div id="navigation" class="menu">
	<a href="">Home</a>
	<a href="">Gedichte</a>
	<a href="">Information</a>
	<a href="">Autor</a>
	<a href="">Kontakt</a>
	
</div>

<div id="gedichte">

<h2>Werte Leser...</h2><br />

	<div id="text">
	Diese Seite ist Menschen gewidmet, die mich durch ihre Liebe zu dem geformt haben, was ich heute bin; die mich so angenommen 			
	haben, mit all meinen Ecken und Kanten, mit meinen Launen und Fehlern; Menschen, die mir gezeigt haben, was es heißt zu leben - und 		
	vor allem was es heißt zu lieben...<br><br>
	Ich danke euch daf&uuml;r, m&ouml;chte euch meine Gedichte widmen und mit ihnen zeigen was ihr mir bedeutet!!
	  <br><br>
	  
	  <p style="font-style:italic">"Nicht wo ich geboren wurde ist meine Heimat,<br> nicht wo man ein Leben für mich bestimmt hat ist mein Zuhause - <br>sondern dort 
	  wo mein Herz und meine Liebe weilt..."</p>
	  </div>
	  
	  <!--<p style="font:Verdana, Arial, Helvetica, sans-serif" style="font-style:italic" align="right">© NK 2008</p>-->

</div>


</div><!--'Zum Verkleinern der Seite auf 760 Pixel und zentriert!-->

</body>

</html>

pitbullpy · 24.04.2008, 23:49

Hallo,

also irgendwie geht da mal garnichts. Wenn Du willst kannst Du mir eine PN schicken und ich geb dir meine mailadresse. Dann kannst du mir mal den kompletten code schicken um den durchzusehen.

In deinem obigen beispiel code fehlen ja auch die links und was weis ich nicht alles. Du solltest evtl. auch mit utf8 arbeiten.

Mfg,
Michael

Adromir · 25.04.2008, 01:09

@pitbully: Wenn du dir deinen Post genau durchliest, würdest du sagen, daß es der Sinn eines Forums ist, daß sich die Leute ihre Lösungen per PM oder Email zuschicken?

pitbullpy · 25.04.2008, 01:26

@Adromir:

falls er mir den code zukommen lässt setze ich ihn natürlich in der geänderten fassung mit allen erklärungen ein.
Das man keine lösungen per PM gibt sollte klar sein,sonst hätten ja andere nichts davon.
Nur muss er ja auch nicht unbedingt den ganzen code hier einstellen. Es sind in seinem code reichlich Fehler vorhanden und die werden auch in den anderen seiten sein.

Mfg,
Michael

lobo3000 · 25.04.2008, 12:59

Hallo...

Also erstmal danke für eure Antworten...

Der Link den ich angegeben hab funktioniert, alle weiteren Links natürlich noch nicht eingefügt - was beabsichtigt ist!

Das Problem bei diesem Link ist die unterschiedliche Darstellung zwischen FF und IE!
Nochmals: in der obigen Navileiste (Home - Gedichte - usw.) wird im IE der Punkt "Kontakt" weggelassen, während er im FF angezeigt wird! Warum? (wäre meine erste Frage)

Nr.2) Wie ist es möglich, dass wenn zb die "Rubrik" (nennen wir es mal so) Home "offen" ist, dass in der Navileiste auch die "Schaltfläche" (was sie ja nicht wirklich ist) so in den Farben gehalten wird, als würde man mit der Maus darauf liegen!

Wenn nötig, stell ich die Codes am NM rein, bin dzt nicht zu Hause!

LG
lobo3000

pitbullpy · 25.04.2008, 15:35

Hallo,

ich habe gerade zeit gehabt mir die css einmal etwas anzugucken und ein bischen was geändert. Es ist noch nicht ganz fertig, aber ich denke mit dem rest kommst Du anhand der bisherigen änderungen selber zurecht.

Die geänderte version:

Code:

/* Global Styles */

body {
	margin:0px;
	
	}
	
td {
	font:11px Verdana, Arial, Helvetica, sans-serif;	
	}
	
a {
	color: #FF6600;
	font-weight:bold;
	}
	
a:visited {
	color: #FF6600;
	}
	
a:hover {
	color: #6600FF;
	}

/* ID Styles */

.menu {
	position:absolute;
	background-color:#E6F3FF;
	width: 764px;
	line-height: 200%;
	text-align:center;
	}
	
#startseite .startlink, #dedichteseite .gedichtelink, #informationseite .informationlink, #autorseite .autorlink {background:#ffffff;}
	


#navigation a {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	letter-spacing:0.1em;
	text-decoration: none;
	padding:5px 50px 5px 36px;
	background-color:#E6F3FF;
	background: url("listpoint.gif") 14px no-repeat;
	margin:2px;
	}
	
#navigation a:hover {
	background:#ffffff;
	color:#6600ff;
	line-height:3em;
	border-bottom:1px solid #6600FF;
	border-top:1px solid #6600FF;
	}
	
#navigation a:active {
	color:#003366;
	}

#navigation a:visited {
	color:#003366;
	}	

/*#logo 	{
	font:24px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	letter-spacing:.3em;
	line-height:30px;
	background-color:#8cbdbd;
	}*/

#gedichte {
	position: absolute;
	top:135px;
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	background-color:#E6F3FF;
	border-bottom:2px solid #8cbdbd;
	border-top:2px solid #8cbdbd;
	border-left:2px solid #8cbdbd;
	border-right:2px solid #8cbdbd;
	padding:20px 20px 20px 20px;
	width:720px;
	height:auto;
	line-height:18px;
	}
	
#gedichte a:link {

	color:#003366;
	text-decoration:none;
	
	}
	
#gedichte a:hover {
	background: #FFFFFF;
	color:#003366;
	text-decoration:italic;
	border-bottom:1px solid #6600FF;
	border-top:1px solid #6600FF;
	}

#gedichte a:visited {
	background:#E6F3FF;
	color:#6600FF;
	text-decoration:none;
	}
	
#gedichtetext {
	position: auto;
	font: 15px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	background-color:#E6F3FF;
	padding:10px ;
	line-height:18px;
	width:auto;
	text-decoration:none;
	padding-left:40px;
	text-align:left;
	}
	
#text {
	position: auto;
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	background-color:#E6F3FF;
	padding:10px 20px 20px 20px;
	line-height:18px;
	width:auto;
	text-decoration:none;
	padding-left:40px;
	}

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>
<title>Eine Welt voller Gefühle...Home</title>
<meta name="description" content="Dieser Beschreibungstext soll einem
Anwender im Suchdienst bei Auffinden dieser Datei erscheinen.">
<meta name="author" content="">
<meta name="keywords" content=" ">
<meta name="date" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="kn2.css" type="text/css">
</head>

<body id="startseite" bgcolor="#C0DFFD">

<div style="width:764px;margin:0px auto;"> <!--Zum verkleinern der Seite auf 764 Pixel und zentriert!-->

<table width=100% bgcolor="8cbdbd" cellpadding="0" cellspacing="0" border="0">


  	<tr>
  	<td width="765" bgcolor="8cbdbd">
    <img src="header.jpg" alt="header" align="center" width="764" height="100"></td>


  </tr>
</table>

<div id="navigation" class="menu" height="39">
	<a href="" class="startlink" onFocus="if (this.blur) this.blur()">Home</a>
	<a href="" class="gedichtelink" onFocus="if (this.blur) this.blur()">Gedichte</a>
	<a href="" class="informationlink" onFocus="if (this.blur) this.blur()">Information</a>
	<a href="" class="autorlink" onFocus="if (this.blur) this.blur()">Autor</a>
	<a href="" class="kontaktlink" onFocus="if (this.blur) this.blur()">Kontakt</a>

</div>

<div id="gedichte">

<h2>Werte Leser...</h2><br>

	<div id="text" style="width: 716; height: 266">
	<p align="left">Diese Seite ist Menschen gewidmet, die mich durch ihre Liebe zu dem geformt haben, was ich heute bin; die mich so angenommen
	haben, mit all meinen Ecken und Kanten, mit meinen Launen und Fehlern; Menschen, die mir gezeigt haben, was es heißt zu leben - und
	vor allem was es heißt zu lieben...<br><br>
	Ich danke euch dafür, möchte euch meine Gedichte widmen und mit ihnen zeigen was ihr mir bedeutet!!
	  <br><br>

	  </p>

	  <p style="font-style:italic">&quot;Nicht wo ich geboren wurde ist meine Heimat,<br> nicht wo man ein Leben für mich bestimmt hat ist mein Zuhause - <br>sondern dort
	  wo mein Herz und meine Liebe weilt...&quot;</p>
	  </div>

	  <!--<p style="font:Verdana, Arial, Helvetica, sans-serif" style="font-style:italic" align="right">&copy; NK 2008</p>-->

</div>


</div><!--'Zum Verkleinern der Seite auf 764 Pixel und zentriert!-->

</body>

</html>

Mfg,
Michael

lobo3000 · 06.05.2008, 08:26

Guten Morgen...

Warum werden eigentlich Farben in FF u IE7 eigentlich oftmals total unterschiedlich dargestellt? Farben sind ja im Hexadezimalsystem angegeben, müssten ja dann von beiden Browsern gleich interpretiert werden und doch ist es anders...

Nur warum?

LG
lobo3000

Rinaldo · 06.05.2008, 19:20

Wie meinst Du das? Kannst Du mal ein Beispiel zeigen?

lobo3000 · 06.05.2008, 21:11

Guten Abend...

Klar doch...anbei der Link:

http://philogyn.ph.funpic.de/index2.html

Das mitm Header ist so ok, hab nur den farblich richtigen nicht dabei...

Im FF wird der Hintergrund richtig als Art "beige" dargestellt - in IE7 als "kotzgelb" *gg*

Nur weiß i den Grund dafür nicht

LG
lobo3000

Singal · 06.05.2008, 23:05

Schnelle Lösung: Nimm eine 1px x 1px große Grafik mit der gewünschten Hintergrundfarbe gefüllt als Hintergrund für die Site.

Gründe für die Fehldarstellungen könnte mit der teilweise falschen Darstellung von Farbwerten zu tun haben - Stichpunkt: "Websichere Farben".

lobo3000 · 06.05.2008, 23:27

Hat mit deinem Vorschlag gefunzt!!

DANKE
lobo3000

Adromir · 06.05.2008, 23:29

Ich glaube, ich weiß, woran es liegt:
Du hast die Hintergrundfarbe für den Body als "Inlinestyle" definiert. Da beherrscht der Internet Explorer die Kurzschreibweisen für Farben nicht richtig.

Im Webdeveloper Toolbar vom IE wird mir für den Body nämlich als #dea900 angezeigt, im Firebug wird mir #ded2a9 angezeigt. Löse es sauber über CSS und das Problem sollte behoben sein..

Adromir · 06.05.2008, 23:34

Zitat:

Zitat von Singal

Schnelle Lösung: Nimm eine 1px x 1px große Grafik mit der gewünschten Hintergrundfarbe gefüllt als Hintergrund für die Site.

Gründe für die Fehldarstellungen könnte mit der teilweise falschen Darstellung von Farbwerten zu tun haben - Stichpunkt: "Websichere Farben".

Wenn mich mein Wissen da nicht total verlässt, sollte das Problem aber nicht auf einem Rechner bei verschiedenen Programmen bestehen, da die Farbprofile sozusagen zentral über die Monitoreinstellungen definiert werden. Also nicht tricksen, sondern sauber arbeiten..

Singal · 06.05.2008, 23:40

Die Leerzeichen machen´s

...

Im Quelltext sind nach bgcolor="#DED2A9" ein paar Leerzeichen - macht man hier nur eines, erhalte ich hier im IE7 einen roten Farbton. Also diese weg und es funktioniert auch.

lobo3000 · 06.05.2008, 23:40

Wegen Websichere Farben:

Nennt mir eine die vergleichbar zu "#DED2A9" ist!

@Adromir: Magst CSS File sehen?
Vielleicht findest ja den Fehler?!

LG
lobo3000

Anzeigefehler zwischen FF und IE

Rätsel um Farbfehler