nicht angemeldet
Javascript fügt ungewollte Zeilenumbrüche ein
Hallo Leute,
ich bin nahe der Verzweiflung und bräuchte dringend eure Hilfe. Vorab, ich bin kein HTML Profi und habe den folgenden Inhalt meist aus einer Kombination von Lehrbüchern und einer Eigenkreativ entworfen.
Es handelt sich um eine Produktbeschreibung für einen bei eBay angebotenen Artikel meines Arbeitgebers.
Diese Beschreibung enthält ein Javascript welches in einem definierten Bereich nebenstehende Thumbnails größer anzeigt.
Weiter unten in der Beschreibung werden Schlagwörter durch klicken auf diese detailliert beschrieben. Es öffnet sich quasi eine neue Tabelle durch klicken.
-> Zu meinem Problem:
Sobald diese Beschreibung einige Stunden in eBay als Beschreibung steht, schleichen sich automatisch Zeilenumbrüche (<br> Tags) hinter die Bilder und die Detailbeschreibung ein, sodass das komplette Layout ungewollt verlängert wird.
Ich hatte bereits diverse "Displayoptionen" angewandt, ohne jeden erfolgt.
-> Hier ein Teil des HTML Quellcodes mit den automatisch eingefügten Zeilenumbrüchen...
<link rel="stylesheet" href="http://www.angebote.mhv-mehl.de/Andreas/Design/ss-01-07-08-2.css" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Mont Blanc Ready Fit 23 747023</title> <script type="text/javascript"> function details(layer) { if (document.getElementById(layer).style.display == 'none') { try { document.getElementById(layer).style.display='table-row'; } catch(e) { document.getElementById(layer).style.display='inline'; } } else document.getElementById(layer).style.display = 'none'; } function ondetail (detail) { if (document.getElementById){ for(var i=1; i<7; i++){ if ("detail" + i == detail){ try { document.getElementById(detail).style.display='table-row'; } catch(e) { document.getElementById(detail).style.display='inline-table'; } } else document.getElementById("detail" + i).style.display = 'none'; } } } var a = "<marquee>Für eine Detailansicht klicken Sie bitte auf das gewünschte Bild</marquee>"; function showtip1() { a = document.getElementById("toolbox1"); a.style.visibility="visible"; } function hidetip() { a.style.visibility="hidden"; } function zubehoerVisible(zubehoer) { if(document.getElementById(zubehoer).style.display == 'none'){ try { document.getElementById(zubehoer).style.display='table-row'; } catch(e) { document.getElementById(zubehoer).style.display='block'; } } else document.getElementById(zubehoer).style.display = 'none'; } </script> <table class="Tabelle-2" border="1" width="100%"> <tbody><tr> <td style="border: medium none ; padding-left: 10px; padding-top: 10px;" colspan="3" nowrap="nowrap"><p id="Linie" align="left">Mont Blanc Relingträger Ready Fit 22</p></td> </tr>
<tr>
<!--Bildergalerie-->
<td style="border: none ; padding-top: 20px;" valign="top"> <table class="Tabelle-2" width="35%">
<tbody><tr id="detail1" align="center"> <td style="border: none ;"><img src="http://www.angebote.mhv-mehl.de/Andreas/Montblanc/Dachtraeger/Rf/747022/747022-1small.jpg" height="240" width="350"></td> </tr>
<tr id="detail2" style="display: none;" align="center"> <td style="border: none ;"><img src="http://www.angebote.mhv-mehl.de/Andreas/Montblanc/Dachtraeger/Rf/747023/747023-2big.jpg" height="240" width="350"><br><br><br><br></td> </tr> <tr id="detail3" style="display: none;" align="center"> <td style="border: none ;"><img src="http://www.angebote.mhv-mehl.de/Andreas/Montblanc/Dachtraeger/Rf/747023/747023-3big.jpg" height="240" width="350"><br><br><br><br></td> </tr>
</tbody></table>
</td> <!--Bildergalerie geschlossen-->
<!--Bildergalerie2--> <td style="border: none; padding-top: 20px;" align="left" valign="top" width="10%"> <table class="Tabelle-2"> <tbody><tr> <td style="border: none;" class="detail" onMouseOver="style.cursor='pointer'; ondetail('detail2')" onMouseOut="ondetail('detail1');" align="center"><a href="http://www.angebote.mhv-mehl.de/Andreas/Montblanc/Dachtraeger/Rf/747023/747023-2big.jpg" target="_blank"><img src="http://www.angebote.mhv-mehl.de/Andreas/Montblanc/Dachtraeger/Rf/747023/747023-2small.jpg" height="35" width="50"></a></td>
<td style="border: none;" class="detail" onMouseOver="style.cursor='pointer'; ondetail('detail3')" onMouseOut="ondetail('detail1');" align="center"><a href="http://www.angebote.mhv-mehl.de/Andreas/Montblanc/Dachtraeger/Rf/747023/747023-3big.jpg" target="_blank"><img src="http://www.angebote.mhv-mehl.de/Andreas/Montblanc/Dachtraeger/Rf/747023/747023-3small.jpg" height="35" width="50"></a></td> </tr> </tbody></table> </td>
<!--Bildergalerie2 geschlossen-->
<!--Details--> <td style="border: medium none ;" align="left" valign="top" width="55%"> <table class="Tabelle-2"> <tbody><tr> <td style="border: medium none ; padding-left: 10px;" align="left" nowrap="nowrap" valign="top"> <p id="Oberpunkt">Technische Daten:</p> <table style="border: medium none ;" width="100%">
<tbody><tr class="normal"> <td style="border: medium none ;" cellspacing="2" nowrap="nowrap" width="150"><b>Art-Nr.:</b></td> <td style="border: medium none ; padding-left: 10px;" colspan="2" cellspacing="2" width="100%">747023</td>
</tr> <tr class="normal"> <td style="border: medium none ;" cellspacing="2" nowrap="nowrap" width="150"><b>max. Zuladung:</b></td> <td style="border: medium none ; padding-left: 10px;" colspan="2" cellspacing="2" width="100%">100 Kg (je nach max. Dachlast)</td> </tr> <tr class="normal"> <td style="border: medium none ;" cellspacing="2" nowrap="nowrap" width="150"><b>Eigengewicht:</b></td>
<td style="border: medium none ; padding-left: 10px;" colspan="2" cellspacing="2" width="100%">4,5 Kg</td> </tr> <tr class="normal"> <td style="border: medium none ;" cellspacing="2" nowrap="nowrap" width="150"><b>Bauhöhe:</b></td>
<td style="border: medium none ; padding-left: 10px;" colspan="2" cellspacing="2" width="100%">150 mm</td>
</tr> <tr class="normal"> <td style="border: medium none ;" cellspacing="2" nowrap="nowrap" width="150"><b>Material (Tragrohr):</b></td> <td style="border: medium none ; padding-left: 10px;" colspan="2" cellspacing="2" width="100%">Stahl (Standard-Vierkant)</td> </tr>
<tr class="normal"> <td style="border: medium none ;" cellspacing="2" nowrap="nowrap" width="150"><b>Tragrohrlänge:</b></td> <td style="border: medium none ; padding-left: 10px;" colspan="2" cellspacing="2" width="100%">120 cm</td> </tr>
<tr class="normal">
<td style="border: medium none ;" cellspacing="2" width="150"><b>Garantie:</b></td> <td style="border: medium none ; padding-left: 10px;" colspan="2" cellspacing="2" width="100%">3 Jahre</td>
</tr>
</tbody></table> <table> <tbody><tr style="padding-bottom: 10px;"> <td style="border: medium none ;" align="left" nowrap="nowrap" valign="top"> <p id="Oberpunkt">Lieferumfang:</p> <p style="padding-left: 10px;"><span class="normal">
1 Satz Dachträger bestehend aus:<br>
4 Stützfüßen (inkl. Kunststoffschlösser)<br> 2 Stahltragrohren<br>
- Befestigungsmaterial</span></p>
</td> </tr> </tbody></table> </td> <!--Details geschlossen-->
</tr>
</tbody></table> </td>
</tr> </tbody></table> </td> </tr>
</tbody></table>
<table border="0" width="100%">
<tbody><tr> <td colspan="3" style="padding-top: 10px;" width="100%"> <p id="Oberpunkt">Detailbeschreibung:</p>
<table style="padding: none;" border="0" width="100%"> <tbody><tr onClick="javascript:details('99-8');"> <td class="Liste-3" cellspacing="2" cellpadding="0" onMouseOver="this.className='Liste-4'; style.cursor='pointer';" onMouseOut="this.className='Liste-3';" width="1">+</td> <td colspan="2" class="Liste-1" cellspacing="2" cellpadding="0" onMouseOver="this.className='Liste-2'; style.cursor='pointer';" onMouseOut="this.className='Liste-1';" width="100%">einfache Befestigung</td> </tr>
</tbody></table>
<table width="100%"> <tbody><tr id="99-8" style="display: none;">
<td class="Beschreibung-2" cellspacing="2" cellpadding="15" colspan="2" width="100%"><p class="Beschreibung-2">Der Träger wird in vollkommen vormontiertem Zustand geliefert. Der Relingträger wird auf Ihre Reling gesetzt und mittels Schnellbefestigungssystem "Twist&Slide" ohne Montagewerkzeug an den vom Fahrzeughersteller vorgesehenen Punkten befestigt. Eine Montageanleitung finden Sie <a href="http://www.montblanc.se/attachment/151273-6.pdf" target="_blank">hier</a>.</p><br><br><br><br></td>
</tr> </tbody></table> <table border="0" width="100%"> <tbody><tr onClick="javascript:details('99-2');"> <td class="Liste-3" cellspacing="2" cellpadding="0" onMouseOver="this.className='Liste-4'; style.cursor='pointer';" onMouseOut="this.className='Liste-3';" width="1">+</td>
<td colspan="2" class="Liste-1" cellspacing="2" cellpadding="0" onMouseOver="this.className='Liste-2'; style.cursor='pointer';" onMouseOut="this.className='Liste-1';" width="100%">Verkratzungshemmung</td>
</tr> </tbody></table>
<table width="100%"> <tbody><tr id="99-2" style="display: none;"> <td class="Beschreibung-2" cellspacing="2" cellpadding="15" colspan="2" width="100%"><p class="Beschreibung-2">Alle Befestigungsteile die direkten Kontakt mit Fahrzeug und Lack haben, sind vollständig gegen Verkratzungen gummiert. Bei korrekter Montage sind, aufgrund der starken Gummierung, Verkratzungen ausgeschlossen.</p><br><br><br><br><br></td> </tr></tbody></table>
Es werden laufend Zeilenumbrüche eingefügt.
Insgesamt habe ich mehrere Stunden in diesem Forum als auch in den SELFHTML Beschreibungen selbst gesucht, jedoch leider keine Anhaltspunkte gefunden woran es liegen könnte.
Es wäre sehr nett, wenn Ihr euch den Quelltext ansehen könntet und mir schildern könntet, woran es liegen könnte.
Vielen Dank
Mfg Andreas Bartel
-
Hallo,
Sobald diese Beschreibung einige Stunden in eBay als Beschreibung steht, schleichen sich automatisch Zeilenumbrüche (<br> Tags) hinter die Bilder und die Detailbeschreibung ein, sodass das komplette Layout ungewollt verlängert wird.
In dem Quellcode sind br-Tags enthalten, die sind wohl verantwortlich. Wie sie dort hineinkommen, weiß ich nicht - wenn sie von dir sind, entferne sie, wenn nicht, dann nimmt wohl eBay Änderungen an deinem Code vor. Dabei kann dir höchstens der eBay-Support helfen.
Dein JavaScript hat damit jedenfalls nichts zu tun, das blendet ja nur bestehende Elemente ein und aus und kann den ursprünglichen HTML-Code nicht verändern.
Mathias
-
Hallo,
Sobald diese Beschreibung einige Stunden in eBay als Beschreibung steht, schleichen sich automatisch Zeilenumbrüche (<br> Tags) hinter die Bilder und die Detailbeschreibung ein, sodass das komplette Layout ungewollt verlängert wird.
In dem Quellcode sind br-Tags enthalten, die sind wohl verantwortlich. Wie sie dort hineinkommen, weiß ich nicht - wenn sie von dir sind, entferne sie, wenn nicht, dann nimmt wohl eBay Änderungen an deinem Code vor. Dabei kann dir höchstens der eBay-Support helfen.
Dein JavaScript hat damit jedenfalls nichts zu tun, das blendet ja nur bestehende Elemente ein und aus und kann den ursprünglichen HTML-Code nicht verändern.
Mathias
Hallo Mathias,
vielen Dank für deine schnelle Antwort.
Ich hatte auch bereits vermutet, dass es an eBay liegen könnte. Meine Vermutung habe ich dann jedoch wieder verworfen aus folgenden Gründen:- Sobald ich die Beschreibung in Firefox über die Dreamweaver Vorschau einige Male getestet habe, werden die Zeilenumbrüche ebenfalls eingefügt
- ein anderer eBay anbieter verwendet die selbe Technik um seine Artikelbeschreibung zu präsentieren. Bei ihm jedoch werden diese Zeilenumbrüche nicht eingefügt (auf Wunsch poste ich auch seinen Quelltext.)
Ich werde dennoch bei eBay anrufen und erfragen ob die mir weiterhelfen können, mit wenig Hoffnung auf Aussicht!
Daher wäre ich für deine und jede weitere Hilfe sehr dankbar.
Mfg
Andreas-
Hallo,
Sobald ich die Beschreibung in Firefox über die Dreamweaver Vorschau einige Male getestet habe, werden die Zeilenumbrüche ebenfalls eingefügt
JavaScript arbeitet auf Basis eines bestehenden, statischen (X)HTML-Dokumentes. Das parst der Browser, sodass ein Objektmodell entsteht und er es darstellen kann. JavaScript hat Zugriff auf dieses DOM.
Ein JavaScript kann nicht den Quellcode dieses zu Grunde liegenden Dokumentes verändern, nur das DOM, das aus dem Quellcode erzeugt wird. Die Frage ist also, wo die br-Elemente entstehen: Sind sie schon im ursprünglichen HTML-Code oder werden sie erst im Browser, während sich das Dokument im Arbeitsspeicher in Form des DOM befindet, dem Dokument hinzugefügt.
Wenn du in einem Browser auf "Quelltext anzeigen" o.ä. gehst, bekommst du in der Regel nicht das aktuelle serialisierte DOM zu sehen, sondern den ursprünglichen HTML-Code (bzw. zumindest das ursprüngliche serialisierte DOM).
Mathias
-