Inhalt verrutscht

Stormfighter

Ich habe ein Problem mit meinem Homepage design hin und wieder rutscht de rinhalt der seite nach unten rechts ab ([Blockierte Grafik: http://klasse-nsg.de/Maxi/page.jpg])
Dieses Phänomen tritt im IE7 nicht auf soweit ich es beurteilen kann aber manchmal im FI2.0 auch nicht immer^^
ich weiß ist sehr mysteriös^^
interressant ist auch das wenn die seite verrutscht ist oder auch nicht und man sie mit seite speichern unter bei firefox in top qualität ohne irgendwelche dinge die so nicht sein sollen bekommt
testen kann man es auf http://Klasse-NSG.de
hier die css für firefox:

Code

body		{	background:#777777;	
		    }

#page		{	margin: 0 auto;
          margin-top:20px;
          width:709px; 
          background:url(img/main.jpg) repeat-y;
          display:table;
    		}
#header	{	background:url(img/head.jpg) no-repeat;
			    width:709px;
			    height:186px;

		    }
#nav_content1     { display:table-row-group;
                  }
#nav_content2     { display:compact;
                  }
#nav_oben         { background:url(img/navi.jpg) no-repeat;
			              width:709px;
		              	height:21px;
                  }
#nav_oben div     { float:left;
                    display:table-cell;
                    text-align:center;
                  }                 
#nav_oben_button1 { width:103px;
                  }
#nav_oben_button2 { width:99px;
                  }
#nav_oben_button3 { width:103px;
                  }
#nav_oben_button4 { width:92px;
                  }
#nav_oben_button5 { width:103px;
                  }
#nav_oben_button6 { width:97px;
                  }
#nav_oben_button7 { width:112px;
                  }
#nav_rechts       { width:170px;
                    text-align:center;
                    display:table-cell;
                  }
#nav_oben a       { text-decoration : none; 
                    color:#ffffff;
                    font-size:19px;
                    font-weight:normal;
                  }  
#nav_rechts_header{ width:170px;
			              height:24px;
			              background: url(img/nav21.jpg) no-repeat;
			              font-size:19px;
			              color:#ffffff;
                  }
#nav_rechts_button{ width:170px;
			              height:20px;
			              background: url(img/nav22.jpg) no-repeat;
			              text-align:center;
			              color:#ffffff;
                  }
#nav_rechts_button a{ text-decoration : none; 
                      color:#ffffff;
                      font-weight:normal;
                    } 
#nav_rechts_content { width:150px;
			                color:#ffffff;
		                  font-size:13px;
		                  text-align:center;
                      margin-left:10px;
                    }
#content{	width:539px;
			    color:#ffffff;
			    text-align:center;
			    display:table-cell;
		    }
#login  { width:322px;
			    height:58px;
			    background: url(img/log.jpg);
			    text-align:left;
        }
#box_innen  { 
            }
#box_innen_header       { width:477px;
			                    height:61px;
			                    background:url(img/tab1.jpg) no-repeat;
			                    margin-top:10px;
                        }
#box_innen_header_links { width:133px;
		    	                height:45px;
		    	                position:relative; 
                          top:15px; 
                          left:15px; 
		    	                float:left;
		    	                font-size:25px;
		    	                font-family:"comic sans ms";
                        }
#box_innen_header_rechts{ width:313px;
			                    height:45px;
		                    	position:relative; 
                          top:15px; 
                          left:67px;	
		                    	font-size:25px;
		                    	font-family:"comic sans ms";
		                    	text-align:left;
                        }
#box_innen_content      { width:477px;
			                    text-align:left;
			                    background:url(img/tab2.jpg) repeat-y;
                        }
#box_innen_content_text { padding-top:8px;
			                    padding-left:21px;
			                    padding-right:21px;
			                    text-align:center;
                        }
#box_innen_footer       { width:477px;
			                    height:25px;
			                    background:url(img/tab3.jpg) no-repeat;
                        }
#footer	{	background:url(img/foot.jpg) no-repeat;
			    width:709px;
			    height:20px;
		    }
.login_name	{	width:76px;
			        height:15px;
			        position:relative; top:14px; left:83px;
			        border:0px;
			        background: url(img/bg.gif);
			        color:#4c4c4c;
			        font-size:9px;
		        }
.login_pass	{	width:76px;
			        height:15px;
			        position:relative; top:14px; left:117px;
			        border:0px;
			        background: url(img/bg.gif);
			        color:#4c4c4c;
			        font-size:9px;
		        }
