[Dreamweaver] Homepage wird auf verschiedenen Browsern anders dargestellt

Status
Nicht offen für weitere Antworten.

kakapopo

Mitglied
Hallo,

ich habe mich in der letzten Zeit mal ein wenig mit HTML befasst und arbeite zu Anfang noch mit dem Dreamweaver. Ich habe jetzt mal eine Page gemacht. Die Page wird im Internet Explorer einwandfrei angezeigt, siehe hier. Ich habe es dann mal zur Sicherheit nochmal in AOL probiert und da sieht das Ganze so aus .

Da ist alles verschoben usw. und mal ganz abgesehen von Dreamweaver, da sieht es nie so aus, wie es dann im Internet zu sehen ist. Das ist ja dann kein WYSIWYG oder?

Könnt ihr mein Problem lösen?

Achja, hier noch der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Werbekampagne.net - Design Wettbewerbe fuer Firmen und Freelancer</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div id="Layer1" style="position:absolute; left:889px; top:-6px; width:29px; height:565px; z-index:1">
<div align="center"><img src="../balkenr.jpg" width="25" height="580"></div>
</div>
<div id="Layer2" style="position:absolute; left:86px; top:-6px; width:2px; height:585px; z-index:2"><img src="../balkenl.jpg" width="25" height="580"></div>
<center>
<!-- ImageReady Slices (co-casher-16arbeit.psd) -->
<TABLE WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>

<TD COLSPAN=3> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="780" height="110">
<param name="movie" value="036.swf">
<param name="quality" value="high">
<embed src="036.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="110"></embed></object></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="images/index_02.jpg" WIDTH=237 HEIGHT=439 ALT=""></TD>
<TD>
<IMG SRC="images/index_03.jpg" WIDTH=386 HEIGHT=171 ALT=""></TD>
<TD ROWSPAN=3>
<IMG SRC="images/index_04.jpg" WIDTH=157 HEIGHT=439 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/index_05.jpg" WIDTH=386 HEIGHT=24 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/index_06.jpg" WIDTH=386 HEIGHT=244 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3>
<IMG SRC="images/index_07.jpg" WIDTH=780 HEIGHT=25 ALT=""></TD>
</TR>
<TR>

<TD COLSPAN=3> <div align="center"><font color="#999999" size="1" face="tahoma">Copyright
2006 by Werbekampagne.net - Alle Rechte vorbehalten - Impressum</font></div></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</center>
</BODY>
</HTML>
 
Ich kann auf deinen Screenshot keinen Unterschied erkennen.

Abgesehen davon bezweifle ich dass AOL eine eigene Rendering Engine hat sonder vermute dass das auch nur der IE in neuem Gewand ist.

Dein geposteter Code scheint keine gröberen Fehler zu haben.

Wiso hast du die URL herausgeschnitten
 
Zuletzt bearbeitet:
kakapopo hat gesagt.:
Da ist alles verschoben usw.

Da hätt ich mir ein bisschen mehr erwartet und nicht nur 10px verschoben.

und mal ganz abgesehen von Dreamweaver, da sieht es nie so aus, wie es dann im Internet zu sehen ist. Das ist ja dann kein WYSIWYG oder?

WYSIWYG ist ein relativer Begriff, vorallem solange es den IE gibt. Wir sind hier beim Webdesign und nicht beim Grafiken erstellen, da passiert es schon mal dass ein (ganz bestimmter) Browser einen W3C konformen Code falsch darstellt.

WYSIWYG ist eher als Hilfe anzusehen um eine ungefähre Vorstellung davon zu bekommen wie es nachher ausschaut. Du kannst ja nicht erwarten dass deine Seite im Opera 9, IE 4 und Firefox 1.5 exakt gleich ausschauen nur weil sie im Dreamweaver-Vorschaufenster wie gewünscht angezeigt wird.

Und bitte keine Motzerei mehr über den Dreamweaver, das ist immerhin (meiner Meinung nach) das beste am Markt erhältliche Produkt.
 
Danke für die Antworten.

Die Url ist, denke ich, irrelevant. Wenn nicht, sagt es mir bitte.

Man sieht ja, dass oben die Leiste und die linke Seite verschoben ist. Wie behebe ich das? Ich möchte ja schließlich nicht nur IE User ansprechen.

mfg
 
franzspam hat gesagt.:
Abgesehen davon bezweifle ich dass AOL eine eigene Rendering Engine hat sonder vermute dass das auch nur der IE in neuem Gewand ist.
Da würde ich mir nicht so sicher sein.
AOL hat Netscape schon vor Jahren übernommen, daher dürfte in der AOL Software wohl eher ein (abgespeckter) Netscape sein zuhause finden. ;)

