More CSS on eBay

October 20, 2005

Yay! My Using CSS to markup eBay auctions post is finally getting some traffic. Granted it was somewhat self-generated. I was looking for other articles on the same topic and found some people asking CSS + eBay questions on other forums. I posted responses to their questions and also sent them to my original post. Now it’s time to follow up with some details.

Since my original auctions have long since rolled off eBay and are no longer viewable, here are the three different auction templates that I was using (View Source to see the underlying HTML):

So, the first question I have been asked is:

I�m wondering what portions you actually pasted into the ebay editor?

Since you don’t want to include HTML tags in your post that might potentially cause issues, you want to avoid any markup that should only occur once and is already in the eBay HTML. So, I paste the following from my template into my auction code:

Basically I am taking all of my HTML code that exists between the ‘body’ tags on my template page.

To get the reference to the external CSS file, I add the following line to the top of my auction code:

Ideally, the sytlesheet link should be in the ‘head’ tag at the top of the page. However, since we don’t have access to that section since it is part of eBay’s output, we put it at the top of our auction. I have not seen any issues with this approach. As long as the reference is before the code that we want to style, there shouldn’t be any issues.

That’s all for now. Post questions and I might write a follow article.

Popularity: 18% [?]

Share This

Posted by Matt Smith | Filed Under General 

Comments

