Misplaced <b> tag causing layout issues

Hi Guys,

As you can see on the following page

http://kitchenwarehouseltd.com/complete-kitchen-units/roma-classic/brilliant-white-units

the left column is being displayed at the bottom of the page. It seems to be that it is wrapped in a <b> tag causing the issues. Unfortunatley I cannot find where this tag is to delete it and fix the problems.

do any of you guys have any ideas where I may find this?

Many thanks,
Daniel

DannyVarley:

... It seems to be that it is wrapped in a <b> tag causing the issues....

What makes you think a <b> tag causes the distorted layout? The <b></b> tags are to bold some text but would not cause that misalignment.

Where did you get that template from? It does not seem to comply with ZC standards.

i would use an html validator. oince you get your html cleaned-up you can then more easily troubleshoot any layout problems.

see:

https://validator.w3.org/
http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fkitchenwarehouseltd.com%2Fcomplete-kitchen-units%2Froma-classic%2Fbrilliant-white-units&warnings=yes

As Frank18 hinted, have you asked the template author for help?

I've seen similar things with improper setup of a responsive template sidebox layout or related settings. (looks OK on a phone or tablet)
I had a "DUH" moment after detailed perusing of the template's README setup.

Hi Guys,

So here is where it gets a little confusing and hard to explain. My store uses two main product types which are kitchen units and kitchen doors and there are also normal products. On only the kitchen units listing page is where it is displaying the layout wrong. If you look at a listing page for the product of kitchen doors you will see the layout is how it should be:
http://kitchenwarehouseltd.com/replacement-kitchen-doors/high-gloss

If you inspect the column you will see on the listing for the units that is not working that the column is wrapped in <b> </b> but on the listing for the doors there is no <b> </b> and it is working how it should!

I feel that it is something I have changed recently but I just cannot figure out what template file would cause this or what I might have done. I hope I explained myself correctly!

Even though the template is very different I know its my error and I just cant figure out what I have done to make it wrong!

Many thanks,
Daniel

If continuing to indicate that other validaton issues take no part in the display of this product/category and seeing as you use a uri rewriter, it is not as apparent as when using the default ZC uris, but are the product type in both "categories" the same? (Ie. Product-general)?

Do you have different css files loaded for different categories/products/etc...? There is a "help" file (or should be) in the includes/templates/template_default/css directory.

Use the admin>tools>developers toolkit to search for <b>

The two different categories both have different product types in, the one that is having the layout issues only include the product_unit product type with an id of "8" and the other products all display fine. This leads me to believe it is one of the template files for the product_units product type that is causing the issue.

I just cant think for the life of me what the product_unit template file will be that is causing the issue as has all been changed quite a bit. I do have a backup where I feel I might have to start comparing files to see what is different and see if I can find what has changed this way.

Many thanks,
Daniel

We also have a test site in which I can see that the column is where it should be.

Many thanks,
Daniel

DannyVarley:

The two different categories both have different product types in, the one that is having the layout issues only include the product_unit product type with an id of "8" and the other products all display fine. This leads me to believe it is one of the template files for the product_units product type that is causing the issue.

I just cant think for the life of me what the product_unit template file will be that is causing the issue as has all been changed quite a bit. I do have a backup where I feel I might have to start comparing files to see what is different and see if I can find what has changed this way.

Many thanks,
Daniel

The main "driving" file would most likely be: tpl_product_unit_default.php if in a non-rewritten uri the main_page parameter = product_unit_info. This file would be expected to be found in the override folder for your template: includes/templates/YOUR_TEMPLATE/templates/tpl_product_unit_default.php

From/within that file, it would call on other things as well, which would/could contribute to the issue...

But there could also be something in the header_php.php file or other files loaded in that directory (all ending with .php will be loaded) associated with that product type: includes/modules/pages/product_unit

Didn't capture the post, but if you have a working copy and a broke copy, pull out your trusted comparison tool such as winmerge, beyond compare, etc... (Beyond compare offers live-site to live-site comparison).

Perfect, Ill start looking around those files and if nothing works I will start comparing the files to see the changes!

Many thanks for all your help. I will update the thread when I find the culprit!

Daniel

May I suggest using the tool barco57 recommended to search for: section group... It looks like there are some extra "closures" that are basically changing how CSS is applied. Looks like one reason that it was stated that the template doesn't follow typical ZC formatting is that the left column is drawn after the center column, instead of in series from left to right... This could result in the CSS not being "properly" applied and therefore not "shifted" up from the end of the middle content...

danny,
i would highly recommend getting your html validated using one of the tools i previously posted or anything else.

that said, i AGREE with you that it is the <b></b> tags that are causing your problem.

using the developers toolkit to search for a <b> tag could be problematic as i'm guessing there area lot of those tags. i would search for:

or some part thereof... the <b> tag that should not be there is right above that; and you would also want to remove the closing </b> tag.

good luck!

Did an analysis using the html validator as suggested earlier and I am getting 1 warning, 25 errors and 1 fatal error. the validator can not even complete the analysis.

28. Error: End tag form seen, but there were open elements.

From line 899, column 1; to line 899, column 7

arBoth"/>↩</form>↩</div

29. Fatal Error: Cannot recover after last error. Any further errors will be ignored.

From line 899, column 1; to line 899, column 7

arBoth"/>↩</form>↩</div

There seems to be no opening <form> tag.....

So, using developers tool kit I would be looking for </form> (instead of <b>) and eliminate that.

That </form> tag does not exist in other product listings.

Need to (partly) correct my last post.

In the problematic listing you have

<form name="multiple_products_cart_quantity" action="http://kitchenwarehouseltd.com/complete-kitchen-units/roma-classic/brilliant-white-units?action=multiple_products_add_product" method="post" enctype="multipart/form-data"><input type="hidden" name="securityToken" value="some...value"/>

(rest of the code)

</form>

But still, none of the other product listings (which display as desired) contain these tags.

frank18:

Did an analysis using the html validator as suggested earlier and I am getting 1 warning, 25 errors and 1 fatal error. the validator can not even complete the analysis.

There seems to be no opening <form> tag.....

So, using developers tool kit I would be looking for </form> (instead of <b>) and eliminate that.

That </form> tag does not exist in other product listings.

Start from the start. Sometimes fixing one will cascade down and fix others. For example, fixing 4 (remove ;) should fix 5.

One of your first errors is after this line:

<meta name="description" content="Welcome to Kitchen Warehouse UK. We are a wholesale retailer of luxury kitchens including kitchen doors, units, taps and more! Buy online today!
"/>

There is a hard return after the !. I'm not sure but it might be causing your problems. Oh, and when I said "start from the start" I meant top.

seems everybody is overthinking it...use the tools...when inspecting the page in chrome and editing the html for the page and removing the open and closing <b> tags that are wrapped around the entire left column contents, the page displays as expected. So that would mean finding where the stray <b> tag is being inserted and removing it. bold tags just don't appear out of nowhere...

barco57:

seems everybody is overthinking it...use the tools...when inspecting the page in chrome and editing the html for the page and removing the open and closing <b> tags that are wrapped around the entire left column contents, the page displays as expected. So that would mean finding where the stray <b> tag is being inserted and removing it. bold tags just don't appear out of nowhere...

Yep, I could replicate this in Firefox - you are spot on (overthinking all right.. :laugh:)

Guess one way of finding the file is searching for

and locating the <b></b> near that block

[QUOTE=frank18;1298705]Yep, I could replicate this in Firefox - you are spot on (overthinking all right.. :laugh:)

Guess one way of finding the file is searching for

Sorry, I missed barco response. Yes, that would fix that but I still think OP should fix other errors too.