Hallo Zusammen,

ich habe ein wahnsinniges Problem, was mich verrückt macht.
Ich arbeite mit einer Homepage in Dreamweaver CS5 - habe Windows 7 und es zeigt komplett alles an, wenn ich diese Seite allerdings hochlade - sehe ich die Darstellung in Mozilla aber wenn ich in den Internet Explorer gehe - dann sieht die Navi richtig komisch aus auch mit schwarzen strichen die da nicht hin sollen. Genauso der Header oben komplett verschoben das ist eigentlich anders angepasst. Ich benötige Hilfe, kann mir jemand dazu helfen? Wenn etwaige Fehler sind, entschuldige ich mich dafür, bin Anfänger..:(

Hier format.css

/* schriftstil,abstände */

body
{
margin-top: 20px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 20px;
padding:0px;
color: #39F;
background-color:#fff;
font-family: "Comic Sans MS", cursive;
font-size: 100%;
border-top-color: #FADAF2;
border-right-color: #FADAF2;
}

#name {
letter-spacing:2px;
font-size: 0;
font-size: 0px;
background-color: #FADAF2;
}

#in{
font-family: "Comic Sans MS", cursive;
color:#000;
background-color:#FFF;
font-size: 97%;
line-height: 125%;
padding-top: 50px;
padding-bottom: 70px;
padding-left: 30px;
padding-right:30px;
height:800px
}

h2{
font-family: "Comic Sans MS", cursive;
color:#999;
margin-bottom:20px;
letter-spacing:2px;
font-size: 135%;
border-bottom:solid 0px #746b64;
padding-bottom:4px;
font-style:italic;
}
/* scrolleiste internet explorer ab vers.5.5 */

body
{scrollbar-arrow-color: #ffffff; scrollbar-base-color: #DEDED8;
scrollbar-highlight-color : silver; scrollbar-shadow-color : silver;
SCROLLBAR-TRACK-COLOR: #ffffff;}




/* menue linke seite */


#menu a, #menu a:visited, #menu a:active{
display: block;
background-color:#FADAF2;
color:#1A1A1A;
font-size: 97%;
text-decoration:none;
width:210px;
border:solid 1px silver;
padding:2px;
font-family: "Comic Sans MS", cursive;
border-top-color: #FADAF2;
border-right-color: #FADAF2;
border-bottom-color: #FADAF2;
border-left-color: #FADAF2;
border-color: #FADAF2;
outline-color: #FADAF2;
}


#menu a:hover {
background-color:#fadaf2;
color: #0FC;
border:solid 1px silver;
font-family: "Comic Sans MS", cursive;
}

.pfeil{color:#800000;font-weight:bold}

/* menütitel */

.rubrik {
background-color:#ffffff;
color:#666;
text-decoration:none;
font-family: "Comic Sans MS", cursive;
font-size: 10px;
padding:0px;
background-image: url(images/Tierehell.jpg);
background-repeat: no-repeat;
background-position: center;
}

/* hauptleisten */

.leiste {
background-color:#999;
color:#999;
padding-left: 2px;
padding-bottom: 2px;
padding-top: 2px;
margin: 0px auto;
height:5px;
border:solid 1px silver;
font-family: "Comic Sans MS", cursive;
}

.fuss {
background-color:#EDD0A9;
color:#666;
padding-left: 2px;
padding-bottom: 2px;
padding-top: 2px;
margin: 0px auto;
height:50px;
border:solid 1px silver;
text-align:center;
font-size: 10pt;
}

#logo {
background-color:#9DE7E3;
text-align:center;
border:solid 1px silver;
font-size: 16px;
outline-color: #FFF;
}

.nav {
color:#666;
text-decoration:none;
font-family:"Comic Sans MS", cursive;
padding-left: 1px;
padding-bottom: 1px;
padding-top: 1px;
border:solid 1px silver;
font-size: 97%;
background-color: #FADAF2;
}

ul#Navigation
{
border: 0;
background="layout.gif";
padding: 0.2em 0.8em 0.8em;
margin: 0;
width: 12.5em;
}

ul#Navigation li
{
padding: 0;
margin: 0.2em;
list-style: none;
}

ul#Navigation li ul
{
padding: 0;
margin: 0 0 0 1em;
}

ul#Navigation li ul li
{
font-family: "Comic Sans MS", cursive;
margin: 0.1em 0;
}

ul#Navigation a, ul#Navigation span, ul#Navigation h2
{
font-size: 10pt;
padding: 0.3em;
border-left-color: black;
border-top-color: black;
color: #666;
text-decoration: none;
font-family: "Comic Sans MS", cursive;
background-color: #fadaf2;
display: table-footer-group;
}

