Anzeigeunterschied IE/FireFox/Opera

Hallo zusammen. Ich habe ein wirklich wirklich seltsames Problem, dass ich euch hier mal präsentieren werden und bei dem ich auf eure kompetente Hilfe hoffe.

Folgendes ist der Grund dieses Posts: Ich habe eine Seite für einen Kunden auf der die Texte auf bestimmte Art und Weise formatiert werden sollen. Dieses ist bereits geschehen und in Typo übertragen worden.
Leider habe ich nur das Problem, dass FireFox 1.5.0.4 (Win 32 und Opera 9 meine Inhaltsformatierungen nicht übernehmen 😢. Der InternetExplorer 6 tut das aber wunderbar. Außerdem verschieben sich Elemente, wenn ich mir die Seite unter Linux (FireFox 1.5.0.4) anschaue. Was mache ich falsch?
Ich hänge mal zwei Bilder an, damit ihr seht was gemeint ist:

Bild: chaos-gate.is-a-geek.net/…/ff-opera.gif
Bild: chaos-gate.is-a-geek.net/…/ie.gif

Ich hoffe auf eure Antworten und kreative Ideen. Danke.

Hallo,

ich vermute einmal stark, dass der Fehler an Deinem CSS liegt. Ohne weitere Angaben wird Dir aber leider hier niemand helfen können.

Viele Grüße

Markus

Ok, das is ja schon mal ne Antwort. Allerdings hast du recht. Es wird wohl am CSS liegen und wenn ich das nich poste wird keiner helfen können. Habe inzwischen auch mal dran rumgespielt und nun den eigentlichen Fehler gefunden und behoben. Allerdings ist jetzt ein Neuer aufgetreten: Nur auf der ersten Seite (siehe Screenshot) wird nach der H1 Überschrift ein (grosser) Break eingesetzt, den ich mir nicht erklären kann. Auf allen anderen Seiten wird das nicht gemacht!

Hier mein CSS:

p, q { 
        font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
}

q { 
	color: #99cc00;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Times New Roman", Times, serif;
	font-size: 25px;
	font-style: italic;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #CCCCCC;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	letter-spacing: 1px;
	vertical-align: bottom;
	padding-bottom: 5px;
}
.header {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
	background-color: #99CC00;
	border-top: 1px #FFFFFF;
	border-right: 1px #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	border-left: 1px #FFFFFF;
}

.headergrey {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	background-color: #999999;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	color: #FFFFFF;
}

.unten {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	border-top-style: solid;
	text-align: right;
	background-color: #99CC00;



}

.login {
	width: 100px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
	background-color: #FFFFFF;
}




}
.textrechts {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
	text-align: right;
}

}

.news {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
	text-align: left;
	vertical-align: top;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}

.submenueno {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
	background-color: #F5F5F5;
}
.submenueno a:hover {
text-decoration: none;
}
.submenueno a:ro {
text-decoration: none;
}
.submenueact {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #99CC00;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #99CC00;
	border-right-color: #99CC00;
	border-bottom-color: #99CC00;
	border-left-color: #99CC00;
	background-color: #FFFFFF;
}
.submenueact a:hover {
text-decoration: none;
}
.tx-indexedsearch
	width: 100px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
	background-color: #FFFFFF;
}

.tx-indexedsearch-res . tx-indexedsearch-descr P {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	text-align: justify;
	vertical-align: top;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	padding-right: 10px;
	padding-left: 20px;

}
.register_form_table {
	font-family: Verdana,Arial,Helvetica;
	color: #000000;
	font-size: 8pt;
}
.register_form {
	border: 1px solid #d4d4d4;
	background: #f0f0f0;
}


.csc-sword {
	color: #ff9900;
}

.csc-form-labelcell, .csc-form-fieldcell, .csc-searchResultInfo, .csc-searchResultRange, .csc-searchResultPrevNext, .csc-searchResultHeader, .csc-
searchResult {
	font-family: Verdana,Arial,Helvetica;
	color: #000000;
	font-size: 8pt;
}


.loginbox-labelcell, .loginbox-fieldcell, .loginbox-commentcell, .language-fieldcell {
	font-family: Verdana,Arial,Helvetica;
	color: #000000;
	font-size: 8pt;
}

.loginbox-fieldcell input {
	width: 100px;
}

.csc-mailform {
	background-color:#ffebcc;
	border: 1px solid #ff9900;
}

