HTML Ebay stellt HTML Code für Firefox und IE anders da?

Maggiefix

Ensign
Registriert
Juli 2008
Beiträge
226
Hallo CB-Community,

ich habe mich in letzter Zeit etwas mit HTML und CSS beschäftigt und schon kleinere Fortschritte erzielen können. Ich war nun soweit mir ein eigenes Template für meine Ebay Auktionen zu erstellen. Das hatte ich mit Dreamweaver auch super hinbekommen, anschleißend den Quelltext für Ebay enstprechend entkernt (Head, Body Tags entfernt, sowie den Doctype, CSS nur auf ID bezogen um den Ebay Body nicht zu stören). Nun hatte ich mich gefreut, das ganze sah genauso aus wie geplant, jedenfalls im Firefox.

Als ich es mir aber im Internet Explorer angeschaut hatte, kam die Ernüchterung. Das ganze war nicht mehr zentriert sonder linksbündig und die sorgsam positionierten (float-left) Divs waren irgendwo aber nicht da wo sie hingehörten.
Sah die Webseite ordentlich wenn ich sie als Vorschau im IE aus Dreamweaver exportierte, und auch wenn ich sie auf meinen Webspace hochgeladen hatte, konnte ich sie so wie beabsichtigt im IE (Version 8) betrachten.

Noch ein weiteres Phänomän:

Wenn ich mein Angebot mit dem IE über ebay suche und dann aus der Liste auswähle und öffne, wird das Angebot faslch dargestellt. Kopiere ich aber die Adresse aus dem Firefoxfesnster, des Angebots und füge sie im IE ein, wird die Seite auch vom IE richtig dargestellt. Was mich zu dem Schluss bringt, das Ebay irgendwas am Quelltext verändert wenn es den IE bemerkt, was bei mir leidier zu sehr unschönen Darstellungsfehlern führt.
Ich hoffe ich ahbe euch nicht mit diesem Wall of Text erschlagen, vieleicht findet sich ja unter euch ein Experte der mir einen Tipp geben kann, ich weiß nicht mehr weiter!

Hier der Link zu dem Angebot:

Link aus Firefox
# Richtige Darstellung sowohl in FF als auch im IE

Link aus Internet Explorer
# falsche Dartsellung im IE, richtige Darstellung im FF

Seite auf Webspace
#Richtige Darstellung im IE als auch im FF

Und zum Schluss nochmal ein Screenshot, von der fehlerhaften Darstellung im IE:
Beispiel.PNG


Hier der Quelltext:

HTML:
<style type="text/css">
#wrapper {
	height: 1900px;
	width: 800px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-image: url(http://juliuspetri.de/Background/Rahmen_neu2.png);
	background-repeat: repeat-y;
	float: none;
}
#header {
	float: none;
	height: auto;
	width: 740px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