ul#Navigation a:hover, ul#Navigation span
{
border-color: black;
border-left-color: black;
border-top-color: black;
color: #C3F;
background-image: url('')
}

ul#Navigation h2
{
font-size: 1em;
margin: 1.1em 0 0;
border-color: black;
color: black;
background-image: url('')
}

ul#Navigation li ul
{
display: none;
}

ul#Navigation li:hover>ul
{
display: block;
}

/* allgemeine links im text */

a:link{
text-decoration:underline;
font-family: "Comic Sans MS", cursive;
color:#999;
background-color:#999;
font-size: 10pt;
line-height: 125%;
padding-left: 0px;
padding-right: 0px;
}

a:visited{
text-decoration:underline;
font-family: "Comic Sans MS", cursive;
color:#CCC;
background-color:#999;
font-size: 97%;
line-height: 125%;
padding-left: 2px;
padding-right: 2px;
}

a:active{
text-decoration:underline;
font-family: "Comic Sans MS", cursive;
color:#CCC;
background-color:#FADAF2;
font-size: 97%;
line-height: 125%;
padding-left: 2px;
padding-right: 2px;
}

a:hover{
background-color:#ffffff;
text-decoration:none;
font-family: "Comic Sans MS", cursive;
line-height: 125%;
color:#999;
font-size: 97%;
padding-left: 2px;
padding-right: 2px;
}
.nav #menu tr td a {
font-family: Comic Sans MS, cursive;
color: #666;
text-decoration: none;
font-size: 13px;
}
.nav div #menu tr td {
font-family: Comic Sans MS, cursive;
}
.rubrik center h2 strong {
font-style: normal;
}
.s {
font-style: normal;
}
.rubrik p {
font-size: 15px;
}

Hier Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="">
<meta name="description"
content="" >
<title>Katrin Kunz</title>




<link rel="stylesheet" href="format.css" type="text/css">


<style type="text/css">
body,td,th {
font-family: "Comic Sans MS", cursive;
background-color: #CCC;
color: #C3F;
font-size: 90%;
}
h1,h2,h3,h4,h5,h6 {
font-family: "Comic Sans MS", cursive;
}
body {
background-color: #666;
margin-left: 40px;
margin-top: 10px;
margin-bottom: 10px;
}
a:visited {
color: #CCC;
text-decoration: underline;
}
a:hover {
color: #666;
text-decoration: underline;
}
a:active {
color: #CCC;
text-decoration: underline;
}
a:link {
text-decoration: underline;
color: #666;
}
h2 {
color: #666;
}
</style>
</head><body bgcolor="#666666">
<div align="center">
<table align="center" cellspacing="0" cellpadding="0" border="0" width="100%" >
<tr>
<td width="100%" >
<table cellspacing="2" cellpadding="0" border="0" width="100%">
<tr>
</tr>
<tr>
<!-- logo-->
<td id="logo" width="100" height="189"><img src="images/Logo heller.JPG" width="200" height="189"></td>
<td width="100" height="189" id="logo"><h1><strong>Beratung &amp; Hilfe f&uuml;r Tier und Mensch</strong></h1></td>
<td id="logo" width="100" height="189"><img src="images/Polarlicht.jpg" width="235" height="189"></td>
<!-- logo ende-->
</tr>

<!-- beginn kopf2-->



<tr>
<td valign="top" class="nav" >
<div align="left"><br>
<!--Beginn Rubrik 1 linke Seite-->
<table width="97%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FADAF2" id="menu" style="border:solid 0px silver; font-size: 14px;" >
<ul id="Navigation">
<li><a href="index.html" target="">Home</a></li>
<li><a href="index.htm" target="Über mich">Über mich</a></li>
<li><a href="index.htm" target="News">News</a></li>
<li><a href="index.htm" target="Tierkommunikation">Tierkommunikation</a>
<ul>
<li><a href="index.htm" target="Was ist Tierkommunikation">Was ist Tierkommunikation</a></li>
<li><a href="index.htm" target="Ablauf eines Beratungsgespräch">Ablauf eines Beratungsgespräch</a></li>
<li><a href="index.htm" target="Ethikcode nach Penelope Smith">Ethikcode nach Penelope Smith</a></li>
</ul>
</li>
<li><a href="index.htm" target="Reiki Energieheilung">Reiki Energieheilung</a></li>
<li><a href="index.htm" target="Schamanisches Reisen">Schamanisches Reisen</a>
<ul>
<li><a href="index.htm" target="Krafttiere">Krafttiere</a></li>
</ul>
</li>
<li><a href="index.htm" target="Hundeverhaltenstherapie">Hundeverhaltenstherapie/&nbsp;&nbsp;&nbsp;
-Psychologie/Hundetraining</a></li>
<li><a href="index.htm" target="Katzenpsychologie">Katzenpsychologie</a></li>
<li><a href="index.htm" target="Angebot & Preise">Angebot & Preise</a></li>
<li><a href="kontakt.html" target="">Kontakt</a></li>
<li><a href="index.htm" target="Bilder">Bilder</a></li>
<li><a href="index.htm" target="Gästebuch/Referenzen">Gästebuch/Referenzen</a></li>
<li><a href="index.htm" target="Impressum">Impressum</a></li>
<li><a href="index.htm" target="Flyer">Flyer</a></li>
</ul></table>

