ShipScript has been an eBay Community volunteer since 2003, specializing in HTML, CSS, Scripts, Photos, Active Content, Technical Solutions, and online Seller Tools.
1 BEST ANSWER
Accepted Solutions
Most of the differences between "quirks" mode and "standards" mode seem to affect how padding, margins, and borders are applied — essentially a spacing issue around elements. As I recall, you may also have a centering issue on one of your elements, but until you fix your tags, we don't really know. You won't be able to perfectly design to all browser quirks. Just aim at getting something that displays close to what you want, with and without the doctype. When eBay starts adding a doctype to the description, you can design to "standards" mode only.
It appears to me that your stylesheet is being honored. I do see the borders and background colors from your stylesheet applied to the listing example.
You have a doctype declared at the top of your description (which will be ignored because it is not the first line on eBay's page); yet eBay declares none either (they have announced that they will apply doctype in the future). That difference between your controlled doctype environment and eBay's quirks-mode environment could change the way your page renders on different browsers.
Additionally, there are lots of unclosed tags in your code, which could further confuse a browser. Look for missing closing </p> tags and for <h4> that are missing/misstating the </h4> closer. I also see a <td> in there.
Even after all the open tags are corrected, there is a conflict with mobile. The mobile viewport tag is included in the meta tag, but one of your styles sets the minimum width to 500px, when the smallest viewport is 320px, so the page won't downsize adequately. Additionally, there are some images that will not shrink down to 320px. So if you set the viewport meta tag, which tells the phone device not to shrink the page for pinch and zoom, you are essentially forcing scrollbars on visitors.
To make your header image flexible for mobile, add this line to the style that manages your head image:
img.displayed{
max-width:100%;
Then to your listing wrapper, which appears to be "#listing", add this rule
img { max-width:100%; }
There are other issues that arise when you try to style the body tag or other generic tags without constraining then with a class in your stylesheet because your page and eBay's page are going to arm-wrestle for control of those elements. When you use classes, you can tightly control your own content.
For instance, there are lines like this where P is a generic tag
p {
font-family:Arial,...
To make it your own tag, you might preface it with the classname or id of your container that holds that P tag, like this
#listing p {
font-family:Arial,...
That style rule will apply to all P tags contained by this element
<div id="listing">
Essentially, if there is not a dot (.) or hash (#) in the style rule that prefaces the curly braces {}, you are probably going to have conflicts.
Most of the differences between "quirks" mode and "standards" mode seem to affect how padding, margins, and borders are applied — essentially a spacing issue around elements. As I recall, you may also have a centering issue on one of your elements, but until you fix your tags, we don't really know. You won't be able to perfectly design to all browser quirks. Just aim at getting something that displays close to what you want, with and without the doctype. When eBay starts adding a doctype to the description, you can design to "standards" mode only.
