HTML + CSS rendering issue

Question

Spent the past couple days pulling my hair out and on the road to a brain aneurysm over this.

I've created an HTML + CSS template for Ebay which looks great. Although it does not have the CSS rendered until you refresh the page after you initially open it.

To keep things simple and I'll post the exact test code im using for Ebay:

After its posted and the page is initially opened you see no CSS then the refresh makes the CSS render:

I have a professional page for a product im selling and this obviously wont fly.

This completely baffles me. Ive done everything. All browsers. Hosting the CSS on another site and pointing to it. Nothing works.

Really, anything that can in someway help would be deeply appreciated.Ill keep checking on this post every few hours.

Answer 1

try to add border-width p{border:1px groove;}

Answer 2

Try using inline styles instead.

<p style="border: 1px groove black;">Thingy</p>

Answer 3

Its from the wrong format/wording used in the inline style. Although they both work, it does not explain how one needs a refresh while the other does not.

Answer 4

You said:
it does not have the CSS rendered until you refresh the page after you initially open it.

This is maybe related to a eBay page load behavior. When you come from an external site (like pasting the eBay link to your browser) then eBay will load the page and will add their own CSS to your HTML tags. When you reload the page then eBay jumps into iframe mode and your Style elements are used.

Check topic #6 here: http://www.fix-css.com/2014/06/ebay-templates-coding-guide/

Answer 5

There is a known issue I have come across that causes problems:

When you first load an un-cached item, it loads the item's code directly within eBay. Upon refresh, it loads the item within an iframe (normal behaviour)

The first load causes issues as it carried css from the eBay main page style sheets.

try be more accurate and include a wrapper div and then style with .wrapper p {}

Also, link to an external style sheet to make your life easier updating!