Skip to main content

5 replies

Inconsistent Rendering

I idsMember
I have a problem with HTML code not displaying consistently.

I am trying to put an extremely simple table in my listing. So simple in fact here is an image of it as it should show according to FireFox and Internet Explorer:



So, now that we know how it is supposed to look, I turn my attention to creating a New Listing and copy the same HTML code on to the Auctiva Item Description editor and get this:



I can instantly see there is something wrong. Some of the rows, which I have highlighted in orange here:



are not the same 1px high they should be as shown in FF and IE.

The code for this is:
 
<table height="198" width="960">
        <tbody>
                <tr height="22">
                        <td colspan="2" style="width:110px;text-align:center;font-size:9pt;padding-right:4px;font-style:normal;color:#333333;background-color:#EAEAEA;">ABC</td>
                </tr>
                <tr height="12">
                        <td nowrap="nowrap" width="110"> </td>
                        <td> </td>
                </tr>
                <tr height="1">
                        <td width="110"> </td>
                        <td bgcolor="#EAEAEA" color="#333333" size="9" style="normal"> </td>
                </tr>
                <tr height="29">
                        <td style="width:110px;text-align:right;font-size:9pt;padding-right:4px;font-style:normal;color:#333333;background-color:#EAEAEA;">DEF</td>
                        <td style="padding: 0px 0px 0px 15px;">test1</td>
                </tr>
                <tr height="1">
                        <td nowrap="nowrap" width="110"> </td>
                        <td bgcolor="#EAEAEA" color="#333333" size="9" style="normal"> </td>
                </tr>
                <tr height="29">
                        <td style="width:110px;text-align:right;font-size:9pt;padding-right:4px;font-style:normal;color:#333333;background-color:#EAEAEA;">GHI</td>
                        <td style="padding: 0px 0px 0px 15px;">test2</td>
                </tr>
                <tr height="1">
                        <td nowrap="nowrap" width="110"> </td>
                        <td bgcolor="#EAEAEA" color="#333333" size="9" style="normal"> </td>
                </tr>
        </tbody>
</table>


OK, so this doesn't work. So I look for a compromise and come up with this, as shown in the Auctiva Item Description editor:



Looks kind of right. But wait. When I preview the listing, this is how it shows:



the colours have miraculously changed from a grey to black just by clicking on a preview button.

The code for this is:
<table border="0" cellpadding="1" cellspacing="1" height="100" style="width: 960px;" width="622">
        <tbody>
                <tr>
                        <th colspan="2" style="text-align: center; vertical-align: middle; background-color:#EAEAEA; font-size:9px; padding: 6px 0px">ABC</th>
                </tr>
                <tr>
                        <th colspan="2" style="height: 0px;"> </th>
                </tr>
                <tr>
                        <th style="height: 0px; width: 20%; text-align: right; vertical-align: middle; background-color:#EAEAEA; padding: 6px 15px 6px 0px; font-size:9px;">DEF</th>
                        <th style="height: 0px; width: 80%; text-align: left; border-width: 1px 0px; border-color: #EAEAEA #0; border-style:solid; padding: 6px 0px 6px 15px">test1</th>
                </tr>
                <tr>
                        <th style="height: 0px; width: 20%; text-align: right; vertical-align: middle; background-color:#EAEAEA; padding: 6px 15px 6px 0px; font-size:9px;">GHI</th>
                        <th style="height: 0px; width: 80%; text-align: left; border-width: 1px 0px; border-color: #EAEAEA #0; border-style:solid; padding: 6px 0px 6px 15px">test2</th>
                </tr>
        </tbody>
</table>


Has anyone else had issues where the listings have not displayed the same between the preview and the final listing? Does anyone know what can be done to resolve this?

Support does not see this as a problem and have advised I seek help from an HTML expert because it is not their software causing these issues!!

I'm glad I just didn't dive in and pay for a subscription without first trying this out. May seem trivial but if it ignores fundamentals and changes things without asking, what else can happen which is undesirable?

Thanks
Original Post

Replies sorted oldest to newest

A auctivagregCTO
IDS,
I took your initial snippet of html and added it the and it added it to the Item Description section of a new listing



ensuring when I pasted the html I was in the "Source" view in the editor by clicking the Source button. When i previewed the item using the auctiva preview button I see



Which matches your image of what it's supposed to look like. If you are entering raw html in the Item Description with the "Source" button depressed, unclicking the "Source" button is not an actual preview of what your item description will look like on ebay. The editor control itself has styling being applied to it as a part of the overall lister page. i.e. html styling used by the Auctiva lister page is being applied to the editor in non-source mode, that won't be applied when the item description is rendered on ebay.

When using the source view of the editor, the html is appropriately rendered in the preview page (button at the bottom of the lister page) so you should be good to go.
A auctivagregCTO
Thats awesome you provided a video, much appreciated and super helpful. I see what your seeing now, if perform the same actions in the Chrome, Safari or Microsoft Edge/IE11 browsers, you'll see the layout/rendering you expect. The issue you see is an rendering difference with the firefox browser and they way firefox is interpreting the inline style you've applied to the html, not an issue in the Auctiva item description editor. Your good to go, buyers using Chrome, Safari or Edge (about 90% of the ebay traffic) will see the description as you intended.

You might be able to change some of your inline styling to get a consistent look across all browser (at least the big 4 of Chrome, Safari, IE/Edge, firefox), for example the height attribute is not supported in HTML5 and modern browsers (see https://www.w3schools.com/tags/att_td_height.asp), you might be able to get a consistent layout using inline CSS like 
 style="display: block;max-height: 5px;"
on your <td> tags.
I idsMember
Hi Greg,

Thanks for replying.

I've tried IE11 and Chrome and I get the same thing in both of them so it must be something to do with the computer perhaps? Some 'global' setting which effects all of the browsers.
I'll have to try another computer just to see what happens there!!

I've tried
quote:
<tr height="29">
<td style="width:110px;text-align:right;font-size:9pt;padding-right:4px;font-style:normal;color:#333333;background-color:#EAEAEA;">DEF</td>
<td style="display: block;max-height: 5px;padding: 0px 0px 0px 15px;">test1</td>
</tr>

But I cannot honestly see any difference.... May have something to do with the 'common' problem I'm having across all broswers, perhaps??????
I idsMember
Interesting....

I've now tried all the common browsers on two computers and they are all the same - as I get in the original post Confused

If Greg gets the 'correct' effect, that is to say how it's supposed to look, but I cannot on different computers and different browsers how do I guarantee who will see what???

Do I take the risk... Roll Eyes lol

Add Reply

Post
Copyright © 1999-2018 Auctiva.com. All rights reserved.

Membership Required

We're sorry. You must be signed in to continue. Sign In or Register
×
Are you sure you want to remove from your Block List?
×
Loading...
×
When you block a person, they can no longer invite you to a private message or post to your profile wall. Replies and comments they make will be collapsed/hidden by default. Finally, you'll never receive email notifications about content they create or likes they designate for your content.
Note: if you proceed, you will no longer be following .
×
Advanced Search
Advanced Search
Link copied to your clipboard.
×