Stylesheet Colors Change Not Applied To Tablet

Quote:

---

Originally Posted by NWCE

Thanks for your continued reply mc12345678 and sorry for the delay in response as I had to wait on my friend on the portrait and landscape question as I don't own an iPad.

I am using v.,1.5.8, not the newest v.1.5.8.a on my site, and according to my friend, this problem of the footer display is both in landscape and portrait views.

I hope that this info helps to further diagnose why the footer is displaying this way on tablets.

Thanks again!

---

So, what I'm seeing is that on many of the main pages of your site, the template is appearing correctly; however, on the product information page(s), this is where there appears to be an extra </div> tag or perhaps "misplaced" tag. For some reason (possibly due to some other page modification) the code section containing the following:

Code:

---

<div id="navSuppWrapper" style="max-width: 100%; margin: auto;"><div id="navSupp">
<ul>
<li><a href="Site URL">Home</a></li>
  <li><a href="Site URL/index.php?main_page=specials" rel="noreferrer noopener" target="_blank">Specials</a></li>
  <li><a href="Site URL/index.php?main_page=contact_us" rel="noreferrer noopener" target="_blank">Contact Us</a></li>
</ul>
</div>
</div>

---

is inside of the tag when it should be outside of it as seen everywhere else.

And as I've tried to back through the code for the expected placement(s) of the tag and attempted to visually edit the inspection screen, I'm not seeing where the imbalance is located. I'm running on fumes at the moment, but it appears as I said that there is some modification to the product information template that is affecting the html layout.

Hi mc12345678....thanks for taking a look at this!

I am not sure why there would be a code modification such as this.....as I had added the specials and contact us to the footer via EZpages in the Admin. Is that not a correct way to do this?? I have tried turning off the Contact Us and Specials in the footer (and having them only in the Nav Bar) and this did not make any difference to the tablet display....it is still displaying the footer incorrectly as I had shown in my previous image.

I have looked for this code in tpl pages in my custom folder (using Developers Toolkit) and cannot find this code. This code only appears in /common/tpl_footer.php Can you point me to where you see this???

Thanks again

Quote:

---

Originally Posted by mc12345678

... but it appears as I said that there is some modification to the product information template that is affecting the html layout.

---

Butting in... @mc12345678 is referring to includes/templates/mcsite23/templates/tpl_product_info_display.php, check for any changes you may have made to this file, especially check for missing <div> or </div> tags.

If that is unsuccessful I would suggest working through the HTML errors on the product page - doing so might shine a light on the issue (aswell as being worthwhile from Google's point of view), enter the URL at this link and you'll see what I mean, https://validator.w3.org/nu/

If the above take a while then in the meantime I believe adding 'clear:both' to /includes/templates/mcsite23/css/responsive_default.css, line #380 will work (check other pages to make sure this doesn't affect them)

Code:

---

div#headerWrapper,div#navSuppWrapper {width:100%;margin:auto;clear:both;}

---

Thanks for your suggestion on combing through the tpl_product_info_display.php I will do this and post back what I find out.

I have now gone through my tpl_product_info_display.php file and I have confirmed that there are no opening <div> tags without closing ones. The only modification to this file was the addition of the Advanced Cross Sell II code near the end of the file.

I very well could be mistaken, but there is obviously a call somewhere to display the footer on the Product Info page (in tablet mode) and it is misplaced in terms of its location. When it displays on every other device it works well but on tablet it does not. Is there a file that specifically deals with tablet mode display?? Could it be in there??

Thanks again for the help.

Quote:

---

Originally Posted by NWCE

I have now gone through my tpl_product_info_display.php file and I have confirmed that there are no opening <div> tags without closing ones. The only modification to this file was the addition of the Advanced Cross Sell II code near the end of the file.

I very well could be mistaken, but there is obviously a call somewhere to display the footer on the Product Info page (in tablet mode) and it is misplaced in terms of its location. When it displays on every other device it works well but on tablet it does not. Is there a file that specifically deals with tablet mode display?? Could it be in there??

Thanks again for the help.

---

i think if you look at simon's post above, he recommends using an online validator.

i would use the on-line validator to ensure that you have valid html code prior to continuing.

looking at the code will not tell you if you have a stray div or if you have valid html.

it's must easier using a validator tool.

best.

Thinking about it a little more, some of the changes in software versions had also been to attempt to remove html from language file defines. Depending on how the latest upgrade was performed it could be possible that some product_info language define desired to be kept also had html in it. Trust me I'm shooting spitballs here. I agree, using an html validator would make the inspection easier. Might suggest also inserting some inane html code at desired locations to be able to track the impact of review.

Part of me also was wondering about the possibility of some sort of imbalanced php closure such that some tag or another is unfortunately outside of a grouping. Again, spitballing.

If resolving the HTML errors doesn't help, it would be worth switching templates to confirm that the error is indeed within the mcsite23 template files.

and there's this: https://docs.zen-cart.com/user/troub...d-odd-problems

Thank you both mc12345678 and simon1066 for your continued suggestions and replies!

I will work on using the online validator and continue to comb through things as well. If you guys think of anything else to try or if I find the error I will post back.

Thanks again!

I have used the online validator and there were no errors causing this display issue.

The results show several:
- Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.
- Alt attribute on image is empty
- The type attribute is unnecessary for JavaScript resources.

Just wanted to update on the results of this.