cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Description HTML CSS Classes being Stripped Out so CSS Not Working

Apologies if this is a dupe, had trouble posting and not seeing posts in Forum so trying again.

==============================

I took a break from selling on eBay for quite a few years, getting started again and was making a basic template for my Listing Descriptions

 

I've seen helpful posts  like this one:

https://community.ebay.com/t5/Tools-Apps/Incorporate-CSS-into-HTML-listing/qaq-p/28228322

and feel like I'm on track but for some reason my code isn't kicking in.

 

When I view source on the listing it seems like the CSS is still there but it's stripping out all classes in the HTML. I tried adding Description via Chrome, Firefox & Edge. The preview never seems to show much formatting at all, not even font used - which the font ends up displaying about half the time once I click Revise It.

 

 

EXAMPLE CODE: (which if saved as .html file even without head and body will still load in Chrome / looks fine)

<br style="display: none;">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800" rel="stylesheet">
<style>
.funky-template {
  margin: 0;
  padding: 0;	
}
.funky-template * {
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    list-style: none;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
.funky-template p {
	font-size: 14px;
	font-weight: 400;
	line-height: 26px;
	color: #4b4b4b;
}
.funky-template img {
	max-width: 100%;
}
.funky-template .wrapper {
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
}
.clear {
    clear: both;
}
.funky-template main,
.funky-template banner,
.funky-template header,
.funky-template section,
.funky-template footer {
	width: 100%;
	float: left;
}
.funky-template header {
	padding: 20px 0;
	text-align: center;
}
.funky-template header a {
	display: inline-block;
}
.gif_img {
	display: none;
}
.title {
	padding: 0px;
  background: #f5f5f5;
	border: 1px solid #ddd;
}
a.title-logo {
    width: 20% !important;
    float: left;
}
.title-logo img {
  border-right: 1px solid #ddd;
	display: inline;
	float: left;
	padding: 0;	
}
.title h2 {
	display: inline;
	float: right;			
	font-size: 24px;
	font-weight: 600;
	color: #392955;
	padding-top: 75px;
	text-align: center;
	width: 80%;	
}
h3 {
  color: #392955;
  text-align: center;	
  font-weight: 700;
}
.temp_content {
	margin-bottom: 40px;
}
.temp_content h2 {
	padding: 12px 20px;
	background: #392955;
	font-size: 24px;
	font-weight: 600;
	color: #FFF;
}
.description {
	padding: 20px;
	border: 1px solid #ddd;
	border-top: none;
}
.description ul {
	margin-bottom: 20px;
}
.description ul li,
.tab-content ul li {
	padding: 5px 10px 5px 20px;
	background: #900;
	font-weight: 300;
	font-size: 14px;
	color: #4b4b4b;
}
.description ul li {
	background: transparent;	
}
.vertical-tabs {
	margin-bottom: 0px;
}
/* VERTICAL TABS*/
.vert_tab {
    width: 100%;
    float: left;
    position: relative;
}
.css-tab {
    display: none;
}
.vert_tab li {
    display: inline-block;
    float: left;
    width: 100%;
}
.vert_tab li label {
    padding: 15px;
    width: 250px;
    background: #392955;
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    color: #FFF;
    position: absolute;
    left: 1px;
    top: 1px;
    float: left;
    cursor: pointer;
}
.vert_tab li:nth-child(2) label {
    top: 52px;
}
.vert_tab li:nth-child(3) label {
    top: 103px;
}
.vert_tab li:nth-child(4) label {
    top: 154px;
}
.vert_tab li:nth-child(5) label {
    top: 205px;
}
.vert_tab li:nth-child(6) label {
    top: 256px;
}
.vert_tab li:nth-child(7) label {
    top: 307px;
}
.css-tab:checked + .tab-label {
    background: #FFF;
	color: #392955;
}
.tab-label:hover {
    background: #F2F2F2;
	color: #392955;
}
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3,
#tab4:checked ~ #tab-content4,
#tab5:checked ~ #tab-content5,
#tab6:checked ~ #tab-content6,
#tab7:checked ~ #tab-content7 {
    display: block;
}
.tab-content {
    padding: 30px 20px 30px 270px;
    width: 100%;
    border: solid 1px #ddd;
    display: none;
    text-align: left;
    float: left;
    min-height: 410px;
}
.tab-content h2{
	margin-bottom: 20px;
	text-align: center;
    font-size: 24px;
	letter-spacing: 1px;
    font-weight: 600;
    color: #392955;
}
footer {
	padding: 30px 20px;
	text-align: center;
	border-top: 1px solid #ddd;
}
@media only screen and (max-width: 1185px) {
  .title h2 {
    font-size: 20px;
	  padding-top: 25px;    
  }
}
@media only screen and (max-width: 840px) {
	.gif_img {
		display: inline-block;
	}
	/*tab-css*/
    .vert_tab li label {
        padding: 15px;
        width: 100% !important;
        position: static;
        background: #392955;
        text-align: left;
        border: none;
    }
    .vert_tab li{
        margin-bottom: 1px;
    }
    .tab-content {
        padding: 15px 20px;
    }
    .vert_tab li label:hover{
        background: #d8d8d8;
        border: none;
    }
    .css-tab:checked + .tab-label{
        border-bottom: 1px solid #ddd;
        background: #d8d8d8;
    }

}

