✔ komisches Problem?!

CarnivoreCI · 16. Juli 2006

Hi
erstmal sorry das ich soon bloeden titel hab, aber mir is nix anderes eingefallen.
also passst auf.

Ich hab ein Problem mit meiner seite.

guckt euch mal bitte das hier an http://www.funk-da-cb.de/test
erst mit dem IE
und dann nochmal mit FF

und hier der code dafuer:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>
          <title>funk-da-cb.de --- (C) 2006 Roman Robel</title>
          <style type="text/css">
			body    { text-align: center; background-color: #333333; color: #779BAB; margin: 0px 0px 0px 0px; }
			a       { text-decoration: none; border: 0px; color: #FFC600; font-size: 8pt; font-family: Verdana;}
			a:hover { text-decoration: underline; border: 0px; color: #FFC600; font-size: 8pt; font-family: Verdana; }
			img     { border: 0px; margin: 0px 0px 0px 0px }
			p		{ font-family: Verdana; font-size: 8pt; color: #FFC600 }
			.std    { color: #779BAB }
			.hint   { color: #333333; font-size: 7pt; font-family: Verdana }
			
			table   { margin: 0px 0px 0px 0px; height: 768px; width: 1024px }
			td		{ border: 0px }
			tr 	    { border: 0px }
			.full   { height: 100%; width: 100% }

			.b1h1   { width: 322px; height: 149px; margin: 0px 0px 0px 0px }
			.b1h2   { width: 322px; height: 79px; margin: 0px 0px 0px 0px }
			.b1h3   { width: 322px; height: 25px; background-color: #696969; margin: 0px 0px 0px 0px }
			.b1h4   { width: 322px; height: 45px; background-color: #759BA8; margin: 0px 0px 0px 0px }
			.b1h5   { width: 322px; height: 96px; background-color: #759BA8; margin: 0px 0px 0px 0px }
			.b1h6   { width: 322px; height: 24px; background-color: #696969; margin: 0px 0px 0px 0px }
			.b1h7   { width: 322px; height: 35px; margin: 0px 0px 0px 0px }
			
			.b3h1   { width: 57px; height: 149px; margin: 0px 0px 0px 0px }
			.b3h2   { width: 57px; height: 79px; margin: 0px 0px 0px 0px }
			.b3h3   { width: 57px; height: 25px; background-color: #696969; margin: 0px 0px 0px 0px }
			.b3h4   { width: 57px; height: 45px; background-color: #759BA8; margin: 0px 0px 0px 0px }
			.b3h5   { width: 57px; height: 96px; background-color: #759BA8; margin: 0px 0px 0px 0px }
			.b3h6   { width: 57px; height: 24px; background-color: #696969; margin: 0px 0px 0px 0px }
			.b3h7   { width: 57px; height: 35px; margin: 0px 0px 0px 0px }
			
			.fdiv   { height: 463px; width: 643px; }
			.bottom { height: 262px }
			.top	{ height: 41px  }
			
			div { }
			.frame { border: 1px solid #696969; height: 463px; width: 643px; background-color: #333333; margin: 0px 0px 0px 0px }
			.login { border: 0px; background-color: #759BA8; height: 50px; width: 250px; margin: 10px 10px 10px 10px; }
			
			input  { border: 0px; background-color: #333333; height: 15px; width: 75px; color: #759BA9; font-family: Verdana; font-size: 8pt; }
			.ilog  { height: 0px; width: 0px; }					

		  </style>
        </head>

        <body>
        <table border="0" class="full">
         <tr><td align="center" valign="middle">
          <table border="0"  cellspacing="0px" cellpadding="0px">
	       
           <tr><td colspan="3" class="top"></td></tr>         
           <tr><td class="b1h1"></td>
           <td rowspan="7" class="fdiv"><div class="frame">
            <?php
			 include($needpage);
			?>
          
           </div></td><td class="b3h1"></td></tr>         
           <tr><td class="b1h2" align="center" valign="bottom"><img src="_img/blatt_oben_1.jpg" alt="Blatt" /><img src="_img/blatt_oben_2.jpg" alt="Blatt" /></td><td class="b3h2"></td></tr>         
           <tr><td class="b1h3" align="center"><img src="_img/blatt_mitte.jpg" alt="Blatt" /></td><td class="b3h3"></td></tr>         
           <tr><td class="b1h4" valign="top"><img src="_img/blatt_unten_1.jpg" alt="Blatt" /><img src="_img/blatt_unten_2.jpg" alt="Blatt" />
           <img src="_img/page_stat.jpg" alt="PageStat" /></td><td class="b3h4"></td></tr>         
           <tr><td class="b1h5" align="center" valign="bottom">
           
           <div class="login">
           <form action="index.php?login" method="post">
           <p>
           <input type="text" value="Benutzer" onfocus="if(this.value == 'Benutzer') this.value='';" onblur="if(this.value == '') this.value='Benutzer';" />
           <input type="password" value="Password" onfocus="if(this.value == 'Password') this.value='';" onblur="if(this.value == '') this.value='Password';" />
           <input type="submit" name="login" class="ilog" />
           </p>
           <p class="hint">Login mit [ENTER]</p>
           </form>
           </div>
           
           </td><td class="b3h5"></td></tr>         
           <tr><td class="b1h6"><p><a href="index.php?page=home">home</a> - <a href="index.php?page=about">about</a> - <a href="index.php?page=blogs">blogs</a> - <a href="index.php?page=black">blackboard</a> - <a href="index.php?page=contact">contact</a></p></td><td class="b3h6"></td></tr>         
           <tr><td class="b1h7"></td><td class="b3h7"></td></tr>         
           <tr><td class="bottom" colspan="3" align="center" valign="bottom">
           <p class="std">
           <?php
 			generel_checkup_IP_exclusion();
 			checkIP();
 			echo "Visitor: #".showvisits();
			?> | Style &amp; Design &copy;2006 <a href="mailto:roman-robel@gmx.de">Roman Robel</a>
            | www.funk-da-cb.de Version 1.6 | best view with IE @ 1280x1024 |
            <a href="index.php?page=impressum">Impressum</a></p></td></tr>         
	       
          </table>
         </td></tr>
        </table>
        </body>
      </html>

so, warum sieht das aufm FF so zerschossen aus?
danke für die hilfe

Maik · 16. Juli 2006

Bevor ich jetzt in dem Tabellenkonstrukt Ursachenforschung betreibe, um alle Fehlerquellen zu lokalisieren, die für die diskrepante Darstellung der Seite in den beiden genannten Browsern verantwortlich sind, habe ich mal fix eine CSS-basierte Variante gestrickt, die ohne Tabellen auskommt, und das Modell in allen mir zur Verfügung stehenden Browsern erfolgreich getestet.

Testumgebung: Win2000, Firefox 1.5.0.4, IE 6.0, Mozilla 1.7.12, Netscape 7.0, Opera 8.5

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>funk-da-cb.de --- (C) 2006 Roman Robel</title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
}

body {
background: #333333;
color: #779bab;
font-size: 8pt;
font-family: verdana, sans-serif;
}

div.centerBox {
width: 1024px;
height: 300px;
position: absolute;
left: 50%;
top: 195px;
margin-left: -512px;
z-index: 1;
}

div.blatt_oben {
width: 100%;
background: #333333;
}

div.top {
background: #696969 url(_img/blatt_mitte.jpg) no-repeat 15px 0;
width: 100%;
height: 25px;
clear: left;
}

div.middle {
background: #759ba8;
height: 172px;
}

div.blatt_oben img, div.middle img {
display: block;
float: left;
}

div.login {
width: 250px;
padding: 70px 0 0 35px;
text-align: center;
}

* html div.login { /* Für IE */
padding: 0;
margin: 70px 0 0 35px;
}

form {
margin: 0;
padding: 0;
}

input {
border: 0;
background: #333333;
height: 15px;
width: 75px;
color: #759BA9;
font-family: Verdana;
font-size: 8pt;
}

.ilog  { height: 0px; width: 0px }

div.bottom {
background: #696969;
width: 100%;
height: 25px;
line-height: 25px;
}

div.bottom p  {
margin-left: 15px;
}

div.contentBox {
width: 656px;
height: 490px;
border: 1px solid #696969;
background: #333333;
position: absolute;
left: 50%;
top: 50px;
margin-left: -191px;
z-index: 2;
}

div.contentBox .home1 {
margin: 5px;
}

div.contentBox .home2 {
height: 50px;
width: 634px;
padding: 5px;
border: 1px solid #696969;
position: absolute;
top: 420px;
left: 5px;
text-align: center;
}

div.footerBox {
position: absolute;
bottom: 30px;
width: 100%;
text-align: center;
margin: 0;
}

.clear {
clear: left;
}

img.margin_img {
margin-left: 15px !important;
margin-left: 7.5px;
}

a {
text-decoration: none;
border: 0px;
color: #FFC600;
}

a:hover {
text-decoration: underline;
border: 0px;
color: #FFC600;
}

p {
margin: 0;
padding: 0;
}

.std    { color: #779BAB }
.hint   { color: #333333; font-size: 7pt; margin-top: 10px; }
.logok  { color: #333333; text-align: center }
.head   { font-size: 12pt; text-align: left; color: #FFC600 }
.cnt    { font-size: 8pt; text-align: left; color: #759BA8 }
.stat   { color: #696969; margin: 0; text-align:center; }
-->
</style>

</head>
<body>

<div class="centerBox">
     <div class="blatt_oben"><img class="margin_img" src="_img/blatt_oben_1.jpg" alt="Blatt" /><img src="_img/blatt_oben_2.jpg" alt="Blatt" /></div>
     <div class="top"></div>
     <div class="middle">
          <p><img class="margin_img" src="_img/blatt_unten_1.jpg" alt="Blatt" /><img src="_img/blatt_unten_2.jpg" alt="Blatt" /></p>
          <p class="clear"><img class="margin_img" src="_img/page_stat.jpg"></p>
          <div class="login">
               <form action="index.php?login" method="post">
                     <p><input type="text" value="Benutzer" name="benutzer" onfocus="if(this.value == 'Benutzer') this.value='';" onblur="if(this.value == '') this.value='Benutzer';" /> <input type="password" value="Password" name="passwort" onfocus="if(this.value == 'Password') this.value='';" onblur="if(this.value == '') this.value='Password';" /><input type="submit" name="login" class="ilog" /></p>
                     <p class="hint">Login mit [ENTER]</p>
              </form>
           </div>
     </div>
     <div class="bottom">
          <p><a href="index.php?page=home">home</a> - <a href="index.php?page=about">about</a> - <a href="index.php?page=blogs">blogs</a> - <a href="index.php?page=black">blackboard</a> - <a href="index.php?page=register">register</a></p>
     </div>
</div>

<div class="contentBox">
     <div class="home1">
          <p class="head">funk-da-cb home</p>
          <p class="cnt">Hi hi hi =)<br /><br />
             funk-da-cb.de erstrahlt in einem neuen Licht. Da dies eine "crash-aktion" war, (d.h. soviel wie Entwurf und Umsetzung dauerten gerademal 48Stunden) kann es gut sein, dass sich hier irgendwo noch hässliche kleine Bugs verstecken.<br /><br />
             Falls ihr welche finden solltet, könnt ihr diese entweder für euch behalten und innerlich drüber abfeiern, oder ihr meldet sie <a href="mailto:roman-robel@gmx.de">mir</a>. Für das letztere wäre ich euch natütlich sehr verbunden.<br /><br /><br />
             So jetzt wünsche ich euch erstmal viel Spass!!<br /><br />
             Roman
          </p>
     </div>
     <div class="home2">
          <p class="stat">Neustes Mitglied: asd<br />blar blar blar blar blar blar blar blar blar blar</p>
     </div>
</div>

<div class="footerBox">
     <p class="std">Visitor: #57 | Style &amp; Design &copy;2006 <a href="mailto:roman-robel@gmx.de">Roman Robel</a> | www.funk-da-cb.de Version 1.6 | best view with IE @ 1280x1024 | <a href="index.php?page=impressum">Impressum &amp; Contact</a></p>
</div>

</body>
</html>

CarnivoreCI · 16. Juli 2006

wunderbar, danke =)

Maik · 16. Juli 2006

Wenn dir mein alternativer Lösungsvorschlag weitergeholfen hat, markiere das Thema bitte auch als erledigt.

✔ komisches Problem?!

CarnivoreCI

Mitglied

Maik

CarnivoreCI

Mitglied

Maik

Neue Beiträge