Skip to main content

Yahoo Store Editor V3.0 breaks table / image layout?

I've been banging my head against the wall with a problem. I've got an ImageReady HTML layout I had to put into a Yahoo Store, and everything was fine in Internet Explorer, but in Firefox, the layout was broken. Images were shifted up and down, left and right.

I knew the new Yahoo Store Editor (version 3.0) now forces all the pages to be in Standards mode , so I had a feeling it had to do with that. Once I was reasonably sure that it wasn't some dumb mistake in the HTML, I started searching for some info on standard doctype, images, tables, and mozilla, and sure enough, I found it here.

Sure, tables and images are not supposed to be used for layout anymore, but it is still a lot easier in many cases to splice a few pieces of an image together using tables to come up with a specific look. What I didn't know until now was the new standards actually broke the old habits... Not too great if you ask me, I always think that if something is updated it should always support what came before that point...

In any case, if you are using the new Version 3 Yahoo Store editor and templates, and want to use tables and images for layout, save yourself some trouble and add the following to your stylesheet:

td > img, a > img { display: block }

Or, if you also have image type submit buttons in table cells, then:

td > img, a > img, td > input[type=image] { display: block }

You may have to play with these a bit to get things right depending on your particular layout. For example, I found I had to add this in another store:

td > a > img { display: block }

After this, my layout worked like a charm. I'll be sure to include it in the next revision of our Yahoo! Store Tips & Tricks book.

Comments

Popular posts from this blog

Pre-Season Checkup

With the holiday shopping season fast approaching it's a good idea to do a general checkup on your store to be sure it's ready for prime time. Below are a few things you would want to check, along with a few add-ons that are not too major in scope, but which are often neglected and give you an edge over your competition. Can you Search and Order? Every time we do anything major in a store we test two things: whether searching and adding to cart/ordering works. You can have nice, flashy pictures, cool animation effects, a very quick loading site, anything, but if the store search is broken or you can't add to the cart or can't check out then an ecommerce site is worth nothing. Can you Order? Chances are if your checkout was completely broken you'd know about it by now, but it doesn't have to be totally broken in order to scare away potential customers. So go ahead, go to your site and first do a search and make sure it works. Then, add one or more products

How to create clean and efficient CSS

In a typical workday, I deal with dozens of yahoo stores and very often I have to tweak, fix, or change CSS used by these stores. While some stores have very clean and easy to follow style sheets or CSS definitions, the vast majority of stores I've seen seem to include complete hack jobs, style sheets put together completely haphazardly, or as an afterthought. While working in such a store, the idea came to me to turn my gripes into a post. So the following is my list of dos and don'ts of good CSS or style design. 1. Externalize your style sheets. This means to save your style sheets into one or more css files, and link to them using the <link rel="stylesheet" type="text/css" href="/lib/yourstoreid/yourstyle.css"> notation, or in Editor V3.0, you can use the LINK operator. 2. Combine your style sheets into as few files as possible. Nothing worse than trying to wade through 6, 8, 10 or more different style sheets to find the color of a

What is product-url anyway?

I keep having to field questions about the product-url field, and since it came up yesterday, I figured I'd try to clear up all the confusion about it. So the name product-url suggests that whatever you type in there will become the URL of that product. Unfortunately, this is not the case, or rather, not in the intuitive way. The URL you enter there will be used as the URL for that product in Yahoo Shopping, on the built-in search results page, and on the shopping cart page, however, the URL you type in there DOES NOT actually change the physical URL of the page. What is the URL of a page in a Yahoo Store? In any Yahoo Store built in the store editor, the URL of a page is the store's domain name and the page ID + .html. For example, in my store at www.ytimes.info, I have a page whose id is rtml101, thehrefore, the URL of that page is http://www.ytimes.info/rtml101.html . Why would you want to change the URL? For SEO reasons, it is believed to be better to have a URL tha