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.
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