ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.
I don't know if this will work with your browser combination...
If you first paste your virgin HTML into Notepad and then "select all" and copy out of Notepad, that usually gets rid of underlying "pretty code" formatting that HTML editors include to [rich-text] color code your markup. However, the problem is that eBay also uses a "pretty code" rich-text editor on their markup box. So we see problems in some browsers when pasting from one rich-text HTML view to another rich-text HTML view, where hard spaces may be introduced.
It's not just eBay. Any other platform that allows text editing may use the same open source editor core (CKE, TinyMCE, etc) that then relies on the code-editing features built into the browser. If you change browsers, you'll probably see your HTML attributes shift around to suit that browser's preferences, and that is why different browsers perform differently in eBay's editor.
It appears to me as if Firefox has overcome the issue. Over the years, I've seen differences in how that browser interacts with the rich-text-editor, and specifically see differences in the way it presents the source view of pages. It used to show me all hard spaces, but in the screenshot I provided, it displayed the text hard spaces as but did not show me the hard spaces in your stylesheet. Yet, character examination showed hard spaces (alt-0160) were also embedded in your styles.
As for fixing what is already broken, I wrote a filter for you to strip out those hard spaces. The link will take you to the Active Content Sandbox tool and will prepopulate the tool with your test listing and your custom filter.
The filter will look for space-like characters at the front of lines (tab, space, hard-spaces) and will replace those with nothing. It will then look for the same characters (or runs of characters) within the code and will replace those with a single soft space.
You can reformat other listing codes by changing the item number in the top box of the Sandbox tool, or you can paste your entire HTML in the top box, and then click the SCAN button. Your results will be found in the "Filtered" tab, where you can preview to make sure the videos and other elements are correctly formatted.
The extensive hashing of the filter means that the default scans that are normally run by the tool may not find results. But there is one "violation" you will need to fix. The link at the bottom is missing the target attribute, which you should add as shown below.
<div style="text-align: center;"> <a href="https://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=wolfesmetalfabrication" target="_blank">Check out the rest of Our Great Feedback!</a> </div>
I was wondering why the extra styles were hard-coded into the video elements. The max-width:480px is already in the stylesheet. Perhaps when the styles were broken, the code was not being applied and required you to manually add them again since the default image from YouTube is 480 wide and had forced that width.
You shouldn't need to hard-code the element styles now that the stylesheet is repaired.
This is how the video code normally appears when created (I'll break it apart a little so it can be read more easily):
<!-- BEGIN LINKED VIDEO -->
<div class="ytvideo">
<a target="_blank" href="https://www.youtube.com/embed/rt07pLebQwQ?rel=0">
<img src="https://img.youtube.com/vi/rt07pLebQwQ/0.jpg"></a>
<p class="yt_hd">Dent Repair, Metal Bumping & Shrinking with a Wolfes Metal Fabrication "Easy Shrink"™ Shrinking Disc - YouTube</p>
<p class="yt_ft">Video will open in a new window
Using the eBay App? Paste link into a browser window:</p>
<span class="yt_tag" style="display:none">[isdntekvideo]</span>
<input class="yt_inp" type="text" value="https://www.youtube.com/embed/rt07pLebQwQ?rel=0">
</div>
<style> .ytvideo * { box-sizing:border-box; }
.ytvideo { margin:.5em auto 40px auto; max-width:480px; font-family:arial; text-align:center; position:relative; min-height:120px; background-color:#555; }
.ytvideo p { position:absolute; margin:0; color:white; background-color:rgba(0,0,0,.5); }
.ytvideo .yt_hd { font-size:16px; width:100%; height:28px; line-height:28px; text-align:left; top:0; left:0; padding-left:10px; overflow:hidden; }
.ytvideo .yt_ft { font-size:12px; width:100%; bottom:0; left:0; }
.ytvideo img { display:block; max-width:100%; border:0; }
.ytvideo a:after { content:"\A0\25BA"; position:absolute; width:60px; height:50px; left:0; top:0; right:0; bottom:0; margin:auto; border:0; border-radius:10px; color:white; background:rgba(0,0,0,.6); font-size:24px; line-height:50px; cursor:pointer; }
.ytvideo a:hover:after { background:#CC181E; }
.ytvideo .yt_inp { position:absolute; top:100%; left:0; width:100%; text-align:center; padding:.5em .2em; xfont-size:18px; border:0; color:white; background: rgba(0,0,0,.7); }
@media(max-device-width:960px){
.ytvideo { margin-bottom:60px; }
.ytvideo .yt_inp { padding:1em .2em; } } </style>
<!-- END LINKED VIDEO -->If you return to the default video code and still see a width issue in Chrome, please let me know.
I found 10 more hard spaces in your new code, all within the stylesheet at the end of some lines. I tested the "filtered" code and did not detect them there. Let me do some more testing.
Here is the link showing the 10 extra hard spaces. The filter was written to detect and remove those 10 hard spaces instead of replacing with a soft space.
Because the original eBay source is now gone, I can't go back and figure out if they were missed or reintroduced, or how to modify the original filter.
Take a look at the "Markup" window to find the 10 instances so that you will know where they occurred. Each is at the end of a line, meaning they connect to the front of the next line and void out the next line or "style rule". Those are all the styles that were affected. The "Filtered" tab removes those hard-spaces entirely, rather than replacing them with a soft space, so don't use this filter for anything else.
wolfesmetalfabrication wrote:Which eBay source are you talking about that is gone?
It still shows me that the test listing is up.
https://www.ebay.com/itm/223327504714
Yes, your new code is there and it looks like the listing is now completely repaired. My concern was that I no longer had access to the clobbered code because you have repaired it; thus, when I had missed one detail in the clobbered code, I had no way to determine how I could adjust the filter I had given you.
But no matter. I decided to take the compression algorithms from some of my other programs and create an online utility that would do the same thing. The utitility will have a plain text input box and will then be able to strip off the leading spaces and hard spaces and reduce space-like characters to a single soft space. It would also reduce text for File Exchange. I think I should be able to post that tool tonight.
That would allow you to paste code from your rich-text tool into the plain text box, click a button to align and purge, and then copy/paste the new code back into your listing. Hopefully, it will also be able to process clobbered code.
wolfesmetalfabrication wrote:It would just be nice if somehow ebay could incorporate a more user friendly method of using HTML in their listing editor, or just a plain upload HTML file link where it (or the browser) couldn't even touch or alter the code.
eBay's File Exchange will accept a spreadsheet upload so that the browser is never involved. However, the description for the spreadsheet must have all linebreaks removed so that the description is one long run of code.
Here is the online code stripper.
http://www.isdntek.com/listingtools/compress.htm
The button called "Left Align" should do what you need.
All the tools that @berserkerplanet and I have offered utilize RegEx (Regular Expression) substitutions, so they are all very powerful and should all be able to do pretty much the same thing.