.wichtig {
	font-size: 18px;
	font-weight: bold;
	color: #06C;
}
.wichtig2 {
	font-size: 18px;
	font-weight: bold;
	color: #F00;
}
#logo {
	text-align: center;
}
#navigation {
	float: none;
	height: 50px;
	width: 730px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-image: url(http://juliuspetri.de/Background/leiste.png);
}
#navigation a {
	display: block;
	float: left;
	height: 29px;
	width: 110px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	text-indent: -9999px;
	margin-right: 5px;
}
#navigation #nav1 {
	background-image: url(http://juliuspetri.de/Navigation/Beschreibung1.png);
	background-repeat: no-repeat;
}
#navigation #nav1:hover {
	background-image: url(http://juliuspetri.de/Navigation/Beschreibung2.png);
	background-repeat: no-repeat;
}
#navigation #nav2 {
	background-image: url(http://juliuspetri.de/Navigation/Ablauf1.png);
	background-repeat: no-repeat;
}
#navigation #nav2:hover {
	background-image: url(http://juliuspetri.de/Navigation/Ablauf2.png);
	background-repeat: no-repeat;
}
#navigation #nav3 {
	background-image: url(http://juliuspetri.de/Navigation/Bezahlung1.png);
	background-repeat: no-repeat;
}
#navigation #nav3:hover {
	background-image: url(http://juliuspetri.de/Navigation/Bezahlung2.png);
	background-repeat: no-repeat;
}
#navigation #nav4 {
	background-image: url(http://juliuspetri.de/Navigation/Service1.png);
	background-repeat: no-repeat;
}
#navigation #nav4:hover {
	background-image: url(http://juliuspetri.de/Navigation/Service2.png);
	background-repeat: no-repeat;
}
#navigation #nav5 {
	background-image: url(http://juliuspetri.de/Navigation/Special1.png);
	background-repeat: no-repeat;
}
#navigation #nav5:hover {
	background-image: url(http://juliuspetri.de/Navigation/Special2.png);
	background-repeat: no-repeat;
}
#navigation #nav6 {
	background-image: url(http://juliuspetri.de/Navigation/Haftung1.png);
	background-repeat: no-repeat;
}
#navigation #nav6:hover {
	background-image: url(http://juliuspetri.de/Navigation/Haftung2.png);
	background-repeat: no-repeat;
}
#content {
	float: none;
	width: 736px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	clear: both;
	position: relative;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
}
#content .boxleft {
	float: left;
	height: 230px;
	width: 340px;
	background-image: url(http://juliuspetri.de/Background/Textfeld.jpg);
	background-repeat: no-repeat;
	margin: 10px;
	padding-top: 7px;
	padding-left: 10px;
}
#content .imgright {
	float: left;
	height: 237px;
	width: 350px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	text-align: center;
}
.boxleft h2 {
	line-height: 1px;
	font-size: 24px;
}
#footer {
	float: none;
	width: 740px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
</style>
<div id="wrapper">
  <div id="header">
    <div id="logo"><img src="http://juliuspetri.de/Background/logo.png" width="393" height="168" alt="Maggies Goldshop"/></div> <!-- Div welches Logo Enthält -->
  <img src="http://juliuspetri.de/Background/WOW-Schrift.png" width="738" height="41" alt="Service-Slogan" />
    <div id="navigation">
    <a id="nav1" href="#m1">Beschreibung</a> 
    <a id="nav2" href="#m2">Ablauf</a>
    <a id="nav3" href="#m3">Bezahlung</a> 
    <a id="nav4" href="#m4">Service</a> 
    <a id="nav5" href="#m5">Special</a> 
    <a id="nav6" href="#m6">Haftung</a>
    </div> <!-- Ende Navigation -->
  </div> <!-- Ende header -->
  <div id="content">
    <div class="boxleft">
      <h2 align="left"><a name="m1" id="m1"></a>Beschreibung</h2>
      <p>Es handelt sich bei dieser Auktion um 10000 Gold aus dem Spiel World of Warcraft, auf dem offizielen, deutschen Server <strong>Lothar </strong>für<strong> Allianz </strong>und<strong> Horde</strong> .</p>
      <p> Angebotenes Gold ist <strong>immer</strong> lagernd, dies garantiert euch eine Lieferung in <strong>wenigen</strong> Stunden.      <strong>Wunschmengen</strong> sind auch lieferbar: 1k bis 500k alles kein Problem!</p>
    </div>
    <div class="imgright">
      <p><img src="http://juliuspetri.de/Background/Lothar.png" width="300" height="132" alt="Lothar" /></p>
      <p class="wichtig">2000000 Gold im Lager</p>
      <p><span class="wichtig">Allianz </span>und<span class="wichtig"> <span class="wichtig2">Horde</span></span></p>
    </div>
    <div class="imgright"> <strong><u><img src="http://juliuspetri.de/Imgaes/gold.jpg" width="181" height="114" alt="Gold" /></u></strong>
      <p><strong><u>Liefermethoden </u></strong> </p>
      <p>Via Gildenbank</p>
Face to Face über das Handelsfenster    </div>
    <div class="boxleft">
      <h2><a name="m2" id="m2"></a>Ablauf</h2>
      <p>Nach Geldeingang liefere ich das Gold an euren Char, was in der Regel nicht länger als ein <strong>paar Minuten</strong> dauert! Eine           schnellstmögliche Lieferung ist garantiert wenn ihr euch vorher per <strong>Messenger</strong> bei mir meldet, siehe <strong>Kontaktdetails </strong></p>
