Displaying differently

I have a page that I have done see here:

dog bath, grooming supplies, quality pet supplies | Quality Pet Supplies, Dog Bath, Grooming supplies, dog grooming equipment

and I want to match my ebay listing the same so I’ve edited it and tested it in a browser and it’s fine but as soon as I put the listing on it shows like this:

QPS Large Professional Plastic Dog Grooming Bath | eBay

the problem is the font is larger and so pushing the arrows down and the title has become too big. What is the solution to this and is it an easy one?

Sorry, it’s not clear what the issue is. Both pages look fine in firefox. Could you post an image of what you mean, and tell us what browser you are looking at?

Hi

Here is the design as it should be ( nice title, nice arrow list etc )

http://www.qps-pets.co.uk/images/ldb-cw.png or on the website http://www.qps-pets.co.uk/dogbath-large

Here is a screenshot of the ebay listing how I see it:

http://www.qps-pets.co.uk/images/qps-ebayldb.png it shows the list to the right has been pushed down

here is a 2nd screenshot that shows because the font is sligtly larger it is breaking up the title:

http://www.qps-pets.co.uk/images/qps-ebayldb2.png

Both the website and ebay listing are directed towards the same css stylesheet on my hosting so can’t understand that really

One page has a doctype and the iframe page doesn’t have a doctype so you will trigger different rendering.

You also have a table in the iframe page holding the content and the font-size doesn’t get inherited into the table in quirks mode and starts at 16px hence the bigger text size and different fonts.

good analysis. I’m a learner, what do I need to do / change to fix the one in ebay?

Add a doctype to the iframe page in ebay. I assume you have access to the page?

I put this:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

but no change

I’m still seeing no doctype on that page even after refreshing. This is what I see.


<html><head><meta http-equiv="Last-Modified" content="Sat, 27 Aug 2011 06:15:42 GMT"><meta http-equiv="Expires" content="Mon, 27 Aug 2012 06:15:42 GMT"></head><body><script>var ebayItemID=260842244623;var ebayItemRevisionTime=1314450508000;var ebayAskSellerURL='http://contact.ebay.co.uk/ws/eBayISAPI.dll?ShowSellerFAQ&frm=284&iid=260842244623&ssPageName=PageSellerM2MFAQ_VI&redirect=0&requested=qps.qualitypetsupplies';var bStoresNav=false;</script><script language='javascript'> 
var sUrl = "http://www.ebay.co.uk/itm/ViewItemDescV4?s2=0&nv=2"; 
</script><script type="text/javascript"> 

I’m guessing this is a limitation of the ebay code and you probably can’t edit the head section. It looks as though they are putting your page inside a custom table.

You may just have to over-ride some styles but I’lm not sure how that will work out. Try adding this to your css file to see if it has any effect.


#EBdescription{font-size:85%}
#EBdescription h1{font-family:impact}

it’s showing for me in both ie and firefox, is it the same if you refresh your page?

hey that worked!!! Good on you and many thanks for helping. How did you find the EBdescription?

There are a number of ways you can do this:

You could just view source of the main ebay page and then extract the url from the frame tag. Then paste that address in the browser and again just view source:


<html><head><meta http-equiv="Last-Modified" content="Sat, 27 Aug 2011 03:25:01 GMT"><meta http-equiv="Expires" content="Mon, 27 Aug 2012 03:25:01 GMT"></head><body><script>var ebayItemID=260842244623;var ebayItemRevisionTime=1314402518000;var ebayAskSellerURL='http://contact.ebay.co.uk/ws/eBayISAPI.dll?ShowSellerFAQ&frm=284&iid=260842244623&ssPageName=PageSellerM2MFAQ_VI&redirect=0&requested=qps.qualitypetsupplies';var bStoresNav=false;</script><script language='javascript'> 
var sUrl = "http://www.ebay.co.uk/itm/ViewItemDescV4?s2=0&nv=2"; 
</script><script type="text/javascript"> 
/**ThinViewJs**/ 
var ifr = function() {}; ifr.browserDetect = function() {this.bFirefox = this.bWebTV = this.bOpera = this.bNav = this.bIE = this.bSafari =this.bWin = this.bMac = this.bMacppc = this.bMactel =this.bWinXp = this.bXpSp2 = this.bAOL = this.bVista = false;this.iVer = this.fVer = -1;this.fMinorVer = 0;this.init = function() {var nv = navigator, agt = nv.userAgent.toLowerCase(), i = 0, ver;with (this){if (agt.indexOf('webtv') != -1){bWebTV = true;i = agt.indexOf('webtv/') + 6;}else if (agt.indexOf('firefox') != -1){bFirefox = true;i = agt.lastIndexOf('firefox') + 8;}else if (agt.indexOf('safari') != -1){bSafari = true;i = agt.lastIndexOf('safari') + 7;}else if(typeof(window.opera)!='undefined'){bOpera = true;i = agt.lastIndexOf('opera') + 6;}else if (nv.appName == 'Netscape'){bNav = true;i = agt.lastIndexOf('/') + 1;}else if (agt.indexOf('msie') != -1){bIE = true;i = agt.indexOf('msie') + 4;if ((agt.indexOf('aol') != -1) || (agt.indexOf('america online') != -1))bAOL = true;}ver = bOpera?window.opera.version():agt.substring(i);iVer = parseInt(ver);fVer = parseFloat(ver);fMinorVer = fVer - iVer;bWin = (agt.indexOf('win') != -1);bWinXp = (bWin && (agt.indexOf('windows nt 5.1') != -1));bVista = (bWin && (agt.indexOf('windows nt 6.0') != -1));bXpSp2 = (bWinXp && (agt.indexOf('sv1') != -1));bMac = (agt.indexOf('mac') != -1);bMacppc = (bMac && ((agt.indexOf('ppc') != -1) || (agt.indexOf('powerpc') != -1)));bMactel = (bMac && (agt.indexOf('intel') != -1));}}
this.init();return this;}
var ifr = function() {}; ifr.ebayAegis = function() { window.setTimeout = function(pFunc,pStart) { 
//nothing 
} 
window.setInterval = function(pFunc,pInt) { 
//nothing 
} 
}; window.onerror = function() { 
//nothing 
}; 
ifr.setHash = function() {var oCl = ifr.browserDetect();var re = new RegExp('^http\\://cgi\\.');var re2 = new RegExp('^(http\\://www\\.)([a-z]{2}\\.)?([0-9a-z]{5}\\.)?([a-z]{2}\\.)?([a-z]{4}\\.)([a-z]{3}|[a-z]{2})(\\.[a-z]{2})?(/itm/)');var re3 = new RegExp('^http\\://vi\\.');var rf = window.document.referrer;if (oCl.bSafari) {if ((rf.toString().match(re) !== null) || (rf.toString().match(re2) !== null)) {parent.location.replace(rf + '#bl');}} else {if (rf.toString().match(re3) !== null) {parent.frames[0].location.replace(sUrl + '&c=1#bl');}}};ifr.process = function(piTime) {var oCl = ifr.browserDetect();var browser,os;if (oCl.bWebTV) {browser = 'webtv';} else if (oCl.bFirefox) {browser = 'firefox';} else if (oCl.bSafari) {browser = 'safari';} else if (oCl.bOpera) {browser = 'opera';} else if (oCl.bNav) {browser = 'netscape';} else if (oCl.bIE) {browser = 'msie';}if (oCl.bWin) {os = 'windows';} else if (oCl.bWinXp) {os = 'windows xp';} else if (oCl.bVista) {os = 'windows vista';} else if (oCl.bXpSp2) {os = 'windows xp sp 2';} else if (oCl.bMac) {os = 'mac';} else if (oCl.bMacppc) {os = 'mac powerpc';} else if (oCl.bMactel) {os = 'mac intel';}};ifr.initClientLog = function() {var img = new Image();var bl = new Date().getSeconds();window.onerror = function(message, url, line) {if (typeof(window.iErrorCt) == 'undefined' && (typeof(errorLogUrl) !== 'undefined')) {img.src = errorLogUrl + '&item=' + ebayItemID + '&difJserror=1' + '&difJserrorDesc=' + message + ' on line ' + line + '&bs=' + browser + ' ' + oCl.fVer +  '&os=' + os + '&seller=' + sellerId;window.iErrorCt = 1;return true;}};if (typeof(piTime) !== 'undefined') {if ((typeof(piTime) !== null)  && (typeof(window.iErrorCt) == 'undefined')) {var lt = (bl-piTime)/1000;if (lt > clientErrorThresholdTime) {img.src = errorLogUrl + '&item=' + ebayItemID + '&difUrlResp=' + lt + '&bs=' + browser + ' ' + oCl.fVer +  '&os=' + os + '&seller=' + sellerId;}}}if (typeof(clientErrorLog) !== 'undefined') {if (clientErrorLog) {ifr.setHash();ifr.process(null);window.onunload = function() { window.onerror = null;};}}};</script> 
<table align="center" style="border-spacing: 0px;width:100%;"><tr><td>

[B]<div id="EBdescription">[/B]

<!-- Begin Description --> <link rel="stylesheet" href="http://www.qps-pets.co.uk/wp-content/themes/eStore/style.css" type="text/css" media="screen"><link rel="stylesheet" href="http://www.qps-pets.co.uk/wp-content/themes/eStore/style-Green.css" type="text/css" media="screen"><link rel="stylesheet" id="et-shortcodes-css-css" href="http://www.qps-pets.co.uk/wp-content/themes/eStore/epanel/shortcodes/shortcodes.css?ver=1.7" type="text/css" media="all"> <link rel="stylesheet" id="myStyleSheets-css" href="http://www.qps-pets.co.uk/wp-content/uploads/eshop_files/eshop.css" type="text/css" media="all"><link rel="index" title="Quality Pet Supplies, Dog Bath, Grooming supplies, dog grooming equipment" href="http://www.qps-pets.co.uk/"> <link rel="start" title="QPS Plastic Bath / Duck Pond / Water Trough x2" href="http://www.qps-pets.co.uk/2011/08/12/duck-pondx2/"> <link rel="prev" title="QPS Plastic Bath / Duck Pond / Water Trough x2" href="http://www.qps-pets.co.uk/2011/08/12/duck-pondx2/"> <link rel="next" title="QPS 250L Hay Soaker Trough Strong Simple" href="http://www.qps-pets.co.uk/2011/08/13/qps-250l-hay-soaker-trough-strong-simple/">
    <div id="header">

Or you could use Firebug for Firefox and just click around the page and see what’s what. It soon becomes evident how the page is constructed.

Alternatively you could just right click your page within the ebay page and then select this frame> show only this frame and then again just view source (that last option may be part of Firebug or the webdevtoolbar rather than a native Firefox option).

that’s interesting, thanks for that