.login_in	{	position:relative; top:17px; left:107px;
			      width:35px;
			      height:15px;
		      }
.login_out	{	position:relative; top:16px; left:130px;
			        width:39px;
			        height:14px;
		        }


#content a         { text-decoration : none; 
                  color:#ff6600;
                }
img     { border : 0px;
          margin:0px; 
 		      padding:0px;
 		}
#bold		{ font-weight:bold;
		}
#ueberschrift	{ font-weight:bold;
		  font-family:Verdana;
		  font-size:20px;
		  color:#ff6600;
		}
.underlined	{ text-decoration:underline;
		  color:#ffffff;
		  font-family:Verdana;
		  text-align:center;
		}
.boldlined	{ text-decoration:underline;
		  font-weight:bold;
		  color:#ffffff;
		  font-family:Verdana;
		  text-align:center;
		}
.kontakt	{ background-color:#4c4c4c;
		  border-width:2px;
		  border-style:solid;
		  border-color:#000000;
		  width:150px;
		  color:#ffffff;
		}
.textfeld	{ background-color:#4c4c4c;
		  border-width:0px;
		  border-style:solid;
		  width:150px;
		  height:300px;
		  color:#ffffff;
		}
.Farbe1		{ background-color:#000000;
		}
.Farbe2		{ background-color:#4c4c4c;
		}
table#sbox	{ width:100%;
		}

Alles anzeigen

Hier der für den IE

Code

#page		{ display:table-row;
    		}
#nav_rechts       { display:table-cell;
                    float:left;
                  }

und nun noch die index datei:

PHP

