eBay

dopedossiercollection · ‎02-07-2018

Due to the ban of active conent I have tried to change my listing description to just pure HTML and CSS however when i implement the CSS into my HTML, the eBay listing ignores the CSS completly. I tried implementing it into the HTML directly and have also tried an external host to refernce in the listing and bring in my css file from google drive. nothing has worked... please can someone help, I even tried to call eBay but they didn't tell me anything and then just hung up. When running in my browser and CSS was an external stylesheet it worked perfectly, however now it does not want to work whatsoever. I'd really appreciate any help!

here is my code:

<!DOCTYPE HTML>
<main>
<head><img src="http://tutlink.ca/logo31.jpg" style="width:100%"></head>
<body>
</body>
<style type="text/css">
main {
min-width: 600px;
max-width: 648px;
padding: 50px;
margin: 0 auto;
background: #000000;
}
section {
display: none;
text-indent: 40px;
line-height: 1.5;
padding: 20px 0 0;
color: #ffffff;
border-top: 1px solid #ddd;
}
input {
display: none;
}

label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #fff;
border: 1px solid transparent;
}

label:hover {
color: #888;
cursor: pointer;
}

input:checked + label {
color: white;
border: 1px solid;
border-top: 2px solid red;
border-bottom: 1px solid white;
}

body {
background-color: black;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: block;
}
head{
size: 50%;
}

@media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}

@media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
</style>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Product Info</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">About DDC</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Shipping</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Contact Us</label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5" > Feedback</label>
<section id="content1">
content 1
</section>
<section id="content2">
description 2
</section>
<section id="content3">
description 3
</section>
<section id="content4">
description 4
</section>
<section id="content5">
description 5
</section>

</main>

shipscript · ‎02-07-2018

@dopedossiercollection

I agree with @partsaholic that code semantics may be part of the problem here.

On the surface, the code is fine and should run stand-alone in your browser. But once you use eBay's text editing box, your browser editing engine is going to treat that code differently. Additionally, because you are inserting a block of code into eBay's existing code structure, you won't have the full control you would have stand-alone.

On thing a browser rendering engine can do is remove code that normally appears in the document's <head> element and put it into the head element of the editing window. Then it looks fine on first preview, but is no longer carried with the body of the document that becomes your description. As for semantic conflicts, you have a <head> element that you are using for a purpose that is not consistent with the structural <head> element of an HTML web document.

I also usually recommend adding stylesheets after a hard element like <br> so that the browser editor will know the stylesheet belongs inside the body element and will not move it into the head element of the editing window. In your case, you have an image ahead of the stylesheet, and that will suffice.

But, that image is not hosted on a server with an SSL-certificate. So that means eBay will display your description one-click-away instead of directly in the description. You'll need to find a secure server to host that banner image.

Here are the minor changes to the code that might preserve the functionality you intended.

<!-- begin template -->
<div class="main">
<div class="head"><img src="http://tutlink.ca/logo31.jpg" style="width:100%"></div>
<div class="body">
</div>
<style type="text/css">
.main {
min-width: 600px;
max-width: 648px;
padding: 50px;
margin: 0 auto;
background: #000000;
font-family: arial; 
}
section {
display: none;
text-indent: 40px;
line-height: 1.5;
padding: 20px 0 0;
color: #ffffff;
border-top: 1px solid #ddd;
}
input {
display: none;
}

label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #fff;
border: 1px solid transparent;
}

label:hover {
color: #888;
cursor: pointer;
}

input:checked + label {
color: white;
border: 1px solid;
border-top: 2px solid red;
border-bottom: 1px solid white;
}

body {
background-color: black; 
margin:0;
padding:0;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: block;
}
.head{
size: 50%;
}

@media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}

@media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
</style>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Product Info</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">About DDC</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Shipping</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Contact Us</label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5" > Feedback</label>
<section id="content1">
content 1
</section>
<section id="content2">
description 2
</section>
<section id="content3">
description 3
</section>
<section id="content4">
description 4
</section>
<section id="content5">
description 5
</section>

