✔ Anzeige Diverenzen FF vs. IE

Status
Nicht offen für weitere Antworten.
Papi62

Papi62

Mitglied
... und da bin ich schon wieder ^^.
Hat soweit mit meinem Layout geklappt (siehe Thread), jedoch nur im FF. Im IE sind die äusseren Spalten nur solange wie der jeweilige Inhalt anstatt alle gleich lang.
Im Anhang sind noch Screenshots der beiden Browser.

Ausserdem wollte ich in die rechte Spalte einen Counter einbauen aber mir wird da nur der PHP Code angezeigt. In einem Früheren Tabellen-Layout ohne CSS ging das problemlos, guckst Du HIER.

layout_sa2.css
Code: 
/*----------Allgemeine Einstellungen----------*/
html, body {height:100%; margin: 0; padding: 0;}
option {padding-left: 0.4em}
/*----------General page style----------*/
body
{
	min-height: 101%;
	font-size: 100.01%;
	position: relative;
	background-color: #660000;
	padding: 10px;
}
/*----------------------------------------------------*/
fieldset, img {border: 0;}
select, input, textarea {font-size: 99%}
a img {display:block;}
/*----------border line and background colour round the html----------*/
#outerbodyline
{
	background-color: #660000;
	border: 1px #E5DC67 solid;
	padding: 10px;
	min-width: 600px;
}
/*----------border line and background colour round the page----------*/
#bodyline
{
	background-color: #000000;
	border: 1px #E5DC67 solid;
	padding: 10px;
	min-width: 600px;
}
/*----------Header----------*/
#header
{
	height: 170px;
	width: 100%;
	background: url(images/bg_sw_50.gif);
	background-position: center;
	z-index: 3;
	margin-bottom: 30px;
	min-width: 600px;
}
/*----------Head_left----------*/
#head_left
{
	float: left;
	margin-right: 0 !important; margin-right: -3px;
	z-index: 4;
	height: 170px;
	width: 374px;
}
/*----------Head_right----------*/
#head_right
{
	float: right;
	margin-left: 0 !important; margin-left: -3px;
	z-index: 4;
	height: 170px;
	width: 164px;
}
/*----------Head_center----------*/
#head_center
{
	z-index: 4;
	height: 170px;
	margin-left: 371px;
	margin-right: 161px;
	background: url(images/bord_center.gif);
}
/*----------Column Wrapper----------*/
.col_wrap
{
	width: 100%;
	border: 1px solid black;
	margin: 0 -1px;
	min-width: 600px;
}
table#outerTable {width: 100%; height: 100%;}
table#innerTable {width: 100%; height: 100%;}
table#fixTable1 {width: 210px; height: 100%;}
table#fixTable2 {width: 200px; height: 100%;}
td {vertical-align:top;}
/*----------Column Outer----------*/
.col_outer
{
	height: 100% !important; /* moderne Browser */
	height:100%; /* IE */
         background-color: #660000;
	z-index: 10;
}
/*--------- Mozilla code ---------*/
.col_outer { border-bottom: 1px solid black;}
.col_left { margin-right: 1px; }
.col_right { margin-left: 1px; }
.col_center { margin: 0 -3px 0 -2px; }
/*----------Column left----------*/
.col_left
{
	float: left;
	position: relative;
	width: 180px;
	background-color: #660000;
	z-index: 10;
}
/*----------Column right----------*/
.col_right
{
        float: left;
        position: relative;
        width: 180px;
        background-color: #660000;
	z-index: 11;
}
/*----------Column center----------*/
.col_center
{
	float: left;
	position: relative;
	width: 100%;
	background-color: #660000;
	z-index: 12;
}
/*----------Blasc----------*/
#blasc
{
	margin-top: 30px;
	padding-left: 40px;
	padding-right: 40px;
	float: left;
	z-index: 13;
}
/*----------Freier Bund----------*/
#freierb
{
        margin-top: 20px;
        padding-left: 8px;
        padding-right: 8px;
        float: left;
        z-index: 13;
}
/*----------Seitentitel----------*/
#titel
{
        margin: 10px 0px 20px 50px;
	z-index: 13;
}
/*----------Inhalt H1----------*/
.inhalt_h1
{
	margin: 0px 0px 10px 0px;
	text-align: justify;
	color: #E5DC67;
	background: #660000;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	border-top: 5px #000000 solid;
	padding-top: 10px;
         padding-left: 10px;
         padding-right: 10px;
        z-index: 13;
}
/*----------Inhalt----------*/
.inhalt
{
	margin: 0px 0px 10px 0px;
         padding-left: 10px;
         padding-right: 10px;
	text-align: justify;
	color: #E5DC67;
	background: #660000;
	position: relative;
         font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	z-index: 13;
}
.inhalt UL {list-style-type: disc; list-style-position:inside; text-indent: 0px;}
.inhalt a {color: #E5DC67; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
.inhalt a:visited {color: #E5DC67; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
.inhalt a:hover {color: #FFA448; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
.inhalt a:active {color: #E5DC67; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
.inhalt a:focus {color: #E5DC67; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline;}
/*----------Footer----------*/
#footer
{
	height: 50px;
	width: 100%;
	background: url(images/footer_hg.gif);
	background-position: center;
	z-index: 20;
	min-width: 600px;
	margin-top: 20px;
}
/*----------Footer left----------*/
#footer_left
{
        float: left;
        margin-right: 0 !important; margin-right: -3px;
        z-index: 21;
	height: 50px;
	width: 300px;
}
/*----------Footer right----------*/
#footer_right
{
        float: right;
        margin-left: 0 !important; margin-left: -3px;
        z-index: 21;
	height: 50px;
	width: 300px;
}
/*----------Footer center----------*/
#footer_center
{
        z-index: 21;
	height: 50px;
        margin-left: 297px;
	margin-right: 297px;
	background: url(images/footer_center.gif);
}
/*----------clear----------*/
.clear {clear: both;}

SA_Test2.php
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" xml:lang="de" lang="de">
<head>
<title>Smokin´Aces - eine World of WarCraft Gilde</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="language"    CONTENT="de">
<META NAME="author"      CONTENT="René Appert">
<META NAME="publisher"   CONTENT="René Appert">
<META NAME="copyright"   CONTENT="René Appert">
<META NAME="description" CONTENT="Gilden Homepage der Smokin´Aces aus World of WarCraft">
<META NAME="keywords"    CONTENT="World of WarCraft, WoW, Smokin´ Aces, Smocking Aces, Smokin Aces, Gilde, Clan, Forum, Rexxar, Allianz">
<META NAME="page-topic"  CONTENT="Spiele,Games,Computer,MMORPG">
<META NAME="page-type"   CONTENT="Homepage,Fanpage,Gildenpage,Clanpage">
<META NAME="audience"    CONTENT="Fans,Spieler,Gamer,Alle">
<META NAME="robots"      CONTENT="index,follow">

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

</head>

<body>
<div id="bodyline">
  <!---schwarze Hintergrundbox--->
  <div id="header">
    <!---Header - Platzhalter für die nachstehenden "div"--->
    <div id="head_left"><img src="images/bord_left.gif" alt="" border="0" width="374" height="170"></div>
    <div id="head_right"><img src="images/bord_right.gif" alt="" border="0" width="164" height="170"></div>
    <div id="head_center"></div>
    <!---Bild im CSS als Hintergrung deklariert--->
  </div>
  <!---Header schliessen--->
  <div class="col_wrap"> <div class="col_outer">
    <table id="outerTable" width="100%" height="100% cellpadding="0" cellspacing="0" background-color="660000">
      <tr> <td width="210">
        <!--- Anfang Tabelle links --->
        <table id="fixTable1" width="210" height="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="10" height="10" background="images/col_ol.gif"></td>
            <td height="10" background="images/col_om.gif"></td>
            <td width="20" height="10" background="images/col_orb.gif"></td>
          </tr>
          <tr>
            <td width="10" height="100%" background="images/col_lm.gif"></td>
            <td bgcolor="660000"> <div class="col_left">
                <div class="menu">
                  <ul>
                    <li><a href="http://smokinaces.r-appert.ch/index.php">Home
                      (News)</a></li>
                    <li><a href="http://smokinaces.r-appert.ch/screens/screens.html">Screenshots</a></li>
                    <li><a href="#"> <b>»</b>unsere Gilde
                      <!--[if IE 7]>
       <!-->
                      </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
                      <ul>
                        <li><a href="http://smokinaces.r-appert.ch/aces/chars.html">Charaktere</a></li>
                        <li><a href="http://smokinaces.r-appert.ch/aces/mobs.html">Gildenfortschritt</a></li>
                        <li><a href="http://smokinaces.r-appert.ch/aces/ranks.html">Gildenränge</a></li>
                      </ul>
                      <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
                    </li>
                    <li><a href="http://smokinaces.r-appert.ch/phpBB/index.php">Forum</a></li>
                    <li><a href="http://smokinaces.r-appert.ch/g_buch/gb.php">Gästebuch</a></li>
                    <li><a href="mailto:smokinaces@r-appert.ch?subject=Feedback,_blank">Kontakt</a></li>
                    <li><a href="#"> <b>»</b>Gameinfos
                      <!--[if IE 7]>
       <!-->
                      </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
                      <ul>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Geschichte</a></li>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Charakterklassen</a></li>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Berufe</a></li>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Patch
                          Notes</a></li>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Skills</a></li>
                      </ul>
                      <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
                    </li>
                    <li><a href="#"> <b>»</b>Anleitungen
                      <!--[if IE 7]>
       <!-->
                      </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
                      <ul>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Berufs
                          Quests</a></li>
                      </ul>
                      <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
                    </li>
                    <li><a href="#"> <b>»</b>Gegenstände
                      <!--[if IE 7]>
       <!-->
                      </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
                      <ul>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Waffen</a></li>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Munition</a></li>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Rüstungen</a></li>
                      </ul>
                      <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
                    </li>
                    <li><a href="#"> <b>»</b>Downloads
                      <!--[if IE 7]>
       <!-->
                      </a>
                      <!--<![endif]-->
                      <!--[if lte IE 6]>
         <table>
           <TR>
             <td>
             <![endif]-->
                      <ul>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Karten</a></li>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Wallpapers</a></li>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Videos</a></li>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Patches
                          (Link)</a></li>
                        <li><a href="http://smokinaces.r-appert.ch/basteln.html">Tools</a></li>
                      </ul>
                      <!--[if lte IE 6]>
             </td>
           </TR>
         </table>
         </a>
       <![endif]-->
                    </li>
                  </ul>
                </div>
                <div id="blasc">
                  <link rel="stylesheet" type="text/css" href="http://www.buffed.de/snipplet-1.css">
                  <form action="http://www.buffed.de" method="post" style="margin:0;" target="_blank">
                    <table border="0" cellpadding="0" cellspacing="0" width="100" height="44" background="http://www.buffed.de/images/snipplet-small-1-background.gif">
                      <tr>
                        <td height="17" colspan="2"><a href="http://www.buffed.de" target="_blank"><img src="http://www.buffed.de/images/snipplet-small-1-blasc-logo.gif" width="100" height="17" border="0"></a></td>
                      </tr>
                      <tr>
                        <td height="27" width="68" align="center"><input type="text" name="f" value=" Suchen" class="small-snipplet1-input" onfocus="if(this.value==\' Suchen\') this.value=\'\'"></td>
                        <td height="27" width="34"><input type="image" src="http://www.buffed.de/images/snipplet-small-1-input-ok.gif"></td>
                      </tr>
                    </table>
                  </form>
                </div>
                <div id="freierb">
                  <style type="text/css">
        div.fb_mg_outer   { background-image:url(http://wow.freierbund.de/pics/mg_ext_back.jpg);
        background-repeat:no-repeat;width:165px;height:61px; }
        div.fb_mg_outer * { font-family: verdana, helvetica, sans-serif; font-size:8pt; }
        div.fb_mg_inner   { padding:7px;margin:0;white-space:nowrap;text-align:center; }
        input.fb_mg_text, input.fb_mg_button
        { border: 1px solid rgb(76, 119, 182); background-color:#FFDE94; color:#000; padding:1px; width:120px; margin:0 }
        input.fb_mg_button { width:auto; padding:0; }
        </style>
                  <div class="fb_mg_outer">
                    <form action="http://wow.freierbund.de/index.php?pID=16" method="post"><div class="fb_mg_inner">
                      <input class="fb_mg_text"
            type="text" name="s"
            onfocus="javascript:this.value = \'\';"
            value="Suchbegriff..." />
                      <input class="fb_mg_button"
            type="submit" name="search"
            value="&raquo;" />
                    </form>
                  </div>
                </div>
              </div></div> </td>
          <td width="20" height="100%" background="images/col_rmb.gif"></td>
          </tr>
          <tr>
            <td width="10" height="10" background="images/col_ul.gif"></td>
            <td height="10" background="images/col_um.gif"></td>
            <td width="20" height="10" background="images/col_urb.gif"></td>
          </tr>
        </table>
        <!--- Ende Tabelle links ---></td>
        <td width="100%">
          <!--- Anfang Tabelle mitte --->
          <table id="innerTable" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="10" height="10" background="images/col_ol.gif"></td>
              <td height="10" background="images/col_om.gif"></td>
              <td width="10" height="10" background="images/col_or.gif"></td>
            </tr>
            <tr>
              <td width="10" height="100%" background="images/col_lm.gif"></td>
              <td bgcolor="660000"> <div id="col_center">
                  <div id="titel"><img src="images/titel_news.jpg" alt="" border="0" width="143" height="80"></div>
                  <div class="inhalt_h1">Sonntag, 24.Juni 2007</div>
                  <div class="inhalt">
                    <ul>
                      <li>Einige kleine &Auml;nderungen am Layout durchgef&uuml;hrt.</li>
                      <li>Die Seite Gildenr&auml;nge eingebaut.</li>
                      <li>Bin grad dabei das Layout der Homepage vollst&auml;ndig
                        zu &uuml;berarbeiten. <a href="http://smokinaces.r-appert.ch/test/SA_Test.php" target="_blank">Testseite
                        kann man hier sehen.</a></li>
                    </ul>
                  </div>
                  <div class="inhalt_h1">Samstag, 16.Juni 2007</div>
                  <div class="inhalt">
                    <ul>
                      <li>Gästebuch ist eingebaut, nun kann sich hier jeder verewigen
                        :-).</li>
                    </ul>
                  </div>
                  <div class="inhalt_h1">Freitag, 15.Juni 2007</div>
                  <div class="inhalt">
                    <ul>
                      <li>Gilden-Mitglieder können nun Bilder hochladen. Anleitung
                        im Forum unter "Ankündigungen intern / Bilder hochladen".</li>
                      <li>Einige hundert Avatare und grosse animierte Smilies
                        hinzugefügt.</li>
                    </ul>
                  </div>
                  <div class="inhalt_h1">Donnerstag, 14.Juni 2007</div>
                  <div class="inhalt">
                    <ul>
                      <li>Das Forum ist nun konfiguriert und online, ready to
                        go.</li>
                    </ul>
                  </div>
                  <div class="inhalt_h1">Mittwoch , 13.Juni 2007</div>
                  <div class="inhalt">
                    <ul>
                      <li>Die Seiten "unsere Gilde / Charaktere" und "unsere Gilde
                        / Gildenfortschritt" sind erstellt.</li>
                      <li>Layout geringfügig geändert.</li>
                    </ul>
                  </div>
                  <div class="inhalt_h1">Dienstag, 12.Juni 2007</div>
                  <div class="inhalt">
                    <ul>
                      <li>Der erste Entwurf unserer Gilden-Page geht online. Die
                        Site wird nach und nach ausgebaut, habt also etwas Geduld.</li>
                    </ul>
                  </div>
                  <div class="inhalt_h1">Montag, 11.Juni 2007</div>
                  <div class="inhalt">
                    <ul>
                      <li>Unsere Gilde wurde gegründet, die "Smokin´Aces", fast
                        ausschliesslich bestehend aus ehemaligen Mitgliedern der
                        "Old Crusaders". Wir sind eine Allianz-Gilde auf dem Realm
                        "Rexxar".</li>
                    </ul>
                  </div>
                </div></td>
              <td width="10" height="100%" background="images/col_rm.gif"></td>
            </tr>
            <tr>
              <td width="10" height="10" background="images/col_ul.gif"></td>
              <td height="10" background="images/col_um.gif"></td>
              <td width="10" height="10" background="images/col_ur.gif"></td>
            </tr>
          </table>
          <!--- Ende Tabelle mitte --->
        </td>
        <td width="200">
          <!--- Anfang Tabelle rechts --->
          <table id="fixTable2" width="200" height="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="20" height="10" background="images/col_olb.gif"></td>
              <td height="10" background="images/col_om.gif"></td>
              <td width="10" height="10" background="images/col_or.gif"></td>
            </tr>
            <tr>
              <td width="20" height="100%" background="images/col_lmb.gif"></td>
              <td bgcolor="660000">
                col_right
              </td>
              <td width="10" height="100%" background="images/col_rm.gif"></td>
            </tr>
            <tr>
              <td width="20" height="10" background="images/col_ulb.gif"></td>
              <td height="10" background="images/col_um.gif"></td>
              <td width="10" height="10" background="images/col_ur.gif"></td>
            </tr>
          </table>
          <!--- Ende Tabelle rechts --->
        </td>
    </table>
  </div>
</div>
<div class="clear"></div>
<div id="footer">
  <div id="footer_left"><img src="images/footer_left.gif" alt="" border="0" width="300" height="50"></div>
  <div id="footer_right"><img src="images/footer_right.gif" alt="" border="0" width="300" height="50"></div>
  <div id="footer_center"></div>
  <!---Bild im CSS als Hintergrung deklariert--->
</div></div>
<!---schwarze Hintergrundbox schliessen--->
</body>
</html>

FF_Test.jpg IE_Test.jpg
 
Hi,

der IE muß in den Quirksmodus gesetzt werden, damit die verschachtelten Tabellen in der Höhe auf 100% gestreckt werden - also:

Code: 
<!-- Put IE into Quirksmode ->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
oder

Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
Funktioniert nicht. Beim 1. Vorschlag "würfelts" mir die ganze Seite durcheinander und beim 2. bekomme ich eine Fehlermeldung: "Parse error: parse error, unexpected T_STRING in /home/httpd/vhosts/r-appert.ch/subdomains/smokinaces/httpdocs/test/SA_Test2.php on line 1"
 
Grundsätzlich funktioniert es schon, dass die verschachtelten Tabellen in der Vertikalen auf 100% gestreckt werden, nur wenn die Seite nun im IE "durcheinandergewürfelt" wird, liegt's daran, dass er im Quirksmodus u.a. das Boxmodell nicht unterstützt.
 
Die Ansicht wird mit "<!-- Put IE into Quirksmode ->" auch im FF zerhackt (guckst Du Anhang).
Was kann ich noch machen ?

ffmist.jpg iemist.jpg
 
Bei mir stört sich Firefox nicht im geringsten an dem HTML-Kommentar. :suspekt:

Aber du kannst ja mal diese Zeile weglassen und stattdessen diesen Dokumenttyp deklarieren, damit das Dokument im Quirksmodus übergeben wird:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
Hab ich schon gemacht, schaut immer noch gleich aus.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Smokin´Aces - eine World of WarCraft Gilde</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="language"    CONTENT="de">
 
Mit
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
wird das Dokument im Standardsmode, und nicht im Quirksmode übergeben.
 
Ok, im IE funktioniert s es nun.
Dank dem Tip von hela hab ich nun auch kapiert was Michael gemeint hat. Hab einfach die Zeile "http://www.w3.org/TR/html4/loose.dtd" weggelassen. Ist etwas verwirrend das ganze ^^.
Aber nun hat anscheinend FF ein kleines Problem (siehe Anhang).

ffmurks.jpg Link zur Testseite
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück