CSS, IE und FireFox Darstellungsproblem *erledigt*

S

smaak

Well-known member
7 Mai 2006
2.811
357
Hallo!

Ich bastel gerade eine Seite und habe heute erst gemerkt das diese im Internet Explorer völlig falsch dargestellt wird! In folgendem Bild seht ihr oben die richtige Darstellung im Firefox, darunter seht ihr wie es im Internet Explorer aussieht. Nicht nur das die Logintabelle meinen Head sprengt, nein, sie sitzt auch noch an der falschen Stelle!



Hier noch meine style.css:
Code: 
a, a:link,a:active {
        color: #BCD8ED;
        text-decoration: none;
        font-weight:bold;
        margin-bottom: 5px;
}
a:visited {
        color: #BCD8ED;
        text-decoration: none;
        font-weight:bold;
        margin-bottom: 5px;
}
a:hover {
        color: #FFFFFF;
        text-decoration: underline;
        margin-bottom: 5px;
}
a.td.thumbnail, a.td.thumbnail:link, a.td.thumbnail:visited, a.td.thumbnail:active {
        border: #7F7F7F 1px solid;
        margin-bottom: -55px;
        padding-top: 10px;
        width: 170px;
        display: block;
        background: rgb(35, 35, 35);
        height: 210px;

}
a.td.thumbnail:hover            {
        border: #CFCFCF 1px solid;
        margin-bottom: -55px;
        padding-top: 5px;
        width: 170px;
        display: block;
        background: rgb(35, 35, 35);
        height: 210px;

}
body{
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 5px;
        margin-top: 0px;
        background: #20394D;
        background-image:url(grafik/bg.gif);
        color: #ffffff;
        font: 11px verdana, arial, sans-serif;
        vertical-align: middle;
}

div,th,tr,table,font,li,ul,
blockquote,p,h1,h2,h3,h4,h5,center {
        border: 0px;
        color: #ffffff;
        font: 11px verdana, arial, sans-serif;
}
b{
        border: 0px;
        color: #ffffff;
        font: 11px verdana, arial, sans-serif;
        font-weight: bold;
}

strong{
        border: 0px;
        color: #000000;
        font: 12px verdana, arial, sans-serif;
        font-weight: bold;
}

h1 {

        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
	margin-top: 0px;
        padding: 0px;
        display: block;
        color: #F9B020;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 0px;


        position: relative;

}

h2 {
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
        display: block;
        color: #000000;
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 0px;


        position: relative;
}

h3 {
        border-bottom: rgb(0, 0, 0) 1px solid;
        border-left: 1px none;
        border-right: 1px none;
        border-top: 1px none;
        padding: 2px;
        width: 400px;
        display: block;
        background: rgb(40, 40, 40);
        color: rgb(91, 91, 101);
        font: 9px;
        font-weight: normal;
        letter-spacing: 0px;
        text-align: center;
}
h5 {
        padding-left: 2px;
        width: 150px;
        display: block;
        color: rgb(204, 204, 255);
        font-size: 10px;
        font-weight: normal;

}
img{
        border: rgb(0, 0, 0) 1px none;
}
img.thumbnail {
        border: #000000 1px solid;
        margin-right: 15px;
        margin-bottom: 15px;
        padding: 0px;
        background: rgb(45, 45, 45);
        vertical-align: top;
}input {
        border: rgb(0, 0, 0) 0px solid;
}
table.thumbnail {
        width: 10%;
}
td {
        border: 1px none;
        background: none;
        border-collapse: collapse;
        empty-cells: show;
}
td.message_body {
        border-bottom: rgb(0, 0, 0) 1px solid;
        border-left: 1px none;
        border-right: 1px none;
        border-top: 1px none;
        display: block;
        background: rgb(40, 40, 40);
}

.bildout {
        background:#9dc6ea;
        border-bottom: #000000 1px solid;
        border-top: #000000 1px solid;
        border-left: #000000 1px solid;
        border-right: #000000 1px solid;
        }
.architektur {
        border-bottom: #5F5F5F 2px solid;
        border-top: #5F5F5F 2px solid;
        border-left: #5F5F5F 2px solid;
        border-right: #5F5F5F 2px solid;
        color: #3B5890;
        font: 12px Verdana, Tahoma, Helvetica, sans-serif;
        font-weight: bold;
        letter-spacing: 2px;
        padding: 3px;
        width: 160px;

}
.head  {
        color:#DFDFDF;
        padding-bottom: 8px;
        padding-top: 30px;
        padding-left:15px;
        font: 11px Verdana, Tahoma, Helvetica, sans-serif;
        font-weight: bold;
        }
.navi  {
        color:#DFDFDF;
        padding-bottom: 1px;
        padding-top: 1px;
        font: 11px Verdana, Tahoma, Helvetica, sans-serif;
        font-weight: bold;
        }

.bildlinks  {
        border-right: #0F0F0F 1px solid;

        }

.thumbnail  {
        border:#000000 1px solid;
        width:110px;
        height:110px;
        background:#8F8F8F;
        }



.message_body {
        margin: 5px 5px 10px;
        color: #3F3F3F;
        font: 10px Verdana, Tahoma, Helvetica, sans-serif;
}
.sb{
        background: rgb(91, 91, 101);
        color: rgb(204, 204, 255);
        font: 10px Verdana, Tahoma, Helvetica, sans-serif;
        text-decoration: none;
}



HR { position : relative;}




.newshead {
	background-color:#77B2B2;
	color:inherit;
	font-size:11pt;
	font-weight:bold;
	padding:4px 6px 4px 8px;
	text-align:left;
}
.left,.center,.right {
	padding:1px;
}
.leftb,.centerb,.rightb {
	background-color:#26486A;
	color:inherit;
	padding:4px 6px 4px 8px;
}
.leftc,.centerc,.rightc {
	background-color:#25435B;
	color:inherit;
	padding:4px 6px 4px 8px;

.quote {
	background-color:#9B9B9B;
	border:1px solid #777777;
	color:inherit;
	padding:6px;
	text-align:left;
}

Hier noch der HTML-Code:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>{func:title}</title>
<meta name="author" content="clairette neumann">
<link rel="stylesheet" href="templates/ahd1/stylesheet.css" type="text/css">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<center><table style="background:#25435A;width:800px;" border="0" cellspacing="0" cellpadding="0">
<tr>
 <td align="center" style="background-image:url(gfx/ticker.jpg);border-left:1px solid #000000;border-right:1px solid #000000;padding-top:7px;padding-left:5px;height:25px;"><b>{quote:quote}</b></td>
</tr>
<tr>
 <td style="background-image:url(templates/ahd1/gfx/ah-2.jpg);width:800px;height:140px;padding:5px;"><table style="background:#20394D;border:1px solid #3C6A8E;padding:5px;" border="0" cellspacing="0" cellpadding="0" width="215" ><tr>
 <td width="213"><h1>Login</h1><br>{users:navlogin}
 </td>
</tr></table></td>
 </tr>
</table>
<table style="background:#25435B;width:800px; border-left:1px solid #000000; border-bottom:1px solid #000000;border-right:1px solid #000000;" border="0" cellpadding="0" cellspacing="0" >
<tr>
 <td align="center" valign="middle" style="height:28px;background-image:url(grafik/navilinie2.gif);padding:4px;"><a href="index.php">Home</a>  |  <a href="index.php?mod=board">Forum</a>  |  <a href="index.php?mod=gbook">GästeBuch</a>  |  <a href="index.php?mod=rules">Regeln</a>  |  <a href="index.php?mod=links">Links</a>  |  <a href="index.php?mod=bxcp&action=about">About</a>  |  <a href="index.php?mod=contact&action=imprint">Impressum</a></td>

</tr>
</table>
<table style="background:#25435B;width:800px; border-left:1px solid #000000; border-bottom:1px solid #000000;border-right:1px solid #000000;" border="0" cellpadding="0" cellspacing="0" >
<tr>
 <td width="593" valign="top" style="padding:15px;">
<table style="background:#20394D;border:1px solid #3C6A8E;padding:5px;" border="0" cellspacing="0" cellpadding="0" width="560" >
<tr>
 <td width="558">{func:show}<br>
   </td>
</tr>
</table><br>
<table style="background:#20394D;border:1px solid #3C6A8E;padding:5px;" border="0" cellspacing="0" cellpadding="0" width="560" >
<tr>
 <td width="558"><h1>News</h1>
 <br>
<b>28.05.2006</b><br> 
 Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch. </td>
</tr>
</table>
</td>
<td width="205" align="right" valign="top" style="padding:15px;"><table style="background:#20394D;border:1px solid #3C6A8E;padding:4px;" border="0" cellspacing="0" cellpadding="0" width="175" >
<tr>
 <td><h1>ShoutBox</h1></td>
</tr>
<tr>
 <td colspan="2" style="padding:3px;background:#25435A;">{shoutbox:navlist}</td>
 </tr>
</table>
<br>
<table style="background:#20394D;border:1px solid #3C6A8E;padding:0px;" border="0" cellspacing="0" cellpadding="0" width="175" >
<tr>
 <td width="173" colspan="2" style="padding:3px;"><h1>Vote</h1></td>
</tr>
<tr>
 <td colspan="2" style="padding:3px;background:#25435A;">{votes:navlist}</td>
 </tr>
</table>
<br>
<table width="175" border="0" cellpadding="0" cellspacing="0" style="background:#20394D;border:1px solid #3C6A8E;padding:0px;">
<tr>
 <td width="173" colspan="2" style="padding:3px;"><h1>Clanwars</h1></td>
</tr>
<tr>
 <td colspan="2" style="padding:3px;background:#25435A;">{wars:navlist}</td>
 </tr>
</table>
</td>
</tr>
</table>
<table style="background:#25435B;width:800px; border-left:1px solid #000000; border-bottom:1px solid #000000;border-right:1px solid #000000;" border="0" cellpadding="0" cellspacing="0" >
<tr>
 <td align="center" valign="top" style="background:#20394D;padding:4px;border-top:1px solid #3C6A8E;"><a href="https://www.esl-europe.net/" target="_blank"><img src="https://gfx.esl-europe.net/gfx/button_espl_01.gif" width=88 height=31 border=0 alt="Electronic Sports League"></a></td>

</tr>
</table>
<table style="background:#25435B;width:800px; border-left:1px solid #000000; border-bottom:1px solid #000000;border-right:1px solid #000000;" border="0" cellpadding="0" cellspacing="0" >
<tr>
 <td align="center" valign="top" style="padding:4px;border-top:1px solid #3C6A8E;">© by Seite.de 2006<br>
   Online: {count:navone} | Heute: {count:navday} | Monat: {count:navmon} | Gesamt: {count:navall}</td>

</tr>
</table></center>
</body>
</html>

Könnt Ihr mir sagen woran das liegt?
 
Zuletzt bearbeitet:
echt? Also der HTML-Code sieht so aus:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>{func:title}</title>
<meta name="author" content="clairette neumann">
<link rel="stylesheet" href="templates/ahd1/stylesheet.css" type="text/css">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<center><table style="background:#25435A;width:800px;" border="0" cellspacing="0" cellpadding="0">
<tr>
 <td align="center" style="background-image:url(gfx/ticker.jpg);border-left:1px solid #000000;border-right:1px solid #000000;padding-top:7px;padding-left:5px;height:25px;"><b>{quote:quote}</b></td>
</tr>
<tr>
 <td style="background-image:url(templates/ahd1/gfx/ah-2.jpg);width:800px;height:140px;padding:5px;"><table style="background:#20394D;border:1px solid #3C6A8E;padding:5px;" border="0" cellspacing="0" cellpadding="0" width="215" ><tr>
 <td width="213"><h1>Login</h1><br>{users:navlogin}
 </td>
</tr></table></td>
 </tr>
</table>
<table style="background:#25435B;width:800px; border-left:1px solid #000000; border-bottom:1px solid #000000;border-right:1px solid #000000;" border="0" cellpadding="0" cellspacing="0" >
<tr>
 <td align="center" valign="middle" style="height:28px;background-image:url(grafik/navilinie2.gif);padding:4px;"><a href="index.php">Home</a>  |  <a href="index.php?mod=board">Forum</a>  |  <a href="index.php?mod=gbook">GästeBuch</a>  |  <a href="index.php?mod=rules">Regeln</a>  |  <a href="index.php?mod=links">Links</a>  |  <a href="index.php?mod=bxcp&action=about">About</a>  |  <a href="index.php?mod=contact&action=imprint">Impressum</a></td>

</tr>
</table>
<table style="background:#25435B;width:800px; border-left:1px solid #000000; border-bottom:1px solid #000000;border-right:1px solid #000000;" border="0" cellpadding="0" cellspacing="0" >
<tr>
 <td width="593" valign="top" style="padding:15px;">
<table style="background:#20394D;border:1px solid #3C6A8E;padding:5px;" border="0" cellspacing="0" cellpadding="0" width="560" >
<tr>
 <td width="558">{func:show}<br>
   </td>
</tr>
</table><br>
<table style="background:#20394D;border:1px solid #3C6A8E;padding:5px;" border="0" cellspacing="0" cellpadding="0" width="560" >
<tr>
 <td width="558"><h1>News</h1>
 <br>
<b>28.05.2006</b><br> 
 Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch. </td>
</tr>
</table>
</td>
<td width="205" align="right" valign="top" style="padding:15px;"><table style="background:#20394D;border:1px solid #3C6A8E;padding:4px;" border="0" cellspacing="0" cellpadding="0" width="175" >
<tr>
 <td><h1>ShoutBox</h1></td>
</tr>
<tr>
 <td colspan="2" style="padding:3px;background:#25435A;">{shoutbox:navlist}</td>
 </tr>
</table>
<br>
<table style="background:#20394D;border:1px solid #3C6A8E;padding:0px;" border="0" cellspacing="0" cellpadding="0" width="175" >
<tr>
 <td width="173" colspan="2" style="padding:3px;"><h1>Vote</h1></td>
</tr>
<tr>
 <td colspan="2" style="padding:3px;background:#25435A;">{votes:navlist}</td>
 </tr>
</table>
<br>
<table width="175" border="0" cellpadding="0" cellspacing="0" style="background:#20394D;border:1px solid #3C6A8E;padding:0px;">
<tr>
 <td width="173" colspan="2" style="padding:3px;"><h1>Clanwars</h1></td>
</tr>
<tr>
 <td colspan="2" style="padding:3px;background:#25435A;">{wars:navlist}</td>
 </tr>
</table>
</td>
</tr>
</table>
<table style="background:#25435B;width:800px; border-left:1px solid #000000; border-bottom:1px solid #000000;border-right:1px solid #000000;" border="0" cellpadding="0" cellspacing="0" >
<tr>
 <td align="center" valign="top" style="background:#20394D;padding:4px;border-top:1px solid #3C6A8E;"><a href="https://www.esl-europe.net/" target="_blank"><img src="https://gfx.esl-europe.net/gfx/button_espl_01.gif" width=88 height=31 border=0 alt="Electronic Sports League"></a></td>

</tr>
</table>
<table style="background:#25435B;width:800px; border-left:1px solid #000000; border-bottom:1px solid #000000;border-right:1px solid #000000;" border="0" cellpadding="0" cellspacing="0" >
<tr>
 <td align="center" valign="top" style="padding:4px;border-top:1px solid #3C6A8E;">© by Seite.de 2006<br>
   Online: {count:navone} | Heute: {count:navday} | Monat: {count:navmon} | Gesamt: {count:navall}</td>

</tr>
</table></center>
</body>
</html>
 
Doofe Frage:
Code: 
a.td.thumbnail {
Kann man Klassen schachteln ? Wie soll das gehen ? :hö:
 
mmmh....
tabellen design *grml*
plöd :))

ist dass denn überhaupt w3c konform?!


evtl. liegt es hier dran:
Code: 
<tr>
   <td style="background-image:url(templates/ahd1/gfx/ah-2.jpg);width:800px;height:140px;padding:5px;">
      <table style="background:#20394D;border:1px solid #3C6A8E;padding:5px;" border="0" cellspacing="0" cellpadding="0" width="215" >
         <tr>
            <td width="213">
               <h1>Login</h1><br>{users:navlogin}
            </td>
         </tr>
      </table>
   </td>
</tr>
evtl. kannst du mal versuchen bei deinem td für das nav-menü, nen align anzugeben... evtl. ist der default align auf center gestellt... *grübel*

alles nur vermutungen, weil nichts ordentlich geschreibselt is ;))

verschachtel doch deinen html code nen bissl... auch mit einrücken, usw ;)
soll helfen *g*


lg
acid
 
AcidRain schrieb:
verschachtel doch deinen html code nen bissl... auch mit einrücken, usw ;)
soll helfen *g*


lg
acid
Zum Vergrößern anklicken....

verschachteln? wtf? ich hab kaum bis keine Ahnung von HTML! :ugly:
Was soll verschachteln bedeuten?

Und wo genau soll ich das align für das navmenü einfügen?

mfg und danke
 
So...die Box is jetz links so wie ich es wollte. Danke an AcidRain dafür!

Problem das immernoch besteht ist halt das im InternetExplorer Lücken zwischen Dem Senden-Button und dem Punkt registrierung steht! Hab es mal zur allgemeinen verwirrung als Bild angehangen! Wie lässt sich das kleine Prob. noch lösen? Hab schon viel ausprobiert aber bisher ohne Erfolg! :ugly:

MFG

 
Probier mal:
HTML: 
<form ... style="margin-bottom: 0px;">
Vielleicht war's auch padding, da bin ich mir grad nicht sicher.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

T
Mit der neuen Firefox-Version funktioniert die reCAPTCHA - Abfrage nicht (Ich bin kein Roboter).
Antworten
2
Aufrufe
3K
testuser112
T
Zurück
Oben