<!--Ende Rubrik 1 linke Seite-->
<br>
</div>
<!--Beginn Rubrik 2 linke Seite--><!--Ende Rubrik 3 linke Seite-->
<!--Ende Menue linke Seite-->

</td>

<td width="820" height="440" valign="top" bgcolor="#e6e6e6" style="border:solid 1px silver" ><table width="820" height="700" border="0" align="center" cellpadding="0" cellspacing="0" class="rubrik">
<tr>
<td align="left" class="rubrik">
<blockquote>
<h1><strong>Herzlich Willkommen</strong> <span class="s">auf meiner Homepage</span></h1>
<p style="text-align:justify">Ich biete verschiedene M&ouml;glichkeiten, Tieren und ihren Menschen zu helfen und unterst&uuml;tze Sie f&uuml;r ein besseres
Miteinander (auch mit anderen Tieren).</p>
<p style="text-align:justify">Sie finden hier zum einen die Bereiche klassische Tierverhaltenstherapie, Tierpsychologie und Hundetraining, ebenso wie Hilfsmöglichkeiten auf einer anderen Ebene durch Tierkommunikation und Schamanisches Reisen sowie Heilen und Unterstützen durch Reiki.</p>
<p style="text-align:justify">Ich wünsche Ihnen viel Vergnügen beim Lesen meiner Homepage - für Fragen stehe ich Ihnen gerne zur Verfügung.</p>
<p>&nbsp;</p>
<p style="text-align:justify">Viele tierliebe Grüße,</p>
<p style="text-align:justify">Ihre Katrin Kunz</p>
</blockquote>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
<tr>
</tr>
</table> <!-- beginn hauptinhaltstabelle--><!--ende hauptinhaltstabelle-->
</td>
<td width="100%" valign="top" bgcolor="#e6e6e6" class="nav" style="border:solid 1px silver" >
<center><p>&nbsp;</p>
<p>&nbsp;</p>
<p><img src="images/Glaube.gif" width="80" height="80"></p>
</center>
<center><p>Glaube an</p></center>
<center><p><img src="images/Kraft.gif" width="80" height="80"></p></center>
<center><p>die Kraft</p></center>
<center><p><img src="images/Tiere.gif" width="80" height="80"></p></center>
<center><p>der Tiere</p></center>
<center><p><img src="images/Liebe.gif" width="80" height="80"></p></center>
<center><p>und Liebe</p></center>

</td>
</tr>
<tr>
<td height="74" class="fuss" >&nbsp;</td>
<td class="fuss" >Copyright - alle Inhalte dieser Seite sind &copy; 2012 katrin-kunz.de</td>
<td class="fuss" >&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>

Hallo,

Schritt 1: HTML-Code prüfen.
z.B. hier
Schritt 2: CSS prüfen.
Schritt 3: Prüfen, welcher IE die Probleme macht und dann prüfen, ob diese Version vielleicht nicht W3C-konform ist. Wenn das so ist, workaround bauen oder diese IE-Version (z.B. 5.5) einfach ignorieren.

Hallo Browwney,

im IE 8 sieht alles normal aus, ohne schwarze Striche und nichts verschoben. Mit welchem IE hast du geguckt?

Jeder hat mal klein angefangen, da muss man durch.
Und jetzt musst du ganz stark sein ... :-)


Dein Quellcode ist wirklich sehr chaotisch und noch chaotischer sind die styles.
Du müsstest, bevor du weiter machst, erstmal gründlich aufräumen.
Hier ein paar Beispiele:

a) Styles:
Bei dir sind die Formatierungen auf 3 Stellen verteilt. Stylesheet format.css, style-Bereich im head-Abschnitt UND style-Angaben mitten drin im Quelltext. Teilweise widersprechen sich die Anweisungen, viele sind doppelt oder mehrfach vorhanden, manche Abschnitte in der format.css gibt es auf deiner Seite gar nicht, z.B. die #name (id="name").
Ziel = Einfachheit! Wenn du überall die Schrift Comic Sans MS haben willst, dann im Stylesheet NUR bei body notieren. Alle untergeordneten Teile der Seite erben diese Anweisung.
Die übrigen Tags wie table, td, ul, h1, h2 usw. bekommen nur das, was für sie speziell gelten soll.


