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.
@lalala-au wrote:Also ebay doesn't exactly adhere to all proper html and css correct coding methods, so don't be afraid to "not follow the strict coding guidelines". (And some other coder is going to pay me out for this info!) ha ha!
This is one thing the Purists do not understand. We have to be a bit ingenious to get around eBay's coding, and the browsers are a lot more forgiving than one would think.
Programming for eBay
One of the reasons my free eBay tools have been so popular is because the ideas came from forum questions and I just started coding from the "look and feel" inward. I paid no heed to how the rigid programmers had structured their codes—I always had the visual goal in mind—so I was not constrained by the brick walls they encountered when they plugged in "standard" code modules. I learned the language as I went, looking up the codes I might need on W3schools and testing across different browsers. And while I have a rather Bohemian attitude toward programming, it is unerpinned with a very strong foundation of testing and sense of logic.
The advantage to this type of learning is that you already know the answers to often-asked questions because when you bumble along, you typically encounter and solve every one of them along the way.
CSS
With CSS, I was one of the forum regulars who repeatedly advised sticking to plain HTML because there is really no need for sellers to complicate their lives with CSS. However, eBay changed all that a few years back when they expanded their global styles. Now, because CSS trumps HTML attributes, the only way to fight back is to use CSS against eBay's CSS. CSS is plain-english enough that one can follow along, but understanding the finer points, the shortcuts, the versions, and all the possibilities can take eons to assimilate.
One of the first problems I encountered with CSS was the dissimilarity between browsers. All the browsers treated borders, padding, and margins a bit differently, so the only way to create consistent pages was to not use any of those attributes and set them always to zero. Or, create a page where it didn't matter if the width varied a lot due to borders that were outside instead of inside the box being drawn or because padding pushed the box outward instead of pushing the content inward. You would never see these problems unless you employed a suite of various browsers (and versions) to check all your codes.
There are workarounds to border and padding issues that require containerizing everything. One of my latest tools relies entirely on CSS to create custom skins for a promo gallery; and to make it work, I still do not use padding or borders, as the gallery might appear in a quirks page or in a page with some variation of standards mode.
This padding problem is most apparent in pages that use CSS to create a structural layout, that is, where blocks of content are to appear beside other blocks of content. Because of the way eBay nests iframes and uses scripts to resize those frames to fit the visitor screen and the seller content, I still recommend those structures be created using HTML table code rather than CSS. The purists are aghast at such a suggestion, but when you don't own the page and can't control the sizing or the doctype, tables are the only way to guarantee your layout will hold the page open and that your side-by-side content will remain so.
So, to design pages for eBay listings, we do need to be a bit creative and think a little bit outside the box.
@lalala-au wrote:Oh and your over lapping text is a line height issue, but you can combat this easliy with using <br>'s to space it out or you can reset the line height each time you change your font size eg:
This is definitely a line-height issue. One problem with using a hard break is that it would fix the appearance on the inline code, but then the iframe content would be seriously gapped, and the iframe is the more common page.
@pmpaton wrote:Thanks so much for the help, I managed to change it so that I'm not formatting eBay's page anymore, but I'm still having trouble. The description is stretched out to the right instead of being centred and I can't fix the text overlapping. I'm very new to HTML so here's a pastebin of the code: http://pastebin.com/CtJFQuYM might give a better idea of what I'm doing wrong.
http://www.ebay.com.au/itm/161391799992
pmpaton,
First of all, your declaration is incorrectly formed with an extra set of braces, so the line-height is ignored:
#mytemplate {
background-color: #000;
{line-height:normal;}
}
It should be this
#mytemplate {
background-color: #000;
line-height:normal;
}
That should fix the problem, but if that still doesn't work, then add another selector to your styles like this, where the * wilcard will apply the attribute to every single element that is a child of #mytemplate
#mytemplate * {line-height:normal;}
