Force Iframe to load the correct CSS Data (Ebay listing)

Question

I made myself a custom ebay Template. The problem is, the css for that template only loads the data correct the second time the site is loading. At least in Firefox. You have to press reload to see the template working correctly after you open it the first time. (Javascrips on the template, like the gallery, only work after refreshing the browser).

This has to do something with eBay's css, interfering with my custom css for the template.

I don't know what to do to stop this. I want everyone to see the template correct the first time he visits the page.

Here is an example of one of my listings which have this problem: http://www.ebay.de/itm/Mantel-Wollmantel-Tulpenform-Damen-Neu-Herbst-Schwarz-Weis-Italy-38-40-42-1544C1-/201475884042?hash=item2ee8e6040a

Answer 1

The problem is a weird eBay glitch (feature I bet they call it).

Usually the first time you load the item when it's uncached, it loads directly in the page, there's no iframe. When you refresh the page, it's inside an iframe.

The usual behaviour of it in an iframe is fine, your CSS and JS will all be unique to that page so will run fine...

When it's directly in eBay that first time though, CSS can be taken from the main eBay style sheets as there's no frame stopping it..

I would suggest that in your CSS you be more specific, so if you have an outer div, name all your CSS to have that before each class/id. You may also need to override some default styling that comes out too. Also don't use generic names for your classes or variables, I tend to prepend all mine with wv- (from my company name). Javascript using the same variables can be the worst as scripts can interfere with each other.

Answer 2

The following name style is working for me:

(.nst is the name of my style)

.nst {
    position: relative;
    font-size: 1.em;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    color: #3E3E3E;
    margin: 5;
    padding: 5;
    white-space: normal;
    word-wrap: break-word;
    background: #F8F8F8;
}

.nst h2,
h3,
h4 {
    clear: both;
    color: #777777;
    margin-bottom: .2em;
}

.nst h1 {
    font-size: 2.em;
}

.nst #header {
    background-color: #C8B8A8;
    padding: .25em;
    color: black;
}

The listing is all wrapped in a div <div class="nst">etc</div>.