eBay Live 2007 Community Hall of Fame Award
*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:
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.
First, it is important to understand that you are accessing two different eBay pages.
1) When you first visit eBay with a cleared cache, which is often the case if you have just opened your browser and signed in, eBay has not yet determined your browser capabilities. Thus, the first listing you view will be displayed inline with eBay's content.
2) If you refresh the page, the listing content will be displayed in its own iframe (a webpage within eBay's page).
When your page is inline with eBay's content, your styles can affect the eBay page and eBay's styles can affect your content. This can also be seen using the popup preview when creating a listing.
When your page is isolated within an iframe, neither can affect the other.
Now, here is where Dreamweaver and other web-authoring tools can get you in trouble:
Web-authoring tools assume you own the entire real estate, and when your content is in its own iframe, you can live with that. But, as you have seen, when your description is inline with eBay's content, you do not own the entire page. So, you have to use web authoring tools differently.
First, when the tool creates a stylesheet, it is likely to set global styles that affect all page content. Global styles look like unadorned HTML tags, like p, a, or li, and they affect eBay's page as well as your own content.
p {}
a {}
a:hover {}
li {}
And this is what happens when you style eBay's page
Instead, we want the tool to create local styles, specific to the content we are creating. Styles can be localized when they are given classes or IDs that connect them to specific elements within your content, which are seen as dots (.) or hashes (#) in the stylesheet.
p.mystyle {}
a.mystyle {}
li#mystyle {}
When using web-authoring tools, I would suggest creating a container element and then populating and styling that container. Do not style the underlying page, and never style or include the body tag in your template or stylesheet.
A quick fix to existing code is to wrap the entire template in a container. Essentially, you should look for <body></body> and replace with <div></div> as shown below:
<body><div id="mytemplate">
...content...
</body></div>
Then go through the stylesheet and add your container as a prefix to all the global styles, like this:
body #mytemplate {}
#mytemplate p {}
#mytemplate a {}
#mytemplate a:hover {}
#mytemplate li {}
That will localize the styles and apply them to only your content instead of modifying eBay content. But your description is still subject to eBay's styles as seen by the overlapping text.
So, to innoculate your code from eBay's stylesheet, you will have to proactively style the global elements that eBay targets.
This page describes some of eBay's CSS we need to overcome, but the page does not say what to use instead because each template has its own needs.
The crammed text is due to a line-height that eBay sets. We have to set our own to counteract this. In the case of your page, I would say the container could be set to
#mytemplate {line-height:normal;}
Then, as you find other elements that don't look right, they can be targeted in your stylesheet.
You are not creating a full webpage.
The next thing to understand, is that whether your content is inline with eBay's content or isolated in its own iframe, you still don't own the whole page that Dreamweaver thinks you own.
In both cases, eBay sets up the page with its own headers, and any that you provide won't count. If you want to see what your content will really look like on ebay's site, these headers should be removed, and some listing tools will remove them for you.
<!doctype>
<html>
<head>
</head>
<body>
...your content is here ...
</body>
</html>
The doctype tells the browser what standardized rules to use when displaying content. If there is no doctype, the browser is allowed to render a page using its own proprietary or quirks mode interpretation. The doctype is only valid if it is the first line on the page, and yours will never be the first line on any eBay page, so it has no effect. The finer points in your template and some of the spacing will be subject to whatever browser version is in use and what quirks that browser has. Fortunately, most of the newer browsers are beginning to conform quite well to HTML standards, and the quirks are decreasing.
The redundant html tags similarly have no effect and will be skipped when encountered by the browser.
The redundant head tags have no effect, although the content between the head tags may still be valid if they are normally valid outside the head. A style block, for instance, can appear outside the head, and it is normal for listing templates to include a stylesheet within what is normally the body element.
Of course, you should not include the body tag because it can be styled and can trigger events. eBay already has a body element and relies on the body being loaded when sizing windows. Your early closing of the tag could pose problems. The browser does not ignore a duplicated body tag, so don't use one.
Now that your code is stripped down, there are more issues.
And finally, when you do isolate your content and place your stylesheet ahead of that content, you may encounter another problem with eBay's listing tools.
<style>
#mytemplate {}
</style>
<div id="mytemplate">
...content...
</div>
eBay's description editor relies on the editing capability built into the browser, and that is why only some browsers work with eBay's rich text editor. The browser editor will rearrange your html and will place your stylesheet into the head, which you can't see. When you publish, the tool extracts and posts the body content, but your stylsheet, which was moved to the head, is lost because the head is not published.
One solution is to work only in the HTML view and never visit the standard editing view where the rearrangement occurs. Another is to place a hard element ahead of the stylesheet, which firmly designates the stylesheet as a body element. This is the element I use ahead of my stylesheets.
<br style="display:none">
If your template is short, another solution is to put the stylesheet at the end of the code. This page has many mini-templettes with short stylesheets at the end, but I doubt that Dreamweaver would ever create a short template.