</div>
<!-- end template -->

ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.

View Best Answer in original post

partsaholic · ‎02-07-2018

Were you hosting the CSS file on a secure server, or is it on the same host as image referenced in your template, which is not secure? There are some semantics issues with the HTML that may prevent eBay from rendering it, starting with the doctype declaration (remove it - eBay already declares this). The CSS is also enclosed in the layout, you may want to put it above it. You probably also want to replace the <main>, <head> and <body> tags with <div> tags and rewrite the CSS to style those, because ebay already uses <body> and <head> tags and it's probably just confusing the browser...

shipscript · ‎02-07-2018

@dopedossiercollection

I agree with @partsaholic that code semantics may be part of the problem here.

On the surface, the code is fine and should run stand-alone in your browser. But once you use eBay's text editing box, your browser editing engine is going to treat that code differently. Additionally, because you are inserting a block of code into eBay's existing code structure, you won't have the full control you would have stand-alone.

On thing a browser rendering engine can do is remove code that normally appears in the document's <head> element and put it into the head element of the editing window. Then it looks fine on first preview, but is no longer carried with the body of the document that becomes your description. As for semantic conflicts, you have a <head> element that you are using for a purpose that is not consistent with the structural <head> element of an HTML web document.

I also usually recommend adding stylesheets after a hard element like <br> so that the browser editor will know the stylesheet belongs inside the body element and will not move it into the head element of the editing window. In your case, you have an image ahead of the stylesheet, and that will suffice.

But, that image is not hosted on a server with an SSL-certificate. So that means eBay will display your description one-click-away instead of directly in the description. You'll need to find a secure server to host that banner image.

Here are the minor changes to the code that might preserve the functionality you intended.

<!-- begin template -->
<div class="main">
<div class="head"><img src="http://tutlink.ca/logo31.jpg" style="width:100%"></div>
<div class="body">
</div>
<style type="text/css">
.main {
min-width: 600px;
max-width: 648px;
padding: 50px;
margin: 0 auto;
background: #000000;
font-family: arial; 
}
section {
display: none;
text-indent: 40px;
line-height: 1.5;
padding: 20px 0 0;
color: #ffffff;
border-top: 1px solid #ddd;
}
input {
display: none;
}

label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #fff;
border: 1px solid transparent;
}

label:hover {
color: #888;
cursor: pointer;
}

input:checked + label {
color: white;
border: 1px solid;
border-top: 2px solid red;
border-bottom: 1px solid white;
}

body {
background-color: black; 
margin:0;
padding:0;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: block;
}
.head{
size: 50%;
}

@media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}

@media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
</style>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Product Info</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">About DDC</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Shipping</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Contact Us</label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5" > Feedback</label>
<section id="content1">
content 1
</section>
<section id="content2">
description 2
</section>
<section id="content3">
description 3
</section>
<section id="content4">
description 4
</section>
<section id="content5">
description 5
</section>

</div>
<!-- end template -->

ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.

markdown-media · ‎02-07-2018

Yeah, your code is a bit jacked up. Your code is placed inside eBay's existing page HTML, so your HTML, HEAD, & BODY tags are duplicates being placed within eBay's BODY tag, and are going to be ignored or confuse the browser.

You've got content outside of your body tag anyways, so it's all a mess.

Your code should include just the <style> tags at the top, followed by your content below it.

dopedossiercollection · ‎02-07-2018

Thank you @partsaholic and @shipscript, this information really helps and now I know eBay already has pre made tags I don't need to include. I'll clean up the code and the host of the picture, would google drive be a good place to host? Thank you once again, the eBay community does a better job than eBay itself.

shipscript · ‎02-07-2018

@dopedossiercollection

Others have reported using Google Drive for photos. When using an outside hosting service, the first thing I recommend is reviewing their terms of use to see if commercial use is allowed — using their service for your content delivery on a commercial website. Many services do not allow this activity. I looked through Google's terms of service and did not find that prohibition.

https://support.google.com/drive/answer/2450387?hl=en

https://www.google.com/intl/en/policies/terms/

ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.