✔ Darstellungsproblem Firefox

Beppo98 · 14. Juli 2007

Guten Abend,

habe ein kleines Problem mit der Darstellung im Firefox. Jedoch handelt es sich dabei nicht um die üblichen Probleme mit den unterschiedlichen Browser Interpretation der Befehle, sondern eher um ein seltenes Problem.

Meine Firefox-Version ist 2.0.0.4

Also meine gebastelte Seite wird im Firefox manchmal richtig dargestellt und dann wieder nicht. Das heißt, ich kann 20 mal die Seite aktualisieren ohne das irgendwelche Darstellungsfehler auftreten. Und aufeinmal kann es wieder vorkommen, dass sich die ganzen Teile vom Header plötzlich wieder verschieben. Im IE tritt das Problem nicht auf, dort wird alles perfekt angezeigt. Der Headergrafiken sind als Hintergrund von Tabellen definiert.

Die Seite wird zwar öfters richtig angezeigt als falsch, jedoch nervt mich das ziemlich. Und so könnte man später auch keine Seite online stellen. Das Problem tritt meist in den Unterseiten auf. Auf der index.php ist das Problem noch nie aufgetreten, jedoch auf den Unterseiten. Diese Unterseiten haben jedoch fast bis identischen Quellcode.

Evtl. kennt jemand das Problem und könnte mir weiterhelfen. Wenn nötig, kann ich auch noch den Quelltext der Seite posten. Schonmal Danke im Vorraus.

Maik · 14. Juli 2007

Hi,

ein Link zur Seite wäre da ganz hilfreich, um sich die Unterseiten mal genauer anschauen zu können.

Beppo98 · 14. Juli 2007

Maik hat gesagt.:
Hi,

ein Link zur Seite wäre da ganz hilfreich, um sich die Unterseiten mal genauer anschauen zu können.

Hi,

leider sind die Seiten noch nicht online. Momentan wird alles noch lokal entwickelt. Da auch php und MySQL im Spiel sind, kann ich es auch nicht so einfach auf einen freien Server hochladen. Aber evtl. hilft ja auch der Quelltext einer der Problemseiten.

PHP:

<?php

session_start();

/*Browser rausfiltern*/
if(strpos($_SERVER['HTTP_USER_AGENT'],'MSIE')) $browser='IE' ; else $browser='FF';  

?>

<html>
<head>
<title>Registrierung</title>

<style type="text/css">


body 	{    
   color: black; background-color: white;
   font-size: 100.01%;
   font-family: Comic Sans MS, Helvetica, Arial, sans-serif;
   margin: 0; padding: 0;
   text-align: center; }


div#Seite { 
   text-align: left;
   margin: 0 auto;
   width: 960px;
   height: 800px;
   border: 0px solid black;
   background-color: #66666;}


div#Header {    
   text-align: left;
   vertical-align: middle;
   align: center;
   height: 154px;    /*154*/ }


div#Navigation {  float: left;
   <?php if ($browser == 'IE') echo "position: relative; top: -30px;"; ?>
   width: 178px;
   height: 300px;
   margin: 12px 0 0 0;
   background-color: white; }


div#Main  { 
   float: right;
   <?php if ($browser == 'IE') echo "position: relative; top: -30px;"; ?>
   margin: 12px 0 12px 0;
   width: 770px;
   height: 500px;
   border: 0px dashed silver;
   background-color: white; }

/******** HEADER ********/

.Logo		{ background-image:url(../images/pic_01.gif); }
.Info            { background-image:url(../images/pic_02.gif); width:749; height:27;}
.Header		{ background-image:url(../images/pic_03.gif); width:749; height:95; }
.Trenner1        { background-image:url(../images/pic_04.gif); width:562; height:31; }
.Benutzername    { background-image:url(../images/pic_05.gif); width:89; height:31; }
.Passwort        { background-image:url(../images/pic_06.gif); width:91; height:31; }
.Trenner2        { background-image:url(../images/pic_07.gif); width:217; height:31; }


.Punkt1   	{ background-image:url(../images/Abstandhalter.gif); width:210; height:1; }
.Punkt2   	{ background-image:url(../images/Abstandhalter.gif); width:352; height:1; }
.Punkt3   	{ background-image:url(../images/Abstandhalter.gif); width:89; height:1; }
.Punkt4   	{ background-image:url(../images/Abstandhalter.gif); width:91; height:1; }
.Punkt5   	{ background-image:url(../images/Abstandhalter.gif); width:217; height:1; }


/******** NAVIGATION ********/