.csc-mailform-forum {
	background-color:#fff5e5;
	border: 1px solid #ff9900;
}

.csc-mailform-field {
	display: block;
	margin: 10px;
	padding: 10px;
}

.csc-mailform label, .csc-mailform-forum label{
	display: block;
	width: 120px;
	float: left;
	text-align: right;
	margin: 2px 5px;
	padding:0;
}


.csc-mailform input, .csc-mailform textarea, .csc-mailform-forum input, .csc-mailform-forum textarea{
	font-family: Verdana,Arial,Helvetica;
	color: #000000;
	background-color:white;
	border: 1px solid #ff9900;
	width: 200px;
	padding: 2px 6px;
	font-size: 8pt;
}

.csc-mailform input.csc-mailform-submit{
	float: right;
	width: 80px;
	cursor:hand;
}

.csc-mailform form input.csc-mailform-submit:hover{
	background-color:#ff9900;
	border: 1px solid white;
	color: white;
	
}


table.csc-uploads {
	border-spacing: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	border: 1px solid #ff9900;
}
table.csc-uploads td {
	padding: 3px 10px 3px 10px;
}
table.csc-uploads p {
	pargin:0;
	padding:0;
}

table .csc-uploads tr.tr-even {
	background-color: #ffebcc;
}



ul.csc-bulletlist{
	list-style-image: url(./listen_punkt.gif);
}

table .contenttable {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	border: 1px solid #FF9900;
}
table .contenttable td{
	padding: 5px;
}
table .contenttable .tr-0 {
	background-color: #FF9900;
}

Wenn mir jemand helfen könnte wär das echt nett. Danke.

Hallo,
ohne jetzt leider Deinen HTML Code ;-) sehen zu können würde ich laut Deiner Angaben folgend vorgehen:

1. Quellcode anschauen (hast du ja wahrscheinlich eh schon gemacht). Ist dort der Abstand wirklich ein <br />?
2. Die padding-bottom: 5px in Deinem CSS sind ja gewollt, das sind sie also nicht
3. Wenn das auf den Unterseiten nicht auftaucht, was ist an den Unterseiten anders als auf der Startseite (anderes Template, anderes Stylesheet zusätzlich eingebunden.....

Das wären mal so die Ansätze die ich jetzt verfolgen würde. Meld Dich nochmal falls es nicht klappt.

Viele Grüße

Markus

Danke erstmal für die Vorschläge. Also folgendes: Ich habe an der Vorlage ja rein GARNICHTS verändert. Selbst wenn ich eine andere Vorlage einbinde tritt dieser Fehler weiterhin auf. Die Unterseiten verwenden dasselbe CSS aber aufgrund von grafischen Änderungen (das Layout änder sich) eine andere Vorlage.

Ich habe echt keine Ahnung was ich falsch mache. Hab auch schon die Seiten (IDs) getauscht (diese Inhalte auf einer anderen Seite eingefügt), das TypoScript von anderen Seiten genommen. Es hat sich leider nichts verändert. Bis ich den Screen gemacht hatte war ja alles in Ordnung.
Hier der HTML-Code: (Achtung ungeordnet)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Navimatix</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<!-- ###DOKUMENT### -->
<body leftmargin="0" topmargin="0" alink="#333333" bgcolor="#5a5a5a" link="#333333" marginheight="0" marginwidth="0" text="#333333" vlink="#333333">
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" height="100%" width="890">
  <tbody><tr> 
    <td bgcolor="#5a5a5a" height="25" width="20"> </td>
      <td height="25" width="600"><img src="fileadmin/templates/img/more.gif" height="30" width="200" alt="" /></td>
    <td class="headergrey" bgcolor="#cccccc" height="25" width="250"><div align="right">
          <table width="248" height="14" border="0" cellpadding="0" cellspacing="0" class="textrechts">
            <tr> 
              <td width="248" colspan="2" valign="top"><p align="right"><font color="#ffffff"><strong> 
                  Quicksearch</strong></font> 
                  <input name="tx_indexedsearch[sword]" type="text" class="login" value="zoomatra" maxlength="25" />
                  <input name="tx_indexedsearch[submit_button]" align="right" type="submit" value="Go" />
                </p></td>
            </tr>
          </table>
        </div></td>
    <td class="headergrey" bgcolor="#cccccc" height="25" width="20"> </td>
  </tr>
  <tr> 
    <td bgcolor="#5a5a5a" height="100" width="20"> </td>
      <td class="header" background="fileadmin/templates/img/back.gif" height="100" width="600"> </td>
    <td class="header" height="100" valign="bottom" width="250"><div align="right"><a href="index.php?id=1" target="_self"><img src="fileadmin/templates/img/weblogo.gif" alt="home" border="0" height="65" width="160" /></a></div></td>
    <td class="header" height="100" width="20"> </td>
  </tr>
  <tr valign="top"> 
    <td bgcolor="#5a5a5a" width="20"> </td>
    <td colspan="2"> 
      <table border="0" cellpadding="0" cellspacing="0" height="170" width="850">
          <tr> 
            <td height="120"> <div align="right"><img src="fileadmin/templates/img/company.jpg" width="150" height="81" alt="" /></div>
              <div align="right">###menu1###</div></td>
            <td height="120"> <div align="right"><img src="fileadmin/templates/img/features.jpg" width="150" height="81" alt="" /></div> 
              <div align="right"> ###menu2### </div></td>
            <td height="120"> <div align="right"><img src="fileadmin/templates/img/competences.jpg" width="150" height="81" alt="" /></div>  
              <div align="right">###menu3###</div></td>
            <td height="120"> <div align="right"><img src="fileadmin/templates/img/download.jpg" width="150" height="81" alt="" /></div>
              <div align="right">###menu4###</div></td>
            <td height="120"> <div align="right"><img src="fileadmin/templates/img/team.jpg" width="150" height="81" alt="" /></div>
              <div align="right">###menu5###</div></td>
          </tr>
          <tbody>
            <tr> 
              <td id="untertitel1" width="170" height="50" align="right" class="menueact">###subtitle1###</td>
              <td id="untertitel2" width="170" height="50" align="right" class="menueno">###subtitle2###</td>
              <td id="untertitel3" width="170" height="50" align="right" class="menueno">###subtitle3###</td>
              <td id="untertitel4" width="170" height="50" align="right" class="menueno">###subtitle4###</td>
              <td id="untertitel5" width="170" height="50" align="right" class="menueno">###subtitle5###</td>
            </tr>
          </tbody>
        </table>
      <table border="0" cellpadding="0" cellspacing="0" height="400" width="850">
        <tbody><tr align="right"> 
              <td height="400" valign="top" width="170"> 
		<!-- ###SUBMENU### start-->
                <div id="submenucontainer" width:169pxheight:42pxz-index:1left:71pxtop:301px="">
                                
                  <div class="submenueno" align="center"><a href="#">+ 
                    Link 1</a></div>
								
                  <div class="submenueno" align="center"><a href="#">+ 
                    Link 2</a></div>
				  				</div>
		<!-- ###SUBMENU### stop-->	
		</td>		          
          <td align="left" height="400" valign="top" width="510"> 
            <table border="0" cellpadding="0" cellspacing="0" width="510">
                  <tbody>
                    <tr>  
	
                      <td width="20"> </td>
					 
                      <td width="480">###content###</td>
                      <td width="20"> </td>
                    </tr>
                  </tbody>
                </table></td>
          <td height="400" valign="top" width="170"> 
            <table bgcolor="#c3c3c3" border="0" cellpadding="0" cellspacing="0" height="50" width="150">
                  <tbody>
                    <tr> 
                      <td class="header" height="25" width="15">  </td>
                      <td class="header" height="25" width="120">User Login:</td>
                      <td class="header" height="25" width="15">  </td>
                    </tr>
                    <tr> 
                      <td height="0" colspan="2" valign="bottom"><span class="text"> 
                            <input name="user" class="login" id="user2" value="Username" type="text" />
                       </span>
                          </td>
                      <td height="30" valign="bottom" width="15">  </td>
                    </tr>
                    <tr>
                      <td height="30" colspan="2" valign="bottom"> <span class="text"> 
                        	<input name="pass" class="login" id="pass2" value="Password" type="text" /><input type="hidden" />
							</span>
							</td>
                      <td height="30" width="15">  </td>
                    </tr>
                    <tr valign="top"> 
                      <td height="25" width="15">  </td>
                      <td height="25" width="120"> <p class="textrechts" align="right"><strong>
                          <font color="#FFFFFF"><br />SSL Login ></font></strong><br />
                        </p></td>
                      <td height="25" width="15">  </td>
                    </tr>
                  </tbody>
                </table>
                <table bgcolor="#ebebeb" border="0" cellpadding="0" cellspacing="0" height="50" width="150">
                  <tbody>
                    <tr> 
                      <td class="headergrey" height="25" width="15">  </td>
                      <td class="headergrey" height="25" width="120">Contact:</td>
                      <td class="headergrey" height="25" width="15">  </td>
                    </tr>
                    <tr> 
                      <td width="15" class="news">  </td>
                      <td width="120" class="news"><div class="textrechts" align="right">###KONTAKT###</div>
                        <p class="textrechts"><strong>Form ></strong></p>
                      <td width="15" class="news">  </td>
                    </tr>
                  </tbody>
                </table>
                <table bgcolor="#ebebeb" border="0" cellpadding="0" cellspacing="0" height="90" width="150">
                  <tbody>
                    <tr> 
                      <td class="headergrey" height="25" width="15">  </td>
                      <td class="headergrey" height="25" width="120">News:</td>
                      <td class="headergrey" height="25" width="15">  </td>
                    </tr>
                    <tr> 
                      <td width="15" class="news">  </td>
                      <td width="120" class="news"><div class="textrechts" align="right">###NEWS###</div>
                        <p class="textrechts"><strong>Archiv ></strong></p></td>
                      <td width="15" class="news">  </td>
                    </tr>
                  </tbody>
                </table></td>
        </tr>
        <tr align="right"> 
          <td height="30"> </td>
          <td align="left" height="30"> </td>
          <td height="30"> </td>
        </tr>
      </tbody></table> </td>
    <td width="20"> 
      <table border="0" cellpadding="0" cellspacing="0" height="170" width="20">
        <tbody><tr>
          <td height="120"> </td>
        </tr>
        <tr>
          <td class="inaktiv" bgcolor="#e6e6e6" height="50"> </td>
        </tr>
      </tbody></table></td>
  </tr>
  <tr> 
    <td bgcolor="#5a5a5a" height="30" width="20"> </td>
    <td class="header" height="30" width="600"> </td>
    <td class="header" height="30" valign="bottom" width="250"> </td>
    <td class="header" height="30" width="20"> </td>
  </tr>
</tbody></table>
<!-- ###DOKUMENT### -->
</body>
</html>

Tja das ist jetzt ne gute Frage. Also valide ist der Code schon mal nicht. Ob sich die Fehler dann auch auf den Abstand auswirken, kann ich Dir so nicht sagen.
Hast du einen Link zur Live Version der Seite? Dann kann ich mir das dort direkt mal anschauen. Macht mehr Sinn wenn auch die Inhalte dabei sind.

Viele Grüße

Markus

Wenn du dir das mal anschaun willst kannst du das gern tun. Ich schreib dir morgen mal ne PM, wenn mal halbwegs alles steht. Wenn du dann Vorschläge hast wie man das ganze noch etwas eleganter und zudem valide gestalten kann, wäre ich dir sehr dankbar.

EDIT:

Ich habe mein Problem gefunden. Allerdings habe ich noch keine Lösung dafür.
Ich hab entdeckt, dass Typo aus irgendeinem Grund ein Spacer/Clear.gif einsetzt.
Hier der Code den Typo für die Seite generiert:

<!--  Header: [begin] -->
			<div class="csc-header csc-header-n1"><h1 class="csc-firstHeader">List of subpages:</h1><br /><img src="clear.gif" class="spacer-gif" alt="" title="" border="0" height="5" width="1" /><br /></div>
		<!--  Header: [end] -->

Allerdings tut er das bei einer Seite die ich unverändert gelassen habe nicht.

<!-- Header: [begin] -->
			<div class="csc-header csc-header-n1"><h3 style="text-align: center;" class="csc-firstHeader">Impressung - Disclaimer</h3></div>
		<!--  Header: [end] -->

Hast du vielleicht ne Ahnung wie ich ihm mitteile, dass er wieder die letztere Variante verwenden soll? Für Hilfe wäre ich dankbar.

EDIT 2:
Juhuuuu, ich habs gefunden. Allerdings durch mehr oder weniger reinen Zufall. Man muss sich im Constant Editor mal den Headerwrap anschauen. Wenn da ein nicht gewollter Break drin steht sollte man den rausnehmen.

Allerdings bleibt eines ungeklärt und fällt wohl zu den X-Akten: Warum dachte Typo ich will da ein Break haben? Nobody knows.

I'm happy now.
Danke für die Lösungsansätze