eBay/Blogger Editor Kit Fix

This has nothing to do with photography, so most of you will probably want to ignore it.

Anyway, I've found that eBay tools are a great addition to my blog since I talk about a lot of used equipment and it adds a lot to my content to have live auction listings right in my posts.

Generating a revenue stream larger than what I get from Adsense with no cost to my readers isn't bad either :) [For actual value, think 2 burgers a month instead of 1].

Anyway, the new eBay To Go widget is very nice for providing live searches on my pages, but it doesn't allow me to use a SID to track which pages are getting the most clicks and purchases. Here's an example for a SB-20 search:

Pretty nice, right? My only complaint is I can't apply an SID, it is shockwave flash (meaning it is slower to load), and it is more complicated (not necessarily a bad thing).


The other alternative for displaying searches is the eBay editor kit. The editor kit allows me to set an SID in a custom search box, but looks really crappy on blogger, like this:


So a spent an hour today trying to track down the problem (this thread is my main source). It turns out that the default blogger template has the CSS code:

.post img {
border: 1px solid #E3E4E4;
padding: 2px;
background: #fff;
}

This causes all images to have a 1 pixel border and 2 pixels of padding... even the hidden images in the custom editor kit display!

The solution is to create a new CSS entry to turn off the border and padding inside of a ebayEK class:

.post .ebayEK img {
border: 0px;
padding: 0px;
}

Then, just put span tags with the ebayEK class around the editor kit code to make the problem go away:

<span class="ebayEK">
... ebay code here ...
</span>

This results in a display like this:


Much better, right? Now custom editor kits are not trashed anymore...