.Navileistel     { background-image:url(../images/pic_11.gif); width:178; height:1;   }
.Navileister     { background-image:url(../images/pic_12.gif); width:1; height:489;   }
.Navikopf        { background-image:url(../images/pic_08.gif); width:177; height:22;  }
.Navihintergrund { background-image:url(../images/pic_09.gif); width:177; height:445; }
.Navifuss        { background-image:url(../images/pic_10.gif); width:177; height:22;  }


/******** MAIN ********/


.MainKkopf        { background-image:url(../images/main/pic_01.gif); width:382; height:23; }
.MainAbstand1     { background-image:url(../images/main/pic_02.gif); width:6; height:120;  }
.MainLkopf        { background-image:url(../images/main/pic_03.gif); width:382; height:23; }
.MainBereich1     { background-image:url(../images/main/pic_04.gif); width:382; height:85; }
.MainAbstand2    { background-image:url(../images/main/pic_06.gif); width:382; height:12; }
.Mainkopf    { background-image:url(../images/main/nachrichten.gif); width:770; height:23; }
.MainBereich2   { background-image:url(../images/main/teilbereich.gif); width:770; height:348;}
.Mainfuss         { background-image:url(../images/main/teilbereichfuss.gif); width:770; height:24; }

.MainBereich3     { background-image:url(../images/main/teilbereich.gif); width:770; height:5;}


.grau1            { background-image:url(../images/main/grau_01.gif); width:755; height:8;}
.grau2            { background-image:url(../images/main/grau_02.gif); width:754; height:1;}
.grau3            { background-image:url(../images/main/grau_03.gif); width:755; height:8;}





.button	{ 
   border: 0px solid black; }


.navigation { 
   text-align: center;
   vertical-align:top;
   height: 32px; }

.Login { 
   background-color: transparent;
   font-size:9px;
   border-color: transparent;
   vertical-align: top; }


</style>

</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div id="Seite" align="center">

<div id="Header">

  <table id="Header" width="959" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; padding: 0px;">
	<tr>
             <td rowspan="2" class="Logo"></td>
             <td colspan="4" class="Info"></td>
	</tr>
	<tr>
             <td colspan="4" class="Header"></td>
	</tr>
	<tr>
              <td colspan="2" class="Trenner1"></td>

              <!-- Login Grafiken und Eingabefelder -->


             		<!-- Relative Position für IE und FF wird angepasst -->
             		<?php
                         if ( $browser == 'IE' )
                           {
                            $position = -15;       /*Benutzername*/
                            $position2= -14;       /*Passwort*/
                           }
                         else
                           {
                            $position = -17;
                            $position2= -17;
                           }
			?>


             <form method="GET" action="login.php">
             <td class='Benutzername'>

               <div style='position: relative; top: <?= $position; ?>px; left: 6px;'><input class='Login' style="background-color: transparent; border: 0px;" name='Benutzername' size='12' height='9' onfocus="this.value=''" onblur="if(this.value=='')this.value='Benutzername'"  value='Benutzername'></div>
             </td>
             <td class='Passwort'>
               <div style='position: relative; top: <?= $position2; ?>px; left: 6px;'><input class='Login' style="background-color: transparent; border: 0px;" type='password' name='Passwort' size='12' style="height:19px;" onfocus="this.value=''" onblur="if(this.value=='')this.value='********'"  value='********'></div>

             </td>

             		<?php
                         if ( $browser == 'IE' )
                         {
                         $pos1 = 4;
                         $pos2 = -17;
                         $pos3 = -38;
                         }
                         else
                         {
                         $pos1 = 4;
                         $pos2 = -17;
                         $pos3 = -38;
                         }
                         ?>

                         <!--<input style="background-image:url(images/buttons/pic_login.gif);" type="submit" name="Login" value="">-->
                  	<td class='Trenner2' >
                           <div style='position:relative; top: <?= $pos1; ?>px; left: 5px;   '><input style="border:0px solid transparent; cursor: pointer; background-image:url(../images/buttons/pic_login.gif); color: transparent; height: 21px; width: 55px;" type='submit' name='login' value=''></input></div>
                           <div style='position:relative; top: <?= $pos2; ?>px; left: 69px;  '><a href='registrierung.php' ><img class='button' src='../images/buttons/pic_register.gif'/></a></div>
                           <div style='position:relative; top: <?= $pos3; ?>px; left: 133px; '><a href='../home.php' ><img class='button' src='../images/buttons/pic_pw.gif'/></a></div>

                  	</td>
             </tr>
             </form>


	<tr>
	    <td class="Punkt1"></td>
	    <td class="Punkt2"></td>
	    <td class="Punkt3"></td>
	    <td class="Punkt4"></td>
	    <td class="Punkt5"></td>
	</tr>
    </table>