@kakapopo, der Internet Explorer und Netscape haben unterschiedliche Vorstellungen davon wo der Rand anfängt. ;)
Zumindest beim Internet Explorer sind Randabstände (z.b. bei Tabellenzellen) sogar von der Version anhängig (Stichwort: Box-Model).
Um eine möglichst gleichmässige Darstellung in den verschiedenen Browsern zu erlangen, solltest Du Dich mal mit alternativen CSS-Dateien für den Internet Explorer und CSS-Hacks befassen.

Gruss Dr Dau
 
Hallo,

ich habe genau das gleiche Problem...... Bei mir verschiebt sich die Navigationsleiste und ich finde leider keine Lösung. Hier die Ansicht im IE http://www.kisel.de/explorer.jpg und hier in Firefox http://www.kisel.de/firefox.jpg. An was kann das liegen? Ich habe das Gefühl, je mehr Text auf der Seite geschrieben wurde, desto weiter "wandert" die Navigationsleiste nach unten.

Hier der Code der Seite:

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>Chronik - KiSEL (Kinder suchtkranker Eltern)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="../assets/kiselloerrach.css" type="text/css" />
<meta name="keywords" content="kisel, suchtkrank, eltern, drogen, alkohol, hilfe, geschichte, chronik, landkreis, lörrach">
<meta name="description" content="KiSEL - Hilfen für Kinder suchtkranker Eltern im Landkreis Lörrach">
<meta name="robots" content="index,follow" />
<meta name="Language" content="DE" />
<meta name="publisher" content="MLsysteme Weil am Rhein">
<meta http-equiv="Content-Style-Type" content="text/css">
<script language="JavaScript" type="text/javascript">

var d=new Date();
monthname= new Array("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");

var TODAY = d.getDate() + ". " + monthname[d.getMonth()] + " " + d.getFullYear();

