✔ Anzeige Diverenzen FF vs. IE

Maik · 29. Juni 2007

Vielleicht löst sich dieses Problem, wenn du das Markup validierst -> http://validator.w3.org/check?uri=h...et=(detect+automatically)&doctype=Inline&ss=1

Papi62 · 29. Juni 2007

So, hab ein paar Errors weg bekommen aber immer noch 17 in der Liste. habe alles kontrolliert und es ist eigentlich so wie es sein sollte. Ich kapier daher die Fehlermeldungen nicht auf validator.w3.org.

Der Fehler in FF ist immer noch da.

Maik · 29. Juni 2007

Dann hast du wohl die entscheidenden Fehler noch nicht behoben, denn da werden u.a. div-, td-, tr-, u. table-Elemente bemängelt, die entweder nicht zuvor geöffnet wurden, oder an der notierten Stelle nicht zulässig sind.

Papi62 · 29. Juni 2007

Nun hab ichs geschafft, keine Errors mehr bei validator.w3.org.

ABER der FF hat immer noch dasselbe Problem ^^. Hat noch jemand nen Tip ? Hier nochmal der Link zur Seite.

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;}
.td_om {background: url(images/col_om.gif);}
.td_um {background: url(images/col_um.gif);}
.tdl_lm {background: url(images/col_lm.gif);}
.tdr_rm {background: url(images/col_rm.gif);}
.tdl_rm {background: url(images/col_rmb.gif);}
.tdr_lm {background: url(images/col_lmb.gif);}
/*----------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: 170px;
        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;}
/*----------Suche Blasc----------*/
.tab_blasc {background: url(http://www.buffed.de/images/snipplet-small-1-background.gif);}
/*----------Suche FreierBund----------*/
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;}
/*----------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 HTML 4.01 Transitional//EN">
<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">
<link rel="stylesheet" type="text/css" href="http://www.buffed.de/snipplet-1.css">
</head>
<body>
<div id="bodyline">
  <div id="header">
    <div id="head_left"><img src="http://www.tutorials.de/forum/images/bord_left.gif" alt="" border="0" width="374" height="170"></div>
    <div id="head_right"><img src="http://www.tutorials.de/forum/images/bord_right.gif" alt="" border="0" width="164" height="170"></div>
    <div id="head_center"></div>
  </div>
<div class="col_wrap">
<div class="col_outer">
  <table id="outerTable" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td width="210">
        <table id="fixTable1" width="210" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="10" height="10"><img src="http://www.tutorials.de/forum/images/col_ol.gif" width="10" height="10" border="0" alt=""></td>
            <td height="10" class="td_om"></td>
            <td width="20" height="10"><img src="http://www.tutorials.de/forum/images/col_orb.gif" width="20" height="10" border="0" alt=""></td>
          </tr>
          <tr>
            <td width="10" height="100%" class="tdl_lm"></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">
	       <form action="http://www.buffed.de" method="post" style="margin:0;" target="_blank">
	         <table border="0" cellpadding="0" cellspacing="0" width="100" class="tab_blasc">
		   <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" alt=""></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">
	       <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;" />
                    </div>
	         </form>
	       </div>
	     </div>
            </div>
            </td>
	   <td width="20" height="100%" class="tdl_rm"></td>
	 </tr>
	 <tr>
	   <td width="10" height="10"><img src="http://www.tutorials.de/forum/images/col_ul.gif" width="10" height="10" border="0" alt=""></td>
	   <td height="10" class="td_um"></td>
	   <td width="20" height="10"><img src="http://www.tutorials.de/forum/images/col_urb.gif" width="20" height="10" border="0" alt=""></td>
	 </tr>
        </table>
      </td>
      <td width="100%">
        <table id="innerTable" width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
	   <td width="10" height="10"><img src="http://www.tutorials.de/forum/images/col_ol.gif" width="10" height="10" border="0" alt=""></td>
	   <td height="10" class="td_om"></td>
	   <td width="10" height="10"><img src="http://www.tutorials.de/forum/images/col_or.gif" width="10" height="10" border="0" alt=""></td>
	 </tr>
        	 <tr>
	   <td width="10" height="100%" class="tdl_lm"></td>
	   <td bgcolor="660000">
            <div id="col_center">
	     <div id="titel"><img src="http://www.tutorials.de/forum/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%" class="tdr_rm"></td>
	 </tr>
	 <tr>
	   <td width="10" height="10"><img src="http://www.tutorials.de/forum/images/col_ul.gif" width="10" height="10" border="0" alt=""></td>
	   <td height="10" class="td_um"></td>
	   <td width="10" height="10"><img src="http://www.tutorials.de/forum/images/col_ur.gif" width="10" height="10" border="0" alt=""></td>
	 </tr>
        </table>
      </td>
      <td width="200">
        <table id="fixTable2" width="200" border="0" cellspacing="0" cellpadding="0">
          <tr>
	   <td width="20" height="10"><img src="http://www.tutorials.de/forum/images/col_olb.gif" width="20" height="10" border="0" alt=""></td>
	   <td height="10" class="td_om"></td>
	   <td width="10" height="10"><img src="http://www.tutorials.de/forum/images/col_or.gif" width="10" height="10" border="0" alt=""></td>
	 </tr>
        	 <tr>
        	   <td width="20" height="100%" class="tdr_lm"></td>
	   <td bgcolor="660000" align="center" style="padding-top:10px;">
              <p><a href="http://validator.w3.org/check?uri=referer" target="_blank">
                <img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a></p>
              <p><a href="http://jigsaw.w3.org/css-validator/" target="_blank">
                <img style="border:0; width:88px; height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a></p>
	   </td>
	   <td width="10" height="100%" class="tdr_rm"></td>
	 </tr>
	 <tr>
        	   <td width="20" height="10"><img src="http://www.tutorials.de/forum/images/col_ulb.gif" width="20" height="10" border="0" alt=""></td>
	   <td height="10" class="td_um"></td>
	   <td width="10" height="10"><img src="http://www.tutorials.de/forum/images/col_ur.gif" width="10" height="10" border="0" alt=""></td>
	 </tr>
        </table>
      </td>
    </tr>
  </table>
</div>
</div>
<div class="clear"></div>
  <div id="footer">
    <div id="footer_left"><img src="http://www.tutorials.de/forum/images/footer_left.gif" alt="" border="0" width="300" height="50"></div>
    <div id="footer_right"><img src="http://www.tutorials.de/forum/images/footer_right.gif" alt="" border="0" width="300" height="50"></div>
    <div id="footer_center"></div>
  </div>
</div>
</body>
</html>

Quaese · 30. Juni 2007

Hi,

setz mal die Höhe (height) für Nicht-IEs auf auto.

Code:

.col_wrap
{
	width: 100%;
         min-width: 600px;
         height: auto !important; /* moderne Browser */
	height:100%; /* IE */
         background-color: #660000;
         min-height: 100%;
	border: 1px solid black;
	margin: 0 -1px;
}

Ciao
Quaese

Maik · 30. Juni 2007

Hi,

sinnigerweise gehört die min-height-Deklaration vorne angestellt, da sie zum "Mindesthöhen"-Regelblock dazugehört, und der Ausgangspunkt für die beiden nachfolgenden Höhenangaben ist, da der IE (<7) diese Eigenschaft nicht unterstützt, dafür aber die height-Eigenschaft als "Mindesthöhe" behandelt:

Code:

.col_wrap
{
	 width: 100%;
         min-width: 600px;
         min-height: 100%; /* moderne Browser */
         height: auto !important; /* moderne Browser */
	 height:100%; /* IE */
         background-color: #660000;
         /*min-height: 100%;*/
	 border: 1px solid black;
	 margin: 0 -1px;
}

Papi62 · 30. Juni 2007

Jiiihaa, danke Dir Quaese, es flutscht ^^.

Dank auch allen anderen und bis zum nächsten Mal.

✔ Anzeige Diverenzen FF vs. IE

Maik

Papi62

Mitglied

Maik

Papi62

Mitglied

Quaese

Moderator

Maik

Papi62

Mitglied

Neue Beiträge