</div>

<div id="Navigation" style="">

     <table id="Navigation" width="177" border="0" cellpadding="0" cellspacing="0">
	<tr>
             <td colspan="2" class="Navileistel"></td>
	</tr>
	<tr>
             <td rowspan="3" class="Navileister"></td>
	    <td class="Navikopf"></td>
	</tr>
	<tr>
	    <td class="Navihintergrund" style="vertical-align: top;"> <!-- Navigationstabelle mit Links -->


               <table border="0" style="align: center; width:177;" >
	         <tr>
	          <td>&nbsp; </td>
	         </tr>
	         <tr>
	          <td  class="navigation"><a href="../home.php" ><img class="button" src="../images/buttons/b_startseite.gif"/></a> </td>
	         </tr>
	         <tr>
	          <td class="navigation"><a href="verein.html" ><img class="button" src="../images/buttons/b_verein.gif "/></a> </td>
	         </tr>
	         <tr>
	          <td class="navigation"><?php if ( isset($_GET['x'] )) { echo "<a href='registriert.php'>"; } else { echo "<a href='registriert.php?x=Mannschaft'>"; } ?><img class='button' src='../images/buttons/b_mannschaft.gif'/></a></td>
	         </tr>

                  <!-- Aufklappbares Menü für den Navigationspunkt "Mannschaft" -->

	         <?php if ( $_GET['x'] == 'Mannschaft' ) { ?>

	         <tr>
	          <td align='right'><a href='herren1.html' ><img class='button' src='../images/buttons/b_herren1.gif'/></td>
	         </tr>
	         <tr>
	          <td align='right'><a href='herren2.html' ><img class='button' src='../images/buttons/b_herren2.gif'/></td>
	         </tr>
	         <tr>
	          <td align='right'><a href='ajugend.html' ><img class='button' src='../images/buttons/b_ajugend.gif'/></td>
	         </tr>
	         <tr>
	          <td align='right'><a href='cjugend.html' ><img class='button' src='../images/buttons/b_cjugend.gif'/></td>
	         </tr>
	         <tr>
	          <td align='right'><a href='ejugend.html' ><img class='button' src='../images/buttons/b_ejugend.gif'/></td>
	         </tr>
	         <tr>
	          <td align='right'><a href='fjugend.html' ><img class='button' src='../images/buttons/b_fjugend.gif'/></td>
	         </tr>

	         <?php } ?>

                  <!-- Ende des Aufklappbaren Menüs für den Navigationspunkt "Mannschaft" -->

	         <tr>
	          <td class="navigation"><a href="vereinsleben.html" ><img class="button" src="../images/buttons/b_vereinsleben.gif "/></a> </td>
	         </tr>
	         <tr>
	          <td class="navigation"><a href="gaestebuch.html" ><img class="button" src="../images/buttons/b_gaestebuch.gif "/></a> </td>
	         </tr>


             </table>
             </td>
	</tr>
	<tr>
	    <td class="Navifuss"></td>
	</tr>
     </table>


</div>

<div id="Main">
    <table id="Main" width="770" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
    <tr>
    <td><img src="../images/main/registrierung.gif"></td>
    </tr>

    <td class="MainBereich2" style="vertical-align: top; height: 444px;">

      <br/ ><span style="font-size: 14px; text-aling: center; margin-left: 15px;">Sie haben einen erfolgreichen Logout durchgeführt.</span>
      <br/><br/><span style="font-size: 14px; margin-left: 15px;">Vielen Dank für Ihren Besuch.</span>

      <?php include_once("func.php"); logout();

      echo "<meta http-equiv='refresh' content='3; URL=../home.php'>";

      ?>
    </td>
    <tr>
    <td class="Mainfuss"></td>

    </tr>

     </table>
</div>


</div>
</body>
</html>

Ist meine erste Seite "mit echtem Layout" die ich entwickle. Das Layout habe ich mit Photoshop erstellt. Dann habe ich 3 Bereiche mit CSS definiert. (Header, Navigation, Main). In diese Bereich habe ich das Layout jeweils mit Tabellen realisiert. Evtl. könnt ihr mich auch noch auf Fehler hinweisen und was ich verbessern könnte

EDIT:

Das Problem tritt auf der index.php genau so auf, nur sehr sehr selten.

