PDA

View Full Version : all goes wrong on ebay


JBD
05-09-2011, 08:32 PM
Hi,

I've designed an eBay listing template which appears to work fine both as a web page and in eBay for most browsers even IE. The problem is when viewed with IE once added to the eBay listing code the layout changes.

Link to webpage:
http://www.steelvintage.com/ebay/test.html

Link to eBay listing:
http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=250817069109#ht_1471wt_1141

Link to screenshot:
http://www.steelvintage.com/ebay/screenshot.html

Does anyone know why it is changing in appearance?

Thanks :)

JBD
05-09-2011, 10:02 PM
Just to clarify:

Safari for Mac works fine
Firefox for Mac works fine
Firefox 4 for XP works fine
Safari 5 for XP mainly fine (top right icons and bottom images wrong)
Internet Explorer 8 for XP Many problems!

These problems only occur once placed into the eBay code but seem fine as a web page.

johnMoss
05-09-2011, 11:51 PM
IE error on html, disregard this post...resent with firefox..

johnMoss
05-09-2011, 11:55 PM
There is a cross-scripting issue going on here, my response refuses to display in entirety...

johnMoss
05-09-2011, 11:56 PM
I had to go to IE 7 to duplicate your gripes so just a quick heads up win 7 is allowing for your warnings.
As opposed to a definitive answer, the very first thing you need to do is a lot of housekeeping to shore up a very long list of minor code warnings. Go back in and look at every last one of your image tags and your breaks. Practically all of them are improperly closed. proper close is />. You are using just >.
Also, a proper break is <br />. While your fixing your image tags, be sure and add an "alt" property to them. Many are missing. The use of "bold" as a text style is unrecognized by older browsers, one fix is to alter your html and use the strong tag.
The following is a mess:
<div style="color: rgb(255, 147, 99);" id="SVleft-nav-text">
<p><font size="2">If you cannot find what you are looking for then please <a style="color: rgb(255, 255, 255);" href="mailto:ebayenquiries@steelvintage.com">contact us</a> for details of our other stock as we are also able to restore items to your specification.</font></p>Where possible you are far better off setting style components in you css. (IE 7 is declaring this to be a missing li tag, I couldn't figure that one out)

After addressing all of the above, let us see what it renders & go from there...

JBD
05-10-2011, 12:31 AM
I'll try to tidy up the code. Where I've used inline style that's when I've used the eBay listing editor directly to highlight certain words. I'll eventually sort this out and do it properly.

After some research I've found out that eBay only displays in quirks mode so that's probably why IE is not rendering the page properly.

You'll have to excuse me as my knowledge of css/html is limited and self taught...

Have you any further thoughts. I need to be up for work in 6hrs so will try your suggestions tomorrow evening. Thanks so far!

JBD
05-10-2011, 01:01 AM
I think the fact that eBay uses quirks mode is my main problem. I now need to work out how to display everything properly in quirks mode... I guess padding and margins need to be looked at.

johnMoss
05-10-2011, 01:19 AM
I think the fact that eBay uses quirks mode is my main problem. I now need to work out how to display everything properly in quirks mode... I guess padding and margins need to be looked at.

Agreed. I'm not smart enough to give you a solid answer until all else is addressed, which I suspect will certainly get rid of a few problems; thing is to belabour the obvious and when problems still arise they're easier to spot (in my case)...
Jim, Ed, gang, opening in IE 7 will reveal link images as they display in design mode, i.e. stacked... It pushes down the flow... (facebook twitter, etc...)

domedia
05-10-2011, 01:46 PM
#SVother-items-wrapper is inside #SVvideowrapper, but #SVvideowrapper is only about 400+ pixels tall. If you moved #SVother-items-wrapper outside it, it would be different. The BOLD tag belongs to a previous HTML protocol, so it has 100% support in older browsers afaik.

johnMoss
05-10-2011, 03:49 PM
[quote=domedia;193978 The BOLD tag belongs to a previous HTML protocol, so it has 100% support in older browsers afaik.[/quote]
I got it backwards, my bad...:(

JBD
05-10-2011, 06:08 PM
Ok I've sorted the bottom wrapper situation out however the last image still drops to to the next level when its supposed to align all 5 images.

Does anyone know if IE can render divs as :inline; and block; when using quirks mode? This seems to be the main problem causing layout issues as images are being stacked.

So is it best to use BOLD or STRONG?

JBD
05-10-2011, 11:46 PM
I've now resolved a few of the rendering problems (top icons and bottom images) but I still can't get a 3 column div layout to display properly in quirks mode.

Any ideas?

JBD
05-11-2011, 01:41 AM
I've resolved the 3 col div problem by changing it to two cols then placing two divs in the right col...

There is still some unknown reason for spacing on small hover images and the col of text in bottom right should be beside video is not displaying correctly.

Any help appreciated :)

domedia
05-11-2011, 02:20 PM
Does anyone know if IE can render divs as :inline; and block; when using quirks mode? Absolutely
So is it best to use BOLD or STRONG?
So BOLD is the old way of bolding text, before CSS was around. It's not web standards, and was replaced with the CSS protocol 14 years ago I think. (Which is like a billion years in web years ;) )

STRONG is different. It does not try to convey a style/look, but is trying to give importance to the words inside the tag. It's not meant for making text bold.
http://www.w3.org/wiki/HTML/Elements/strong

JBD
05-11-2011, 09:01 PM
I guess eBay must be behind the times then as it's their listing editor that generates font-weight:bold; when you modify in the design mode. If using STRONG is different then is there a web standards way of styling text as BOLD or is using STRONG the best route to take?

I'm still baffled with where I'm going wrong with the column of text which is supposed to start beneath the 'about us' orange bar. IE drops it below the video and pushes thenext div down whilst Safari renders it over the top of the next div...

fresh link for ease of viewing:

http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=250817069109&ssPageName=STRK:MESELX:IT

Anyone have an answer to this please?

JBD
05-12-2011, 01:42 AM
Everything now lines up as it should in both IE and Firefox on PC and Mac. The problem now is with Safari (mac + PC) in that it's displaying the SVdetails div incorrectly.

Is there a conditional comment or hack for Safari that could resolve this?

domedia
05-12-2011, 03:25 PM
I guess eBay must be behind the times then as it's their listing editor that generates font-weight:bold; when you modify in the design mode. No, this is the correct way of doing it. That is CSS and not the BOLD or the STRONG tag.

I'm still baffled with where I'm going wrong with the column of text which is supposed to start beneath the 'about us' orange bar. IE drops it below the video and pushes thenext div down whilst Safari renders it over the top of the next div...

fresh link for ease of viewing:

http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=250817069109&ssPageName=STRK:MESELX:IT

Anyone have an answer to this please?

Looks good in IE8 and 9. IE7 might be the browser that is giving you headacahes.

JBD
05-12-2011, 03:31 PM
I can get it all to look right in IE8, Firefox (mac and PC) and Safari 3 for mac but it still messes up on Safari for PC and on the eBay phone app.

I'm having to leave the div open for the video then close it after the col of text to the right but I would have thought I should be closing the video div then floating the text col alongside it. The problem is if I close the video div the col of text drop beneath the video...

JBD
05-12-2011, 03:47 PM
I've also not been able to test in IE7 only IE8. There are a few minor issues with the way IE8 is rendering the layout such as the spacing between the hover photo's but it's Safari that's causing me the headache now which I never thought would happen as usually it's pretty spot on.

gentleone
05-12-2011, 04:40 PM
After some research I've found out that eBay only displays in quirks mode so that's probably why IE is not rendering the page properly.

Where did you get that info from? As far as I can see renders the eBay site just in standards compliance mode - hence the doctype its using.

It's very time consuming to get thing to look the same in all browsers, but if you want to target for specific browsers there are always CSS hacks.

http://paulirish.com/2009/browser-specific-css-hacks/
http://www.webdevout.net/css-hacks

JBD
05-12-2011, 04:49 PM
I'm under the impression that the eBay page itself uses a doctype however the listing part is in quirks mode as explained here:

http://answercenter.ebay.com/question/Photos-Html/Problem-Adjusting-Htmlcss/1000234703?&tstart=145

gentleone
05-12-2011, 08:45 PM
I'm under the impression that the eBay page itself uses a doctype however the listing part is in quirks mode as explained here:

http://answercenter.ebay.com/question/Photos-Html/Problem-Adjusting-Htmlcss/1000234703?&tstart=145

Okay I see... sorry, my bad. But still I think it's not really your issue here with IE7 or IE8, because if a page renders in quirks mode it will mainly give problems in IE6 and below due to the fact that IE then use another CSS Box Modal as in strict mode. Perhaps this list might help to track down which CSS bug is giving you troubles in IE7.

http://haslayout.net/css/

JBD
05-12-2011, 08:56 PM
At the moment I now have it working ok for IE8, Firefox (mac + PC) and Safari (mac) but not Safari for PC. I figure not too many people will use Safari on PC so happy to sacrifice full cross browser compatibility. I'll probably come back to it at a later stage as too many hours have been lost already! Thanks for everyone's input :)

If someone can confirm it looks ok in IE6 and IE7 that would be appreciated

edbr
05-13-2011, 02:03 AM
Safari on PC is pretty flawed so id forget it also

domedia
05-16-2011, 03:16 PM
Safari uses Webkit just like Google Chrome, so it should be pretty similar?

edbr
05-17-2011, 02:04 AM
yes but there are some issue with it on pc , i know flash displays differently for example,. i would forget safari for pc and as dom says test via chrome

domedia
05-20-2011, 04:11 PM
If you're using an iframe, then it doesn't matter what kind of doctype eBay is using.

domedia
05-20-2011, 04:16 PM
and ebay is not using quirks mode. It's using html 4 transitional.