<!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" xml:lang="en" lang="en">
  <head>
    <title> Klasse-NSG.de
    </title>
    <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="author" content="segelmaex@sc-schwielochsee.de" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="description" content="Dies ist die offizielle Klassenhomepage der Klasse 10 des NSG Cottbus!" />
    <meta name="robots" content="index" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta name="robots" content="follow" />
    <link rel="stylesheet" type="text/css" href="css.css" />

  </head>
  <body>
    <div id="page">
      <div id="header">
      </div>
      <div id="nav_oben">
        <div id="nav_oben_button1">
          [url='?id=News']News[/url]
        </div>
        <div id="nav_oben_button2">
          [url='?id=Gaestebuch']Gästebuch[/url]
        </div>
        <div id="nav_oben_button3">
          [url='?id=Forum']Forum[/url]
        </div>
        <div id="nav_oben_button4">
          [url='?id=shoutbox']Shoutbox[/url]
        </div>
        <div id="nav_oben_button5">
          [url='?id=Kontaktformular']Kontakt[/url]
        </div>
        <div id="nav_oben_button6">
          [url='?id=Impressum']Impressum[/url]
        </div>
        <div id="nav_oben_button7">
          [url='?id=picofday']Pic of the day[/url]
        </div>
      </div>
      <div id="nav_content1">
        <div id="nav_content2">
          <div id="nav_rechts">
            <div id="nav_rechts_header"> HOME
            </div>


            <?php                 
            if(isset($_COOKIE['wbb_userid'])) {           
            if (($_COOKIE["wbb_userid"])!="0") {           
            echo'       
            <div id="nav_rechts_button">[url='?id=Fotoalben']Bilder[/url]       
            </div>       
            <div id="nav_rechts_button">[url='?id=Termine']Termine[/url]       
            </div>       
            <div id="nav_rechts_button">[url='?id=Ausfall']Ausfall[/url]       
            </div>       
            <div id="nav_rechts_button">[url='?id=Steckbriefe']Steckbriefe[/url]       
            </div>       
            <div id="nav_rechts_button">[url='?id=Ha']Hausaufgaben[/url]       
            </div>       
            <div id="nav_rechts_button">FAQ       
            </div>       
            <div id="nav_rechts_button">[url='?id=UserCP']User CP[/url]       
            </div>';         }         
            else {         
            echo'       
            <div id="nav_rechts_button">[url='?id=Forum/register2.php']Registrieren[/url]       
            </div>       
            <div id="nav_rechts_button">[url='?id=Forum/forgotpw.php']Passwort vergessen[/url]       
            </div>       <div id="nav_rechts_button">FAQ       
            </div>';         }       }       
            else {         
            echo'       
            <div id="nav_rechts_button">[url='?id=Forum/register2.php']Registrieren[/url]       
            </div>       
            <div id="nav_rechts_button">[url='?id=Forum/forgotpw.php']Passwort vergessen[/url]       
            </div>       
            <div id="nav_rechts_button">FAQ       
            </div>';       }       
            include("seiten/dbconnect.php");       
            $abfrage = "SELECT text, sonstiges FROM Optionen WHERE name = 'box1'";       
            $ergebnis = mysql_query($abfrage);       
            list($text, $sonstiges) = mysql_fetch_row($ergebnis);       
            echo"       


            <div id='nav_rechts_header'>$sonstiges       
            </div>

            <div id='nav_rechts_content'>$text</div>

            ";       
            $abfrage = "SELECT text, sonstiges FROM Optionen WHERE name = 'box2'";       
            $ergebnis = mysql_query($abfrage);       
            list($text, $sonstiges) = mysql_fetch_row($ergebnis);echo"             
            <div id='nav_rechts_header'>$sonstiges</div>

            <div id='nav_rechts_content'>$text             
            ";       
            $abfrage = "SELECT text, sonstiges FROM Optionen WHERE name = 'counter'";       
            $ergebnis = mysql_query($abfrage);       
            list($text, $sonstiges) = mysql_fetch_row($ergebnis);       
            eval ($text);       
            $abfrage = "SELECT text FROM Optionen WHERE name = 'aktualisierung'";       
            $ergebnis = mysql_query($abfrage);       
            list($text) = mysql_fetch_row($ergebnis);       
            echo"Letzte Aktualisierung: $text       
            </div>";       
            ?>
          </div>
          <div id="content">
            <div align="center">
              <div id="login">
                <form action="Forum/login2.php" method="post">
                  <input class="login_name" type="text" name="l_username" />
                  <input class="login_pass" type="password"     name="l_password" />


                  <?php              
                  $ident = 'id';              
                  if(isset($_GET[$ident]))                          
                  {                                 
                  $id=$_GET[$ident];                         
                  } else $id="News";          
                  echo"<input type='hidden'    name='id' value='$id'/>";                            
                  echo'    
                  <input class="login_in"    type="image"     src="img/inbut.jpg" name="submit" value="Anmelden"/>';             
                  echo "   
                  [url='Forum/logout2.php?id=$id']<input class='login_out' type='image' src='img/outbut.jpg'/>[/url]";         
                  ?>
                  <input type="hidden" name="send" value="send" />
                </form>
              </div>
            </div>
            <div id="box_innen" align="center">
              <div id="box_innen_header">
                <div id="box_innen_header_links">
                </div>
                <div id="box_innen_header_rechts">
                  <?php                     
                  include("seiten/dbconnect.php");           
                  $abfrage = "SELECT name, ueberschrift FROM Seiten";           
                  $ergebnis = mysql_query($abfrage);           
                  while (list($name, $ueberschrift) = mysql_fetch_row($ergebnis)){           
                  If ($id==$name) {$db="true"; echo $ueberschrift;}             
                  }            
                  If ($db != "true") {echo $id;}         
                  ?>
                </div>
              </div>
              <div id="box_innen_content">
                <div id="box_innen_content_text">
                  <?php                 
                  $ident = 'id';             
                  if(isset($_GET[$ident]))                          
                  {                           
                  $datei="seiten/$_GET[$ident].tpl";                           
                  if (file_exists($datei))               
                  {include($datei);}             
                  }             
                  else {include('seiten/News.tpl');}                   
                  ?>
                </div>
              </div>
              <div id="box_innen_footer">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="footer">
      </div>
    </div>
  </body>
</html>

Alles anzeigen

testen kann man es auf http://Klasse-NSG.de
Wäre echt cool wenn mir jemand helfen könnte!
Mfg Maxi

DeadEye

sieht auf den ersten Blick nach einen Pixel-fehler aus ... irgendwo ein Pixel zuviel, wodurch der Inhalt verrutscht ...

*Quelltext durchsuch* ...

Setz mal probehalber die Breite folgender Klassen um 1 Pixel herab:
(ehemals 170px bzw. 539px)

Code

#nav_rechts       { width:169px;
                    text-align:center;
                    display:table-cell;
                  }

Code

#content{   width:538px;
             color:#ffffff;
             text-align:center;
             display:table-cell;
          }

wenn das nicht hilft, dann ist nochmal ein scharfer Blick angesagt ...

habe das mal gemacht und habe bei
#box_innen {
}
noch
#box_innen { width:535px;
}

ich vergaß zu schreiben das dies anscheinend die lösung war

leider doch nicht habe mich geirrt

noch jemand ne idee

Tags