Habe mal zwei Beispielgrafiken mitangehangen. Eines mit der richtigen und eines mit der falschen Darstellung.

Liebe Grüsse,
Beppo

Maik · 14. Juli 2007

Mit dem Quellcode alleine kann ich jetzt nicht viel anfangen, da ohne die ganzen eingebundenen Grafiken (= Hintergrundbilder) jeglicher Anhaltspunkt / Parameter zum Vergleichen fehlt, und nach mehrmaligen Neuladen hat sich das, was von der Seite noch übrig geblieben ist und vom Browser angezeigt wird, nicht verschoben.

Meine Testumgebung: Win2k Prof. SP4, FF 2.0.0.4

Beppo98 · 15. Juli 2007

Habe jetzt mal eine der Problemseiten hochgeladen und PHP und MySQL entfernt. Die Seite kann hier besichtigt werden.

Auf dem Server wird aber die Seite einwandfrei dargestellt. Aber wenn die Seite neu geladen wird, dann ist manchmal für ein paar Millisekunden eine Verschiebung zu erkennen. Diese wird aber sofort wieder ausgeglichen und alles wird wieder einwandfrei dargestellt. Also das wäre auf keinen Fall störend.

Verstehe es irgendwie auch nicht. Evtl. liegt es auch an meiner Testumgebung, was ich langsam auch glaube.

Ist die Einteilung in 3 Divs und darin die Unterteilung in eine Tabelle mit Hintergrundbildern in Ordnung? Oder gäbe es eine bessere alternative. Oder machen das alle so?

Grüsse,
Beppo

threadi · 15. Juli 2007

Ich sehe da keine Verschiebung mit meinem Firefox. Allerdings solltest du dringends den Code valide gestalten. Z.B. fehlt auch ein Doctype, der aber unerlässlich ist wenn du Probleme im Firefox hast.

Maik · 15. Juli 2007

Neben einem validen Markup - siehe http://validator.w3.org/check?uri=http://beppo98.be.funpic.de/1/svh/unterseiten/logout.php - solltest du dir auch angewöhnen, im Stylesheet u.a. bei den Breiten- und Höhenangaben eine Einheit (z.B. px) anzugeben, denn wenn das Dokument im Standardsmode übergeben wird, fällt das Layout sprichwörtlich wie ein Kartenhaus in sich zusammen.

Beppo98 · 23. Juli 2007

Hallo,

hatte letztens nicht mehr allzuviel Zeit, aber heute kam ich Gott sei Dank wieder dazu.

Habe jetzt die Seite mit einem Doctype und den px Angaben versehen. Leider hat dies nichts an meinem Problem geändert.

Habe aber festgestellt, dass wenn ich von der ganzen Tabelle die Rahmen auf 1px stelle, dass dann die Verschiebung nicht auftritt. Jedoch kann ich die Rahmenlinien nicht transparent machen, somit hilft mir diese Erkenntnis auch nicht recht weiter.

Gibt es evtl. eine andere Möglichkeit, dass ich den Header korrekt darstellen kann und größere Browserkomplikationen umgehe?

Maik · 23. Juli 2007

Hi!

Beppo98 hat gesagt.:
Habe jetzt mal eine der Problemseiten hochgeladen und PHP und MySQL entfernt. Die Seite kann hier besichtigt werden.

Mit einem Link zu einer 404-Fehlerseite lässt sich nicht viel dazu sagen.

Beppo98 · 23. Juli 2007

Maik hat gesagt.:
Hi!

Mit einem Link zu einer 404-Fehlerseite lässt sich nicht viel dazu sagen.

Hallo Maik,

tut mir leid, hatte die Seite wieder kurzzeitig von Webspace gelöscht. Hier ist die aktuelle Seite zum angucken. Habe aber außer den Doctype und den Pixel-Angaben nichts verändert.

Aber was vielleicht auch noch wichtig sein könnte, wie sicher kann ich mir sein, dass die Seite auf einem Webserver korrekt angezeigt wird? Da ja die falsche Anzeige anscheinend nur in meiner Testumgebung und in der Testumgebung meiner Schule auftritt und nicht auf dem Webserver (wie z.B. jetzt).

✔ Darstellungsproblem Firefox

Beppo98

Mitglied

Maik

Beppo98

Mitglied

Anhänge

Maik

Beppo98

Mitglied

threadi

Erfahrenes Mitglied

Maik

Beppo98

Mitglied

Maik

Beppo98

Mitglied

Neue Beiträge