<p><strong>Hordler</strong> erhalten ihr Gold über das neutrale Auktionshaus, die Gebühr übernehme natürlich ICH!</p>
    </div>
    <div class="boxleft"> 
      <h2><a name="m3" id="m3"></a>Bezahlung
      </h2>
      <p><strong>Überweisung:</strong> 5 % mehr Gold      </p>
      <p><strong>Paypal:</strong> Erstkäufer maximal 20 k      </p>
      <p><strong>Hinweis</strong>: Das Gold wird mit einer Deutschen IP-Adresse übergeben. Es handelt sich um selbstproduziertes Gold.</p>
    </div>
    <div class="imgright">
      <p><img src="http://juliuspetri.de/Imgaes/paypal_logo.gif" width="317" height="56" alt="Paypal" /><img src="http://juliuspetri.de/Imgaes/ueberweisung.gif" width="289" height="60" alt="Ueberweisung" /></p>
<p>Der Goldkauf ist bei <strong>mir </strong>eine <strong>sichere Sache</strong>, da ich auf dem Server soziale Kontakte pflege <strong> </strong>und mich verhalte wie ein normaler Spieler es tun würde, so wie es meine Kunden auch sind.</p>
</div>
    <div class="imgright">
      <p><img src="http://juliuspetri.de/Imgaes/service.jpg" width="208" height="123" alt="Service" /></p>
      <p>Auch individuelle Angebote und Rabatte möglich. Wenn sie zum Beispiel nur 15 € ausgeben möchten, mache ich ein Angebot. Ich freue mich auf <strong> ihre Anfragen</strong>.</p>
    </div>
    <div class="boxleft">
      <h2><a name="m4" id="m4"></a>Service</h2>
      <p>Wollen sie doch lieber mehr/weniger Gold kaufen, oder haben sie noch Fragen,dann kontaktieren sie mich unter:</p>
      <p><strong> &nbsp;&nbsp;&nbsp;Mail:</strong> julius.petri@hotmail.de (oder über Ebay)</p>
      <p><strong>&nbsp;&nbsp;&nbsp;ICQ:</strong> 272756071</p>
      <p><strong>&nbsp;&nbsp;&nbsp;Tel:</strong> 01754444640</p>
      <p>&nbsp;</p>
    </div>
    <div class="boxleft">
      <h2><a name="m5" id="m5"></a>Special</h2>
      <p><u><strong>Kunden werben Kunden</strong></u></p>
      <p>Jeder Kunde der einen anderen Kunden wirbt, welcher mindestens 10k kauft, bekommt seinerseits 10k von mir als Prämie geschenkt.</p>
    </div>
    <div class="imgright"><img src="http://juliuspetri.de/Imgaes/Gnom.jpg" width="236" height="181" alt="Gnom" /></div>
    <div class="imgright"> <img src="http://juliuspetri.de/Imgaes/Blizzard_800.jpg" width="246" height="119" alt="Blizzard" />
      <p>Ich   weise ausdrücklich darauf hin das, dass erwähnte Zahlungsmittel nicht   real existent ist, und alle Rechte an diesen Artikeln          den jeweiligen   Rechteinhabern (Blizzard) gehören.</p>
    </div>
    <div class="boxleft">
      <h2 align="left"><a name="m6" id="m6"></a>Haftung</h2>
      <p align="left">Ihr bietet hier auf eine   Dienstleistung die sich auf das beschaffen von virtuellen Gegenständen   bzw. virtuellen Zahlungsmitteln             in Online-Rollenspielen (World of   Warcraft) bezieht. Ich verkaufe nicht die erwähnten virtuellen   Zahlungsmittel, ich verkaufe eine                     Dienstleistung.</p>
      <p align="left">&nbsp;</p>
  </div></div> <!-- Ende content --><!-- Ende footer -->
</div> <!-- Ende wrapper -->

# Das Ist der Quelltext so wie man ihn, in Ebay in das Auktionsfester kopieren soll. Alos ohne Head und Body Tag, bzw. Doctype!
 
Zuletzt bearbeitet:
Hab mir jetzt nicht die eBay Suppe da angeschaut doch ich denke ...

..es scheint so also ob ebay einige Deklarationen in deine css überschreibt.
Das einzige was du versuchen kannst ist, jeder Klasse für jede Definition das
!important; zu benutzen, eventuell geht es dann.

Heisst:
#test { margin-left: auto !Important; margin-right: auto !Important }