31 Responses to “More CSS on eBay”

  1. Colin W on December 9th, 2005 2:10 pm

    Great layout!

    Is there a fix for the bug in IE (bottom images not positioned correctly).

    Thanks

  2. Matt on December 9th, 2005 10:44 pm

    Thanks Colin! Can you be more specific about the bug you are seeing? The only thing that I am seeing is that in the Lizard layout, the images at the bottom are left justified and have no space between them and the border. Is that what looks wrong to you or is there something else?

    I haven’t looked at my code in a while, but the images in the other layouts look pretty good so it may just be a style missing. If you give me more details (maybe what version IE you are using too), I will try to take a look.

  3. Matt on December 9th, 2005 10:57 pm

    While I’m here:

    – I’m not sure what is causing the ‘1’s to appear in the comments. I was in modifying some of the textile parsing code to make the code formatter work and I think I must have broke something. Fixed!

    – If you are working on your own styled ebay templates, leave a link so others can see also.

  4. Colin Webb on February 11th, 2006 9:11 am

    Hi Matt

    Please accept my apologies for not coming back earlier but recently I have been quite ill. But thats enough of me!

    The problem I have is in IE 6.0.2900 (SP2), where the images at the bottom of the page are alighned to the left.

    Would a fudge of positioning alleviate this alignment?

    Kind regards

    Colin

  5. Blake on April 29th, 2006 7:34 pm

    Hmm.. I am wondering if eBay has banned the use of css. If they ban externel stylesheets would inline work?

  6. James on May 19th, 2006 6:04 am

    I’m confused as to why you are escaping the quotes?

  7. Tina on July 1st, 2006 4:19 pm

    Hi
    I’ll now have a play with your templates & discover how to make my own.
    Ebay & css….Thanks for the solution.
    Tina

  8. Lei on September 26th, 2006 9:56 pm

    Hi Matt,

    Happy to find your stuff!
    This third line: looks strange to me. How can we assign “body” to another div? Will this div use the same style as the real html body?

    Thanks a lot!

    Lei

  9. Matt on September 27th, 2006 7:52 pm

    Lei,

    Assigning the id=”body” to the div on line 3 will not use the same style as the real html body. The real “body” tag is special in html and is treated differently than a div tag with id=”body”. The CSS to reference the two would look something like:


    body {
    // This is the HTML body tag
    }
    div#body {
    // This is the div tag with a body id
    }

    Hope that helps!

  10. Sara on October 18th, 2006 11:57 am

    Matt,

    I’m very new to css and using it in eBay & my technical guy is out of action at the moment. I’m having a serious drama inserting my css template into ebay, I’ve followed the instructions you gave above but am still not getting it right, it is listing over the top of itself and I can’t see whats wrong with it. Can you help me?

  11. Alon on November 9th, 2006 12:23 pm

    Hi Matt,

    Ok so, i did managed to use the external ccs file on eBay, followed your insructions and it looks fine, the only thing that doesnt show up or i dont know how to get it linked together is the images you are using in your `lizard` template, these images should be hosted on your server and should be accesable and the code is actually pasted in full, so why the images doesnt show up in the listing, or where i do the inline for the images if i want to use mine, as im new to css.

    Cheers
    Alon

  12. Brad on January 31st, 2007 10:05 am

    Hi Matt,

    I have pasted your template into Ebay and linked the CSS to your link above and all works except for changing the font for the page. Now this is not a problem with your template exactly because I am having the same problem with my own template. I have tried and tried and cannnot work out why Ebay is always 10pt Arial. How do we change our templates to change this?

    I have seen other ebay pages using CSS and they have full control over their auctions but if I paste them into Ebay they always get Arial 10pt as well.

    Grrrrr, how do we do it? Thanks.

  13. Matt on January 31st, 2007 8:31 pm

    Hi Brad!

    Do you have an example that I can look at? It should be something pretty simple. I did not have any issues with the fonts when I was working with it. Of course, things have changed significantly with the ebay templates, etc. so I don’t know if maybe they are doing something to limit it.

    Matt

  14. Rob on February 1st, 2007 7:21 pm

    Hello Matt,

    I designed a layout of my own. You can see a live example here:
    http://eatyourexam.com/my-files/table/ram2.htm
    The CSS file is here
    http://eatyourexam.com/my-files/table/ebay.css

    However, when I paste the HTML code into eBay, the rounded corners come out like so:
    http://eatyourexam.com/my-files/table/problem.jpg

    Do you have any idea why this occurs? What could be wrong with my code? I felt it was pretty simple CSS/HTML, so I don’t know why eBay is throwing up…

  15. michael from china on April 12th, 2007 10:00 am

    thank you very much, you are great guy. all these are useful

  16. Marion from the UK on July 15th, 2007 8:33 pm

    Hi there Matt,

    Some great advice you’ve kindly offered everybody over the past 18 months..
    I fortunately stumbled over your page today, afetr searching for information on a tedious problem i have been experiencing for the last few days..

    I’m currently redesigning an auction listing page in time for the relaunch of my small shop nxt week. I decided to produce a unique looking page for my new range of products… i am a freelance designer, but at the same token, a web design / html / css virgin!

    I have produced a final layout in Dreamweaver MX (using the layout editing feature - which seems the easiest route), and appears wonderfully offline in the browser previews (Flock / firefox + IE).

    However, once i copy and paste the html code (as suggested between the body tags) directly into the ebay html description window, upon preview, the text blows out / changes font and the layout generally distorts!!? arrgghhh!!!

    ..I’m guessing its because my style sheets (about 8 in total) are outside the body tags on pasting, and therefore do not get ‘rendered’ in the eBay preview!?! …

    If this is true, how can you include style sheets in the code for ebay to recognize - can this possibly be resolved??

    I would be truly grateful for any help with regards this matter.
    Thank you in anticipation

    kind regards, Marion x

  17. alex7pkr on July 25th, 2007 4:09 pm

    In reply to Marion:

    I would suggest running a real ‘test’ auction, to see if the problem is still present once the auction is properly loaded in eBay; as it could behave differently in the preview.

    [ I’m not a CSS expert though :) ]

    Regards,

    alex7pkr.

  18. Matt on July 25th, 2007 8:13 pm

    @alex7pkr — Marion and I corresponded several times over the course of a couple of days. I even got this nice compliment from her:

    I’d like to say a big thank you for taking the time to resolving my problem!! lol ..If i were the Queen, i’d offer you a Knighthood!! ;)

  19. alex7pkr on July 27th, 2007 4:09 pm

    Nice One.

    If it is alright, I’m a bit stuck at the basics, so I may try to contact you also.

    Thanks.

    alex7pkr

  20. Austin on August 4th, 2007 3:03 pm

    I have followed the instructions for inputting the data between the tags and inserted a link to external css above my content. However when I use Firefox to paste the code to eBay description and view it, none of the text is styled.

    It works fine in IE but no joy elsewhere. I’ve tried pasting all the content including the / tags, with another link to stylesheet in the head (hoping it wud give FF a kick). As a note, I mainly use IE7 and pasting the entire html code seems to work fine (no copying/pasting the body). No matter what I do Firefox has a paddy… argh!

    Any ideas?

  21. Austin on August 4th, 2007 8:35 pm

    seems a few details aren’t showing up in my previous post…

    “I have followed the instructions for inputting the data between the -body- tags..”

    “I’ve tried pasting all the content including the -head / body- tags…”

  22. Matt Smith on August 4th, 2007 10:17 pm

    @austin: Do you have your html/css posted anywhere that I can take a look? Or would it be possible to send me a zip file with everything? Marion and I made great progress once I got my hands on the code that she was using.

    @all: Would it be beneficial to put together an in-depth tutorial or ebook on this subject? Just curious. Marion got me thinking about it and I’ve mulled it over a little but haven’t decided if it is something worth pursuing.

  23. Austin on August 10th, 2007 11:01 am

    hi matt, the page is at http://www.century2000.f2s.com/ebay/ and add site.css for the rest. im using dreamweaver and im very new to css but the basic understanding is there.

    even from my own experience ive seen that css can be relativley simple, but its the capabilities and limitations of css in ebay that would fit great in a wider tutorial. your posts got me this far, any more would be a bonus.

    many topics i look into will often have bits of (useful) information floating around the net, and in terms of css / ebay any ideas of bringing this information together would be a plus.

    thanks in advance

  24. francis on August 11th, 2007 10:30 am

    @Austin, you have a very nice eBay listing description. I am just learning Dreamweaver CS3 by myself, too, and hopefully I could apply external css on all of my listings. I bought Lynda.com tutorial and it is helping me a lot. I’ve been always amazed how other sellers could do it and I could not.

    I have a suggestion on your listing. Verdana is just not the right font and does not match your theme. Maybe if you use a smaller size (9px). Or use this type of font that Matt uses.

  25. Austin on August 26th, 2007 6:11 pm

    sorry its been a while, a bit tied down with work related stuff..

    @francis, thanks for your comments nice to hear some positive remarks. All it takes is some knowledge and practice, play around with some html and throw in some css when your ready. Keep the css external so you can manage multiple pages easier and at any time, and in regards to ebay simply relocate the css reference to within the body of your html.. sure enough works fine. Matt has it all explained pretty well, some good info up there ^

    Seems like Dreamweaver is a friendly environment (haven’t seen CS3, mere Adobe branding I presume?) but I don’t really know where im at when it comes to web design. I understand a reasonable amount of html and it’s annoyances through years of on-off personal experience, now im liking the look of css, a very new topic to me.

    If i (1) have a method of globally styling many pages, in this case auctions (2) can do this external to the page content, and (3) can learn how to work around the ‘kinks’ of the ebay system, then (4) i’ll be over the moon!

    I’ll be playing around with fonts and sizes etc at a later point, this is just an early mock-up to get some ideas flowing round my boss’s mind as hes looking to gear things up, but thanks for the point its in mind.

    @Matt, ive had a look at your templates since my last post and im certain I could learn a lot simply browsing your css at some point, but a tutorial on css in ebay would bring clarity to the topic - had any more thoughts recently on building one?

    In regards to my last response, have you had a look at the link yet? http://www.century2000.f2s.com/ebay/index.html is the place and the css is found at /ebay/site.css I’d love to get the ball rolling and hear some remarks from the more experienced.

    kind regards,
    austin

  26. nicole on December 3rd, 2007 11:44 pm

    I am so glad I found this site! Your articles are very helpful. I have run into a bit of a problem while attempting to add my html/css ebay listing to ebay. When I add the html and link to the style.css file on my server — the design of my listing takes-over the entire ebay page.

    I attempted what you mentioned — to copy only the html in between the body tags — and it still seems to be problematic.

    Here is the css:

    http://www.s215038318.onlinehome.us/style.css

    Here is the html:

    http://www.s215038318.onlinehome.us/ebay.html

    any pointers?

  27. Matt Smith on December 6th, 2007 2:58 pm

    Hi Nicole,

    I can’t make any progress on your request because the ebay.html file does not load correctly. It appears that all of the html tags have been escaped which just makes the page load all of the text without interpreting it.

    Let me know if you make any changes. In theory, I should just be able to click on your ebay.html link and at least see what you have accomplished, but I can’t even do that at the moment.

  28. Gayla on January 1st, 2008 5:52 pm

    Help! I am learning css and am attempting to style my ebay auctions with css. The results so far are that the description looks exactly as intended, but it overwrites the remaining content on the auction page. When I take off the background on the description, you can see the missing content under it. Obviously I am missing an important element in my code. Please advise me if you have an answer!

    The current auction with css description is:

    http://cgi.ebay.com/ws/eBayISAPI.dll?ViewItem&rd=1&item=280188748697&ssPageName=STRK:MESE:IT&ih=018

  29. Gayla on January 1st, 2008 7:01 pm

    Hi.
    Please disregard my previous question. I just solved the problem. Simple solution…. I had assigned an absolute position to one of my background containers. arg!!!!

  30. shilpa on May 17th, 2008 7:31 am

    am so glad I found this site! Your articles are very helpful

  31. Ansel on August 13th, 2008 5:39 pm

    Hey, thanks! I just finished a CSS class two days ago and I’m going to build my eBay template off the lizard. It’s perfect. Kudos!
    Oh, and I clicked a couple of your links so hopefully you’ll see massive amounts of income from that! ;Op

Got something to say?





MyHomePoint

Having trouble keeping track of everything going on at home? Is the refrigerator organizer not cutting it anymore? We feel the same way...
Check out MyHomePoint »

Latest Blog Posts

Close
E-mail It