@media screen and (max-width: 640px) {
  .title {
    padding: 0 10px;
  }
  a.title-logo {
      width: 100% !important;
      float: left;
  }
  .title-logo img {
    border-right: none;
    display: block;
    float: none;
    padding: 0;
    margin: 0 auto !important;	
  }
  .title h2 {
  	display: inline;
  	float: right;			
  	font-size: 20px;
  	font-weight: 600;
  	color: #392955;
  	padding-top: 15px;
  	text-align: center;
  	width: 100%;	
  }
}

</style>
<div class="funky-template">

			<div class="wrapper">       

				<section class="title">
					<a class="title-logo" href=""><img style="width: 200px;" src="https://i.ebayimg.com/00/s/MTAwMFgxMDAw/z/PQcAAOSwSixbQoGv/$_45.JPG" alt="Vintage 1990s / Early 2000s Pepe Jeans Low Rise Boot Cut wTags Size 28 / US 5/6"></a>
					<h2>Vintage 1990s / Early 2000s<br>
				    Pepe Jeans Low Rise Boot Cut w/Tags Size 28 / US 5/6</h2>
				</section>

				<section class="temp_content">
					<h2>PRODUCT DESCRIPTION</h2>                  

                    
					<div class="description">
            <div vocab="https://schema.org/" typeof="Product">
              <span property="description">
<h3>Vintage 1990&#39;s New with Tags Pepe Jeans Dark Blue Low Rise Boot Cut</h3>

<p>&nbsp;</p>
<p>5 Pocket Low Rise Boot Cut Pepe Jeans from the late 1990's. Bought a few pair back when and these were never worn.  Great Condition. </p>
<p>Flash used on some photos. Actual color will vary due to lighting, screens, etc.</p>


<p><br />
  <strong>STYLE:</strong> SEXY 61648<br />
  <strong>SIZE:</strong> 28 - <strong>US SIZE:</strong> 5/6<br />
  <strong>COLOR: RINSE</strong><br />
  <strong>MSRP:</strong> $68.00</p>

<p><strong>CONDITION:</strong> New with Tags</p>