Viel Arbeit!, einfach erst mit 1-2 Klassen testen obs überhaupt geht.
 
Oh man das ist ja nervig. Und wieso betrifft das dann nur den IE ?

Edit#1.


Hey da fällt mir ein, könnte ich das nicht umgehen indem ich mein CSS extern einbinde, also auf einen eigenen Webspace hochlade ?
 
Zuletzt bearbeitet:
Keine Ahnung, wahrscheinlich hat eBay da was vergessen umzuschreiben, falsche css, JavaScript welches eine IE Version nicht richtig erkennt...kann an vielen Sachen liegen.
Schalte mal JavaScript bzw. Scripting im IE komplett ab und surf dann mal die Seite an..

EDIT:
Versuche es doch mal, auch würde ich versuchen selbst eine Weiche für die IEs einzubauen
 
Zuletzt bearbeitet:
Okay, das mit Scripting deaktivieren hat nicht geklappt. ich werde jetzt versuchen, dass ganze extern einzubinden.
Auch der !Important befhel hat nichts genützt.

Die Probleme eine Weiche:

1. Wie mache ich dass
2. unterstützt Ebay sowas überhaupt?
3. Ich kann es ja garnicht testen, denn die Fehler kommen nur wenn ich den Quellcode dirket bei Ebay Liste, wie soll ich also überhaupt eine Funktionstücjtige Version erstellen ^^.
 
Ich weiß es nicht, ich nutze eBay nicht. Aber wie haben es die anderen gemacht? gibt es da eventuell ein Forum wo du nachfragen könntest? vll. kann dir eBay selbst helfen.
 
Ich Frage schon im Ebay Forum nach, leider ist noch nichts konstruktives bei rausgekommen.
Ich finde auch nichts dazu im Internet ...
Ergänzung ()

So kleiner Nachtrag, ich glaube ich habe einen kleinen Fortschritt erzielen können.
Ich habe in Dreamweaver den Doctype in HTML 4.01 Transitional geändert, so wie ihn auch Ebay verwendet.
Der neue Quellcode wird jetzt in meinem IE richtig dargestellt. Aber bei dem Meiner Freundin IE 9 Beta (US Version) gibt es immernoch fehler aber nicht mehr solch dratische.

Könnte jmd vieleicht feedback geben wie es bei ihm im IE aussieht ?
 
Jeder Browser interpretiert CSS anders..
Das einzige was Du machen kannst wenn zum Beispiel IE 6 oder die Seiten total verhaut.. eine css extra nur für den IE6(nun auch 9) zu schreiben.

Ist auch gar nicht so schwer, einfach Browser starten und neuen CSS code schreiben, dann sowas hier:

HTML:
<!--[if lte IE 6]>
        <style type="text/css">
//Dein CODE nur für den IE 6
oder externe Datei einbeziehen:
        <link rel="stylesheet" href="www.deineadresse.de/css/ie6.css" type="text/css" charset="utf-8" />
    <![endif]--> 
<!--[if lte IE 9]>
        <style type="text/css">
//Dein CODE nur für den IE 9
oder externe Datei einbeziehen:
        <link rel="stylesheet" href="www.deineadresse.de/css/ie6.css" type="text/css" charset="utf-8" />
    <![endif]-->

Diese Kommentare können "nur" die IE´s lesen, andere Browser ignorieren das.
 
Zuletzt bearbeitet:
Naja, wenn der IE8 schon komplett alles verhaut der FF und Opera aber alles korrekt darstellen dann ist nicht die CSS daran schuld sondern die Doctype welche die neueren IEs in den Quirks Modus versetzt hat, so sah das ganze dann auch aus.
 
Ja aber warum denn Quirks Modus, ich habe ja den Quelltext jetzt ins passende Doctype HTML 4.01 Transitional konvertiert, jedenfalls ist das der Quellcode den Ebay benutzt. Es kann doch aber nicht sein, dass jetzt der IE 9 spinnt wenns der 8er macht und FF . Und so kompliziert ist das ja auch nicht was ich da gemacht habe.
Irgendwie glaube ich das er die ganzen floatenen Divs nicht richtig handeln kann, oder das irgendwelche Abstände dazugemoogelt werden wo ich keine definiert habe.
 
Zurück
Oben