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

Post a Comment

Popular posts from this blog

CPR for a Yahoo Store on Google's Supplemental Index

Recently a client of mine came to me and said that most of his store pages disappeared from Google, and he did not do anything to make this happen. I was a bit skeptical, so I went to Google, did a search on his store, and sure enough, there were only two pages indexed, his home page and his site map (ind.html) page. The rest were in the supplemental results, which means that Google thought the rest of the pages were not much different than these two pages. When I looked at the supplemental results, the little excerpts under each link were exactly the same, and I also noticed that what Google showed under each result was actually text from the ALT tags of the header image. I looked at some of these pages in my client's store, and they were actually different. This was a bit puzzling, but then I thought perhaps Google saw that the header and left navigation was the same throughout the site (which is pretty normal), but that the text that made each page different was too far down ins
Post a Comment
Read more

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 l
6 comments
Read more

What to expect when your redesign goes live

At Y-Times we roll out new designs, redesigns and other major upgrades to Yahoo stores on a fairly regular basis. Some of the main questions our clients ask are how to prepare for a roll-out and what to expect in terms of SEO and conversions when the changes go live? For any functional Yahoo store how well the site ranks and how well it converts are probably the two most important metrics. Since pretty much ANY change you make to any page can potentially alter either or both of these metrics, merchants may understandably feel nervous about far reaching alterations to their sites. However, when those functionality and design changes and additions are done right, there is really very little to fear. First off, what does it mean for a design or redesign to be "done right?" From the technical stand point, search engines look at the underlying structure of your site (the HTML, and increasingly also the CSS and JavaScript code) to try to extract information and meaning from i
Post a Comment
Read more