<p><strong>MEASUREMENTS - TAKEN BY ME, MAY NOT BE 100% PERFECT</strong><br />
  <strong>WAIST - Edge to edge across back of waist</strong> - 15.5&quot;<br />
  <strong>INSEAM:</strong> 33&quot;<br />
  <strong>OUTSEAM:</strong> 41&quot;</p>
 
            </span>
          </div>
				</section>
				<section class="vertical-tabs">
					<ul class="vert_tab">
						<li>
							<input id="tab1" class="css-tab" name="tab" checked="" type="radio">
							<label for="tab1" class="tab-label">SHIPPING</label>
							<div id="tab-content1" class="tab-content">
								<h2>SHIPPING POLICY</h2>
								<p>Ships via Priority Mail within two business days.</p>

							</div>
						</li>
						<li>
							<input id="tab3" class="css-tab" name="tab" type="radio">
							<label for="tab3" class="tab-label">PAYMENT</label>
							<div id="tab-content3" class="tab-content">
								<h2>PAYMENT POLICY</h2>
								<p>Please pay via PayPal within 2 business days.</p>

							</div>
						</li>
						<li>
							<input id="tab4" class="css-tab" name="tab" type="radio">
							<label for="tab4" class="tab-label">RETURNS</label>
							<div id="tab-content4" class="tab-content">
								<h2>RETURNS POLICY</h2>
								<p>Returns not accepted.</p>

							</div>
						</li>
						<li>
							<input id="tab7" class="css-tab" name="tab" type="radio">
							<label for="tab7" class="tab-label">CONTACT US</label>
							<div id="tab-content7" class="tab-content">
								<h2>CONTACT US</h2>
								<p>Please contact us through eBay.</p>

							</div>
						</li>
					</ul>
				</section>
				<footer>
                    <table valign="center" align="center" width="100%"> <tbody><tr><td align="left"><p>Copyright &copy;  | Flowers Funky Stuff, All Rights Reserved</p></td>
                    </tr></tbody></table>
				</footer>
				<div class="clear"></div>
			</div>

</div>
Message 1 of 12
latest reply
11 REPLIES 11

Description HTML CSS Classes being Stripped Out so CSS Not Working

@flowers-funky-stuff

 

I see that the class attributes are missing from the HTML tags and the <link> to google fonts is missing from your active listing.  Are you using the Quick Listing tool? That tool automatically strips some elements, even whan adding the <br> tag to the top. If so, you should switch to the Advanced listing form to keep the external stylesheet and attributes.

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

Description HTML CSS Classes being Stripped Out so CSS Not Working

Ohhhhhhhh, thank you for the head's up. Didn't notice that when initially creating first listing and thought the thing I was switching to WAS the html editor.

 

It's loading more than before but styling still not kicking in for quite a bit - but am seeing the classes and the css in the page source now.

Message 3 of 12
latest reply

Description HTML CSS Classes being Stripped Out so CSS Not Working

@flowers-funky-stuff

Your current listing has a missing closing tag. I think it belongs here, but check your original code to verify:

 

					<div class="description">
            <div vocab="https://schema.org/" typeof="Product">
              <span property="description">
<h3>Vintage 1990&#39;s New with Tags Pepe Jeans Dark Blue Low Rise Boot Cut</h3>

<p>&nbsp;</p>
<p>5 Pocket Low Rise Boot Cut Pepe Jeans from the late 1990's. Bought a few pair back when and these were never worn.  Great Condition. </p>
<p>Flash used on some photos. Actual color will vary due to lighting, screens, etc.</p>


<p><br />
  <strong>STYLE:</strong> SEXY 61648<br />
  <strong>SIZE:</strong> 28 - <strong>US SIZE:</strong> 5/6<br />
  <strong>COLOR: RINSE</strong><br />
  <strong>MSRP:</strong> $68.00</p>

<p><strong>CONDITION:</strong> New with Tags</p>

<p><strong>MEASUREMENTS - TAKEN BY ME, MAY NOT BE 100% PERFECT</strong><br />
  <strong>WAIST - Edge to edge across back of waist</strong> - 15.5&quot;<br />
  <strong>INSEAM:</strong> 33&quot;<br />
  <strong>OUTSEAM:</strong> 41&quot;</p>
 
            </span>
          </div>
