✔ verschiebung im IE

Wanna · 31. August 2006

Hallo, ich habe folgendes Problem:

Bild:

Oberes Bild: I-Net Explorer Anzeige
Unteres Bild: Firefox Anzeige

wie im unteren Bild soll es aussehen, der doofe Internet-Explorer macht mir da aber immer diese 2 Pixel "Trennleiste" die da nicht sein sollte. Ich finde den fehler absolut nicht, könntet ihr vielleicht mal schaun ob ihr was seht?!

index.php (speziell zum problem)

PHP:

                <tr>
                  <td width="2"></td>
                  <td width="80"><input name="login" type="text" id="login" class="login_username" onfocus="javascript:login_hide()" onblur="javascript:login_show()"  /></td>
                  <td width="2"></td>
                  <td width="80"><input name="password" id="passwort" type="text" class="login_password" onfocus="javascript:pass_hide()" onblur="javascript:pass_show()" /></td>
                  <td width="2"></td>
                  <td width="30"><input type="submit" value="" class="login_go" /></td>
                  <td width="22"><img src="Bilder/sliced2_20.jpg" width="22" height="15" /></td>
                </tr>

index.php (ganz)

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
.Stil1 {color: #CCCCCC}
-->
</style>
<link href="daten/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" language="javascript">

function login_show() { 
  if (document.getElementById("login").value == '')
    { document.getElementById("login").style.backgroundImage="url(Bilder/sliced_15_over.jpg)"; }
  else
    { document.getElementById("login").style.backgroundImage="url(Bilder/sliced2_15.jpg)"; }
}

function login_hide() { 
  document.getElementById("login").style.backgroundImage="url(Bilder/sliced2_15.jpg)";
}

function pass_show() { 
  if (document.getElementById("passwort").value == '')
    { document.getElementById("passwort").style.backgroundImage="url(Bilder/sliced_17_over.jpg)"; }
  else
    { document.getElementById("passwort").style.backgroundImage="url(Bilder/sliced2_17.jpg)"; }
}

function pass_hide() { 
  document.getElementById("passwort").style.backgroundImage="url(Bilder/sliced2_17.jpg)";
}


</script>

</head>

<body bgcolor="#000000" style="margin:0px;">
<div align="center">
  <table width="1000" border="0" cellspacing="0" cellpadding="0">
    <tr valign="top">
      <td width="1" background="Bilder/sliced2_08.jpg"></td>
      <td width="998"><table width="998" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td valign="top" width="218"><table width="218" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><img src="Bilder/sliced2_02.jpg" width="218" height="107" /></td>
            </tr>
            <tr>
              <td valign="top"><table width="218" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="2"></td>
                  <td width="80"><input name="login" type="text" id="login" class="login_username" onfocus="javascript:login_hide()" onblur="javascript:login_show()"  /></td>
                  <td width="2"></td>
                  <td width="80"><input name="password" id="passwort" type="text" class="login_password" onfocus="javascript:pass_hide()" onblur="javascript:pass_show()" /></td>
                  <td width="2"></td>
                  <td width="30"><input type="submit" value="" class="login_go" /></td>
                  <td width="22"><img src="Bilder/sliced2_20.jpg" width="22" height="15" /></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td><img src="Bilder/sliced2_21.jpg" width="218" height="105" /></td>
            </tr>
          </table></td>
          <td valign="top" width="310"><table width="310" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><img src="Bilder/sliced2_03.jpg" width="310" height="61" /></td>
            </tr>
            <tr>
              <td><img src="Bilder/sliced2_11.jpg" width="310" height="166" /></td>
            </tr>
          </table></td>
          <td valign="top" width="468"><table width="468" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><img src="Bilder/sliced2_04.jpg" width="468" height="1" /></td>
            </tr>
            <tr>
              <td><img src="Bilder/sliced2_09.jpg" width="468" height="60" /></td>
            </tr>
            <tr>
              <td><img src="Bilder/sliced2_12.jpg" width="468" height="166" /></td>
            </tr>
          </table></td>
          <td valign="top" width="2"><table width="2" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><img src="Bilder/sliced2_05.jpg" width="2" height="61" /></td>
            </tr>
            <tr>
              <td><img src="Bilder/sliced2_13.jpg" width="2" height="166" /></td>
            </tr>
          </table></td>
        </tr>
      </table>
        <table width="998" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="2" background="Bilder/sliced2_22.jpg"></td>
            <td width="194" valign="top"><table width="194" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td class="navigation_bereich"><div align="left">MAIN</div></td>
              </tr>
              <tr>
                <td class="navigation_trennleiste"></td>
              </tr>
              <tr>
                <td class="navigation_button"><div align="left">News</div></td>
              </tr>
              <tr>
                <td class="navigation_trennleiste"></td>
              </tr>
              <tr>
                <td class="navigation_button"><div align="left">News-Archive</div></td>
              </tr>
              <tr>
                <td class="navigation_trennleiste"></td>              
			  </tr>
			  <tr>
			    <td class="navigation_button"><div align="left">Sponsors</div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td> 
			 </tr>
			  <tr>
			    <td class="navigation_button"><div align="left">Contact </div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td> 
			 </tr>
			  <tr>
			    <td class="navigation_button"><div align="left">History</div></td>
			    </tr>				
			  <tr>
                <td class="navigation_trennleiste"></td> 
			 </tr>
			  <tr>
			    <td class="navigation_button"><div align="left">Impressum</div></td>
			    </tr>				
			  <tr>
                <td class="navigation_trennleiste"></td>			    </tr>
			  <tr>
			    <td class="navigation_bereich"><div align="left">CLAN</div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td>			    </tr>
			  <tr>
			    <td class="navigation_button"><div align="left">Team</div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td>			    </tr>
			  <tr>
			    <td class="navigation_button"><div align="left">Matches</div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td>			    </tr>
			  <tr>
			    <td class="navigation_button"><div align="left">Fight Us </div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td>			    </tr>
			  <tr>
			    <td class="navigation_button"><div align="left">Server</div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td>			    </tr>
			  <tr>
			    <td class="navigation_button"><div align="left">Awards</div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td>			    </tr>				
			  <tr>
			    <td class="navigation_button"><div align="left">Rankings</div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td>			    </tr>						
			  <tr>
			    <td class="navigation_bereich"><div align="left">MEDIA</div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td>			   
			  </tr>	
			  <tr>
			    <td class="navigation_button"><div align="left">Polls</div></td>
			    </tr>				
			  <tr>
                <td class="navigation_trennleiste"></td>			   
			  </tr>	
			  <tr>
			    <td class="navigation_button"><div align="left">Gallery</div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td>			   
			    </tr>
			  <tr>
			    <td class="navigation_button"><div align="left">Downloads</div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td>			   
			    </tr>
			  <tr>
			    <td class="navigation_button"><div align="left">Links</div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td>			   
			    </tr>
			  <tr>
			    <td class="navigation_button"><div align="left">Userlist</div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td>			   
			    </tr>
			  <tr>
			    <td class="navigation_button"><div align="left">Guestbook</div></td>
			    </tr>
			  <tr>
                <td class="navigation_trennleiste"></td>			   
			    </tr>
				
            </table></td>
            <td width="3" valign="top" background="Bilder/sliced2_24.jpg"></td>
            <td width="2" valign="top" background="Bilder/sliced2_22.jpg"></td>
            <td width="506" valign="top" background="Bilder/sliced2_39.jpg"><table width="506" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td class="navigation_content_head"><div align="left">NEWS</div></td>
              </tr>
              <tr>
                <td class="navigation_content_content"><div align="left">hrh</div></td>
              </tr>

            </table></td>
            <td width="2" valign="top" background="Bilder/sliced2_22.jpg"></td>
            <td width="71" valign="top" background="Bilder/gamesleiste_backround.jpg"><table width="71" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td class="navigation_gamesleiste_head"><div align="left">GAMES</div></td>
              </tr>
              <tr>
                <td><img src="Bilder/sliced3_41.jpg" width="71" height="455" /></td>
              </tr>
            </table></td>
            <td width="2" valign="top" background="Bilder/sliced2_22.jpg"></td>
            <td width="214" valign="top" background="Bilder/sliced2_42.jpg"><table width="214" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td class="navigation_rechts_button"><div align="left">LATEST MATCHES </div></td>
              </tr>
              <tr>
                <td class="navigation_trennleiste"></td>
              </tr>
              <tr>
                <td class="navigation_rechts_content"><div align="left">add<br />
                    <br />
                  safds</div></td>
              </tr>
              <tr>
                <td class="navigation_trennleiste"></td>
              </tr>
              <tr>
                <td class="navigation_rechts_button"><div align="left">SUPPORTER</div></td>
              </tr>
              <tr>
                <td class="navigation_trennleiste"></td>
              </tr>
              <tr>
                <td class="navigation_rechts_content"><div align="left">sdfadf</div></td>
              </tr>
            </table></td>
            <td width="2" background="Bilder/sliced2_22.jpg"></td>
          </tr>
        </table>
        <table width="998" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="Bilder/trennleiste unten.jpg" width="998" height="3" /></td>
          </tr>
        </table>
        <br />
      <br />
      <span class="Stil1">normal</span><br /></td>
      <td width="1" background="Bilder/sliced2_08.jpg"></td>
    </tr>
  </table>
</div>
</body>
</html>

style.css

HTML:

.navigation_bereich {
	background-image: url(../Bilder/sliced2_23.jpg);
	width: 194px;
	height: 16px;
	font-family: Tahoma;
	font-size: 10px;
	font-weight: bold;
	padding-left: 2px;
}
.navigation_rechts_content {
	background-image: url(../Bilder/sliced2_42.jpg);
	width: 214px;
	font-family: Tahoma;
	font-size: 10px;
	font-weight: bold;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.navigation_trennleiste {
	height: 1px;
	background-color: #000000;
}
.navigation_button {
	background-image: url(../Bilder/sliced2_36.jpg);
	width: 194px;
	height: 16px;
	font-family: Tahoma;
	font-size: 10px;
	font-weight: bold;
	padding-left: 4px;
	color: #3b3b3b;
}
.navigation_abschluss_schwarz {
	height: 2px;
	background-color: #000000;
}
.navigation_abschluss_grau {
	height: 1px;
	background-color: #3b3b3b;
}.navigation_rechts_button {
	background-image: url(../Bilder/sliced2_30.jpg);
	width: 214px;
	height: 16px;
	color: #000000;
	font-size: 10px;
	font-weight: bold;
	padding-left: 2px;
	font-family: Tahoma;
}
.navigation_gamesleiste_head {
	background-image: url(../Bilder/sliced3_28.jpg);
	width: 71px;
	height: 17px;
	font-family: Tahoma;
	font-size: 10px;
	font-weight: bold;
	color: #000000;
	padding-left: 5px;
}
.navigation_content_head {
	background-image: url(../Bilder/sliced2_26.jpg);
	width: 506px;
	height: 16px;
	padding-left: 2px;
	padding-right: 2px;
	font-family: Tahoma;
	font-size: 10px;
	font-weight: bold;
}
.navigation_content_content {
	font-family: Tahoma;
	font-size: 10px;
	font-weight: bold;
	padding-left: 2px;
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
}
.login_username {
	background-image: url(../Bilder/sliced_15_over.jpg);
	border: 0px;
	width: 76px;
	height: 13px;
	font-family: Tahoma;
	font-size: 10px;
	font-weight: bold;
	padding-left: 2px;
	padding-right: 2px;
}
.login_password {
	background-image: url(../Bilder/sliced_17_over.jpg);
	border: 0px;
	width: 76px;
	height: 13px;
	font-family: Tahoma;
	font-weight: bold;
	font-size: 10px;
	padding-left: 2px;
	padding-right: 2px;
}
.login_go {


	background-image: url(../Bilder/sliced2_19.jpg);
	border: 0px;
	width: 30px;
	height: 15px;
}

vielen Dank

Maik · 31. August 2006

Bei mir werden keine Trennleisten angezeigt, wenn ich den Quellcode lokal teste, siehe Anhang.

Vielleicht liegt es aber auch daran, daß mir die referenzierten Grafiken fehlen?

Meine Testumgebung: Win2k, IE 6.0

Könntest Du die Seite eventuell mal online stellen, damit man dort einen Blick drauf werfen kann?

.

Wanna · 31. August 2006

http://www.reloaded-gaming.de/hp2/

Maik · 31. August 2006

Warum der IE an dieser Stelle die beiden Lücken aufreisst, sodaß der schwarze Seitenhintergrund sichtbar wird, kann ich Dir leider nicht sagen. Am Quellcode ist mir auch nichts negatives aufgefallen, was dieses Verhalten "rational" erklären könnte.

Aber du kannst die Grafik sliced2_20.jpg ja mal alternativ als Hintergrundbild in der entsprechenden Tabellenzelle einbinden.

Maik · 31. August 2006

Okay, habe die Lösung im Stylesheet gefunden

Code:

.login_username {
        background-image: url(../Bilder/sliced_15_over.jpg);
        border: 0px;
        width: 76px;
        height: 13px;
        font-family: Tahoma;
        font-size: 10px;
        font-weight: bold;
        /*padding-left: 2px;*/ /* auskommentiert = deaktiviert */
        /*padding-right: 2px;*/ /* auskommentiert = deaktiviert */
        padding: 0 2px;
        }
.login_password {
        background-image: url(../Bilder/sliced_17_over.jpg);
        border: 0px;
        width: 76px;
        height: 13px;
        font-family: Tahoma;
        font-weight: bold;
        font-size: 10px;
        /*padding-left: 2px;*/ /* auskommentiert = deaktiviert */
        /*padding-right: 2px;*/ /* auskommentiert = deaktiviert */
        padding: 0 2px;
}

Wanna · 31. August 2006

joa supi, hat funktioniert. kannste mir jetzt vielleicht noch sagen, was der fehler war, besser gesagt, was die umstellung bewirkt?!

danke nochmals

Maik · 31. August 2006

Der IE hat da wohl in den Eingabefeldern einen oberen und unteren Innenabstand hinzuaddiert, den ich mit padding:0 2px auf null gesetzt habe. Der erste Wert bestimmt den vertikalen und der Zweite den horizontalen Innenabstand zu beiden Seiten.

✔ verschiebung im IE

Wanna

Mitglied

Maik

Anhänge

Wanna

Mitglied

Maik

Maik

Wanna

Mitglied

Maik

Neue Beiträge