</script>
</head>
<body bgcolor="#F4FFE4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#66CCFF">
    <td width="382" colspan="3" rowspan="2">&nbsp;&nbsp;&nbsp;<img src="../assets/logok.jpg" alt="KiSEL - Kinder suchtkranker Eltern" width="84" height="100" /></td>
    <td width="378" height="50" colspan="3" id="logo" valign="bottom" align="center" nowrap="nowrap">KiSEL</td>
    <td width="100%">&nbsp;</td>
  </tr>

  <tr bgcolor="#66CCFF">
    <td height="51" colspan="3" id="tagline" valign="top" align="center">Hilfen für Kinder suchtkranker Eltern<br />im Landkreis Lörrach</td>
	<td width="100%">&nbsp;</td>
  </tr>

  <tr>
    <td colspan="7" bgcolor="#0033FF"><img src="../assets/spacer.gif" alt="" width="1" height="2" border="0" /></td>
  </tr>

  <tr>
    <td colspan="7" bgcolor="#0033FF" background="../assets/line.jpg"><img src="../assets/line.jpg" alt="" width="4" height="3" border="0" /></td>
  </tr>

  <tr bgcolor="#F4FFE4">
  	<td colspan="7" id="dateformat" height="20">&nbsp;&nbsp;<script language="JavaScript" type="text/javascript">
      document.write(TODAY);	</script>	</td>
  </tr>
  <tr>
    <td colspan="7" bgcolor="#0033FF" background="../assets/line.jpg"><img src="../assets/line.jpg" alt="" width="4" height="3" border="0" /></td>
  </tr>

  <tr>
    <td colspan="7" bgcolor="#0033FF"><img src="../assets/spacer.gif" alt="" width="1" height="2" border="0" /></td>
  </tr>

 <tr>
    <td width="165" valign="" bgcolor="#0033FF">
	<table border="0" cellspacing="0" cellpadding="0" width="165" id="navigation">
        <tr>
          <td width="165">&nbsp;<br />
		 &nbsp;<br /></td>
        </tr>
        <tr>
          <td width="165"><a href="javascript:;" class="navText">Startseite </a></td>
        </tr>
        <tr>
          <td width="165"><a href="javascript:;" class="navText">Chronik</a></td>
        </tr>
        <tr>
          <td width="165"><a href="javascript:;" class="navText">Arbeitsgruppe</a></td>
        </tr>
        <tr>
          <td width="165"><a href="javascript:;" class="navText">unser Angebot</a></td>
        </tr>
        <tr>
          <td width="165"><a href="javascript:;" class="navText">Informationen</a></td>
        </tr>
		<tr>
		  <td width="165"><a href="javascript:;" class="navText">Presse / Bilder </a></td>
		</tr>
		<tr>
		  <td width="165"><a href="javascript:;" class="navText">Sponsoren</a></td>
		</tr>
		<tr>
		  <td width="165"><a href="javascript:;" class="navText">Links</a></td>
		</tr>
		<tr>
		  <td width="165"><a href="javascript:;" class="navText">Kontakt</a></td>
		</tr>
		<tr>
		  <td width="165"><a href="javascript:;" class="navText">Impressum</a></td>
		</tr>
      </table>
 	 <br />
  	&nbsp;<br />
  	&nbsp;<br />
  	&nbsp;<br /> 	</td>
    <td width="50"><img src="../assets/spacer.gif" alt="" width="50" height="1" border="0" /></td>
    <td width="305" colspan="2" valign="top"><img src="../assets/spacer.gif" alt="" width="305" height="1" border="0" /><br />
	&nbsp;<br />
	&nbsp;<br />
	<table border="0" cellspacing="0" cellpadding="0" width="305">
        <tr>
          <td class="pageName"><div align="center">KONTAKT</div></td>
		</tr>

		<tr>
          <td class="bodyText"><p align="justify"><br />
            M&ouml;chten Sie der KiSEL-Arbeitsgruppe eine Nachricht schicken, k&ouml;nnen Sie eine E-Mail an <a href="mailto:info@kisel.de">info@kisel</a> senden oder dieses Formular verwenden. </p>
            <p align="justify"> Die vollst&auml;ndige Adresse f&uuml;r die Kontaktaufnahme per Brief, Telefon  und Fax finden Sie im Bereich <a href="Impressum.html">Impressum</a>.</p>
			<form id="form1" name="form1" method="post" action="kontakt.php">
			<table border="0">
                              <tr align="left" valign="middle"> 
                                <td width="90">Name:</td>
                                <td> <input name="name" type="text" id="name" size="35" maxlength="50">                                </td>
                              </tr>
							  <tr align="left" valign="middle"> 
                                <td>Anschrift:</td>
                                <td> <input name="anschrift" type="text" id="anschrift" size="35" maxlength="50" /></td>
                              </tr>
							  <tr align="left"> 
                                <td>PLZ / Ort:</td>
                                <td> <input name="plz" type="text" id="plz" size="5" maxlength="5">&nbsp;
                                <input name="ort" type="text" id="ort" size="25" maxlength="40" /></td>
                              </tr>
							  <tr align="left" valign="middle"> 
                                <td>E-Mail:</td>
                                <td> <input name="email" type="text" size="35" maxlength="50">                                </td>
                              </tr>
							  <tr align="left" valign="top"> 
                                <td colspan="2">Nachricht:<br />
                                <textarea name="nachricht" cols="35" rows="4" id="nachricht"></textarea>
                                <br /></td>
                </tr>
							  <tr align="left" valign="middle"> 
                                <td>&nbsp;</td>
                                <td><div align="right">
                                  <label>
                                  <input name="Submit" type="submit" class="smallText" value="Senden" />
                                  </label>
                                </div></td>
                              </tr>
              </table>
            </form>            <p align="justify">&nbsp;</p></td>
		</tr>
      </table>
	 <br />
	&nbsp;<br />	</td>
    <td width="50"><img src="../assets/spacer.gif" alt="" width="50" height="1" border="0" /></td>
        <td width="190" valign="top"><p>&nbsp;</p>
          <p>&nbsp;</p>
          <table border="0" cellspacing="0" cellpadding="0" width="190" id="leftcol">

	   <tr>
       <td><img src="../assets/spacer.gif" alt="" width="10" height="1" border="0" /></td>
		<td width="170" class="smallText"><p align="center" class="subHeader">		    <br />
		  Kontaktadressen </p>
		  <ul>
		    <li>In Deutschland haben nach Sch&auml;tzungen der Deutschen Hauptstelle f&uuml;r Suchtfragen ca. 2-3 Mio. Kinder suchtkranke Eltern.<br />
		      <br />
		    </li>
		    </ul>
		  </ul>		  <p align="right">&nbsp;          
		    </p></td>
         <td width="10">&nbsp;</td>
        </tr>
    </table>	</td>
	<td width="100%">&nbsp;</td>
  </tr>
  <tr>
    <td width="250">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="167"><div align="right" class="smallText">&copy; Copyright KiSEL</div></td>
    <td width="138">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="190"><div align="right"><img src="../assets/up.gif" width="9" height="10" /><a href="#" target="_top">top</a></div></td>
	<td width="100%">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Ich hoff ihr könnt mir weiterhelfen. Vielen Dank schonmal....
 
Nein du hast ein ganz anderes Problem du verwendest nur das gleiche Programm.

W3C hat gesagt.:
Error Line 56 column 28: syntax of attribute value does not conform to declared value.
<td width="165" valign="" bgcolor="#0033FF">
The value of an attribute contained something that is not allowed by the specified syntax for that type of attribute. For instance, the “selected” attribute must be either minimized as “selected” or spelled out in full as “selected="selected"”; the variant “selected=""” is not allowed.

Error Line 56 column 28: value of attribute "valign" cannot be ""; must be one of "top", "middle", "bottom", "baseline".
<td width="165" valign="" bgcolor="#0033FF">

An diesen fehlern könnte es liegen, validiere deinen Code aber lieber selber und märz alle Fehler aus. Ich wünsch dir viel Spaß damit. http://validator.w3.org/
 
Status
Nicht offen für weitere Antworten.
Zurück