</div><!--add this closing tag -->
ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.
Message 4 of 12
latest reply

Description HTML CSS Classes being Stripped Out so CSS Not Working

You mean the /div, right? 

 

</div>

 

And not the 

<!.. ......

 

right?

Test your eBay search rank: https://ranktool.bid
Message 5 of 12
latest reply

Description HTML CSS Classes being Stripped Out so CSS Not Working

@cooltronix

 

Yes, I do mean  the </div> although I wrote the comment as a legitimate comment so that it would have no effect if added.  Smiley Wink

 

For the curious out there, a comment within HTML is structured like this:

<!-- comment -->

where the comment starts with a bracket, exclamation, and only two hyphens, followed by the comment itself on one or more lines, and then ending with only two hyphens and the closing bracket. 

Multiline comments also work:

<!--

First comment line

Second comment line

-->

 

It is important to note that no other multiple hyphens should be used inside a comment because they have meaning when used as pairs and it is possible to clobber the comment with the wrong combination of hyphens. This is an illegal comment because there are extra consecutive hyphens, and I see this a lot when looking at "designer" templates:

<!-----bad comment --->

 

This is ok because the middle hyphen is not a pair or consecutive hyphen, so does not carry special meaning:

<!-- comment - ok to use -->

 

Any other punctuation is ok to use inside the comment, so sometimes we see runs of symbols to delineate different sections of code.

<!-- =======bold comment========= -->

<!-- ~~~~~~~~fancy comment~~~~~~~~~ -->

<!--####### massive comment #######-->

 

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

Description HTML CSS Classes being Stripped Out so CSS Not Working

Thanks, just got confused for a second. I think Adsense has some "<!--" tags for some sort of function. I probably mixed something up. As usual 😉
Test your eBay search rank: https://ranktool.bid
Message 7 of 12
latest reply

Description HTML CSS Classes being Stripped Out so CSS Not Working

@shipscript  THANKS / ACK - lost that last div when shuffling a section. Thank you. Checked in Validator before and after and saw that did fix missing </div>.  Not seeing anything else that should kill layout but  CSS still not kicking in.  Spent last hour digging and still not seeing what else may be killing.  

Message 8 of 12
latest reply

Description HTML CSS Classes being Stripped Out so CSS Not Working

@flowers-funky-stuff

 

I see that your description code contains a lot of non-breaking space entities, but I don't see them in the stylesheet or between attributes in the HTML where they can create havoc:

&nbsp; <strong>OUTSEAM:</strong> 41"</p>
&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</div>

But that doesn't mean they aren't there. Sometimes they are not displayed as entities and are encoded (0160) and appear like a normal space (032).  Such codes will break the CSS and HTML attributes.

 

I would recommend that you return to, and copy, the original source for the CSS, left-align the code, and replace any consecutive spaces with a single space.

 

The non-breaking spaces would not matter much in the text (shown above), but would be a problem if they appeared inside a tag.  So you may also want to close up and re-space the attributes in these types of tags in the section where the problem manifests:

<input id="tab1" class="css-tab" name="tab" checked="" type="radio">
<label for="tab1" class="tab-label">SHIPPING</label>
<div id="tab-content1" class="tab-content">

It has been my experience that the newer browsers, when copying from a rich text source to eBay's rich text editor (the HTML box is rich text too, unfortunately), can convert space runs into hard spaces. So now I left-align all templates that I modify for others and remove all multiple spaces. 

 

 

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

Description HTML CSS Classes being Stripped Out so CSS Not Working

Let's work on the mobile summary while we are here. This is everything that has been included in the summary:

<div class="description">
<!-- begin mobile summary --> <div vocab="https://schema.org/" typeof="Product"> <div property="description"> <h3>Vintage 1990's New with Tags Pepe Jeans Dark Blue Low Rise Boot Cut</h3> <p>&nbsp;</p> <p>5 Pocket Low Rise Boot Cut Pepe Jeans from the late 1990's. Bought a few pair back when and these were never worn.&nbsp; Great Condition. </p> <p>Flash used on some photos. Actual color will vary due to lighting, screens, etc.</p> <p> <strong>STYLE:</strong> SEXY 61648<br> <strong>SIZE:</strong> 28 - <strong>US SIZE:</strong> 5/6<br> <strong>COLOR: RINSE</strong><br> <strong>MSRP:</strong> $68.00 </p> <p> <strong>CONDITION:</strong> New with Tags </p> <p> <strong>MEASUREMENTS - TAKEN BY ME, MAY NOT BE 100% PERFECT</strong><br> <strong>WAIST - Edge to edge across back of waist</strong> - 15.5"<br> <strong>INSEAM:</strong> 33"<br> <strong>OUTSEAM:</strong> 41"<br> </p> </div> </div>
<!-- end mobile summary --> </div>

This is what eBay extracted from that summary.  Not a bad guess:

5 Pocket Low Rise Boot Cut Pepe Jeans from the late 1990&apos;s. 
Bought a few pair back when and these were never worn.
Great Condition. SIZE: 28 -US SIZE: 5/6. STYLE: SEXY 61648.
Actual color will vary due to lighting, screens, etc.

The fact that eBay picked up only 250 of the 800 allowed characters within the mobile summary, and the fact that they picked phrases they wanted, suggests the summary codes did not actually work and eBay did their own thing.

 

Here is eBay's instruction page for using the summary tags:

https://pages.ebay.com/sell/itemdescription/customizeyoursummary.html

 

The titles will not be included, so let's move those outside the summary:

<div class="description">
<h3>Vintage 1990's New with Tags Pepe Jeans Dark Blue Low Rise Boot Cut</h3>
<p>&nbsp;</p>
<!-- begin mobile summary -->
<div vocab="https://schema.org/" typeof="Product">
<div property="description">
<p>5 Pocket Low Rise Boot Cut Pepe Jeans from the late 1990's. 
Bought a few pair back when and these were never worn. Great Condition. </p>
<p>Flash used on some photos. Actual color will vary due to lighting, screens, etc.</p>
</div>
</div>
<!-- end mobile summary -->
<p>
 <strong>STYLE:</strong> SEXY 61648<br>
 <strong>SIZE:</strong> 28 - <strong>US SIZE:</strong> 5/6<br>
 <strong>COLOR: RINSE</strong><br>
 <strong>MSRP:</strong> $68.00
</p>
<p>
 <strong>CONDITION:</strong> New with Tags
</p>
<p>
<strong>MEASUREMENTS - TAKEN BY ME, MAY NOT BE 100% PERFECT</strong><br>
 <strong>WAIST - Edge to edge across back of waist</strong> - 15.5"<br>
 <strong>INSEAM:</strong> 33"<br>
 <strong>OUTSEAM:</strong> 41"<br>
</p>
</div>

You might try the bullet points to see if they are picked up once the titles are moved out, but I'm not sure that eBay will look at those with all the extra HTML in there.

 

So the goal is to make that first paragraph (inside the summary tags) a good one to share with other shopping venues.

 

I also see that your summary tags are <div><div> instead of <div><span>.  I'm not sure that it matters, so I'll need to do some testing.  If you use <div><span>, then you can't include <p> tags or <ul> tags inside the summary because your browser will rearrange the summary code if you use the wysiwyg editor.

 

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

Description HTML CSS Classes being Stripped Out so CSS Not Working

WOW, that was it.  Left aligned, made sure all spaces gone, all good now. 

Bashing head against wall done and am now armed with what to do / not to do. 

THANKS AGAIN!

Message 11 of 12
latest reply

Description HTML CSS Classes being Stripped Out so CSS Not Working

AND just noticed your Mobile Summary post, I'll play with that tonight or tomorrow. Thank you for the head's up!

Message 12 of 12
latest reply