b) Layout:
Hat Dreamweaver CS5 keine 3-spaltige Vorlage mit <div>-Bereichen? Tabellen-Layout ist zwar nicht verboten, aber auch nicht zeitgenmäß. Wenn du aber trotzdem dabei bleiben willst, dann vermeide es, mehrere <table> ineinander zu verschachteln. Ist ja gar nicht nötig.

c) Code:
Code und Dateinamen schreibt man in Kleinbuchstaben, das hat sich bewährt. Der Rechner deines Providers unterscheidet zwischen Groß- und Kleinschreibung. Ein Bild namens "Logo.jpg" ist ein anderes Bild als "logo.jpg". (Dem Windows zuhause ist es egal.) Vermeide Leerzeichen in Dateinamen, ebenso äöüß und Sonderzeichen. Bindestrich und Unterstrich sind ok.

d) Tags und Attribute:
Warum verwendest du in der Navigation "target"? Das kommt aus der Steinzeit und würde so, wie es bei dir eingetragen ist, gar keine Funktion haben.
Deine a href="xxxx" führen ins Leere. Da muss der Dateiname einer Seite stehen: a href="xxxx.html".
Das Tag blockquote im Inhalt gehört da nicht hin. Es kennzeichnet ein Zitat. Die Einrückung erreichst du, wenn du dem p-Absatz z.B. ein "margin-left: 20px; margin-right: 20px;" zuordnest.
Seitentitel: Nicht dein Name, sondern ein Begriff, der zum Inhalt der Seite passt. Also auf der index.html "Beratung und Hilfe ..."

e) Navigation:

Die Navi ist inhaltlich etwas wirr.
versuche mal das, was du anbietest, in passendere Kategorien zu ordnen.
Und vergiss mal den Punkt "News". Das ist für jemanden, der wirklich jede Woche eine wichtige, tolle Neuigkeit zu melden hat - bei deinem Angebot eher unwahrscheinlich.

f) Inhaltlich:
Überleg dir das mit dem Gästebuch nochmal - Zahnärzte und Heilpraktiker haben auch keins auf der Seite. Du willst geschäftlich auftreten, du beschreibst hier nicht dein Hobby! Sollen deine Kunden etwa ins Gästebuch schreiben, wie gut es dem Schnuffi oder der Minka bei dir gefallen hat oder sollen sie dir das nicht lieber selber sagen und pünktlich bezahlen?
Was du als Referenzen zu bieten hast (Zertifikate usw. ) gehören auf die Über-mich-Seite, nicht zum Gästebuch.
Du musst das Gästebuch regelmäßig kontrollieren und außerdem ist nichts doofer, als wenn der letzte Eintrag von vor 3 Jahren stammt. Ich würde es nicht einbauen.

Die Farben finde ich ehrlich gesagt für einen geschäftlichen Auftritt zu süßlich. Achte drauf, dass dein Auftritt nicht zu romantisch-verspielt wirkt, sondern seriös. Du willst ja schließlich Geld damit verdienen.

In die Fußzeile gehört deine Praxis-Anschrift und -Telefonnummer. UM HIMMELS WILLEN KEIN COPYRIGHT!!! Dein geistiges Eigentum ist durch unsere Gesetzgebung von ganz alleine geschützt. WIR LEBEN NICHT IN DEN USA!

Nix für ungut und frdl. Grüße

Ute
Anlage: Beispiel von Deiner Seite mit vereinfachtem Quellcode.
http://www.osterbrook.de/...ge/beispielseite.zip

hallo utes,

erstmal vielen dank für diese Ausführliche Beschreibung, da ich noch nicht so viel Kenntnisse habe verstehe ich bei manchen Ecken nur Bahnhof - aber ich will lernen... Ich arbeite seit ich klein bin schon mit Photshop 7 und jetzt CS5 da ich die neue Version habe war auch Dreamweaver dabei, daher habe ich das Wort "homepage" kennengelernt :-)

Deine Beispielseite finde ich richtig gut bastel gerade da ein bisschen rum. Wollte dich gerne per Privat Nachricht anschreiben allerdings geht das irgendwie nicht, bin ja neuling hier wäre schön wenn wir mal per Mail schreiben könnten. (Mail-Adresse durch den Admin entfernt - bitte keine Mail-Adressen ins Forum schreiben, sondern die PM verwenden).

Möchte mit dir textlich gerner was besprechen ;-)

PS: Warte auf deine Nachricht bis dahin

viele Grüße
browwney