Using HTML + CSS in a listing - getting format problems?

[thecardbazaarau]

*note* I am not experienced with HTML and have only been teaching myself recently, so I may just be doing something wrong that's really easily fixed. I have looked for similar issues using Google and have not found anything.

For a while now I have been selling using the same listing format - just a basic title/description of item/some pictures type of thing. Recently, I have been learning HTML using Dreamweaver for other uses and thought I'd design a proper listing to attract more buyers. I finished the listing in Dreamweaver, looked at it in my browser - it looked fine - then added it to my existing listing. I copy/pasted the code and it looked fine in the auction editor. 

However, when I made the changes live, this happened: 

and also the main listing description looked like this:

Bizarrely, when I refreshed the page, the problems go away and the page looks exactly as I intended (except for Chrome Incognito window). This is the case in Chrome, Firefox, Safari and IE.

At first I thought the problem was to do with eBay picking up a:links and using the format for its own links, but I do not understand why the main listing would have problems as well.

Looking at this: 

at this: 

It seems that I am accidentally doing this, but I don't know how to change the listing so it does not do this.

I would have posted this on a coding forum, but I think people on here would know better what I can do fix the listing.

Thanks for your help.

[lalala-au]

ha ha! I like you! Well done! Yeah the purists sometimes drive me nuts. Rules a meant to be broken in programming that is  how we have CSS3 and HTML5 today. Without programmers breaking rules we wouldn't get new commands like the new column command in CSS3, how many years have programmers waited for that instead of using a html table. I know myself over the years I have had to use the unorthodox to get what certain people have wanted, although now with HTML5 and CSS3 hardly ever have to step outside the boundaries.

[lalala-au]

Use google fonts it's easier. https://www.google.com/fonts

[thecardbazaarau]

I have decided to go with some default fonts, it's easier. More problems exist as you can see here: http://www.ebay.com.au/itm/Test-Listing-/161391799992?

Firstly, the titles and main text are not centered, even though they look fine in Dreamweaver and I have set them as centered.

Also, the page looks different from when you originally load it to when you refresh it. No idea why.

[shipscript]

---

@pmpaton wrote:

Firstly, the titles and main text are not centered, even though they look fine in Dreamweaver and I have set them as centered.

Also, the page looks different from when you originally load it to when you refresh it. No idea why.

---

The offset text is due to non-breaking-spaces at the front of your sentences. Those hard   codes are considered part of the text when centering.  You can see them in this screen shot taken with Firefox's source view.

I still see two versions of your page (the inline version on first view and the iframe version after refresh). The major difference that I now see is probably due to eBay styling the <p> tag.  Although I haven't put too investigation into this, I suspect they probably have a smaller margin between paragraphs, so the spacing is tighter on first view where eBay controls the styles, while it returns to normal in the iframe view (upon refresh) where default paragraph spacing is used because you don't set your own.  

Paragraph spacing is the "margin" attribute on the <p> tag, and you would set margin-top and margin-bottom. Play with values between 0 and 0.5em, where 1.0 em is the size of one character.

#mytemplate p {

           margin-top: 0.5em ;

           margin-bottom: 0.5em;

}

or the shortcut:

#mytemplate p {margin: 0.5em 0em; }

[lalala-au]

I think you have done a very good job well done! With my skills I really should do a little bit more with mine now I see the trouble you have gone too.