Layout issues troubleshooting

Last updated

Ecwid was designed to work and look fine in every browser and on every computer and mobile device. However, because same HTML page could look and behave differently in different browsers, it sometimes happens that a merchant finds an issue with a store page on some certain computer/browser. In this article, we will provide several recommendations on how to diagnose and fix such issues on your site.

  1. Pages layout is cut off, page elements alignment is broken, form input fields are too wide or too narrow.
  2. My store styles do not apply in IE browser - colors, fonts, sizes etc. are ignored and reset to the site's defaults 
  3. Error: This document doesn't contain the required <body> and </body> tags 

Pages layout is cut off, page elements alignment is broken, form input fields are too wide or too narrow.

Such issues in most cases happen because the store page on your site has an incorrect doctype definition. The doctype, in short, is a special tag that must be present in the very first non-empty string of your HTML document in order for browser to determine its display mode correctly. Mainly doctype exists for backwards compatibility - the older browsers did render the documents differently then the modern ones do. Hence to ensure the ability to display the document as it was meant by its author, a browser needs a little hint from the document, which mode to choose - older, newer, newest or super fresh. Thus, if a page has an incorrect doctype definition or doesn't contain one at all, the browser may render it wrong hence the mentioned layout issues. This often happens in IE browsers. 

In order to fix that, you will need to specify valid doctype in very first line of the store page code. You can find the list of commonly used doctypes here:

http://www.w3schools.com/tags/tag_DOCTYPE.asp

If you're not sure which one you need, you can use this one (paste this line into the beginning of your store page code):

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

It should properly work on the most websites. Please mind that this link should be the very first one in the page HTML code. 

NOTE: in some cases, IE browsers display an HTML document in incorrect mode even though the doctype is valid. That often happens because of the following meta tag in the head section of your page:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 

This code causes IE to use the old, obsolete rendering engine from the IE7 browser. It had a number of peculiarities in the way how it displayed some particular code, and in general the web developers are only encouraged to use the aforementioned code when they exactly need those peculiarities. In most cases, however, this code only causes your page layout to break. It is highly recommended to remove it. 

My store styles do not apply in IE browser - colors, fonts, sizes etc. are ignored and reset to the site's defaults 

This problem is in most cases caused by the peculiarity of Microsoft Internet Explorer browser up to version 9: the webpage can effectively refer to up to 31 external stylesheeets (CSS files). Everything beyond that limit will be ignored. Here is the official Microsoft knowledge base article on this limit:http://support.microsoft.com/kb/262161 

Ecwid brings only 1 style sheet containing its default theme and your custom CSS theme. This single Ecwid's style sheet is loaded as the latest on the page, which means that if your page already contains 30-31, the last stylesheet from Ecwid is ignored by Internet Explorer due to aforementioned limit on the number of stylesheets. Hence no styling for Ecwid is applied at all in such cases.

To overcome this you need to lower the number of external stylesheets used on that page, so that the total number of them is less than 30. This way Internet Explorer will render your pages correctly.

Error: This document doesn't contain the required <body> and </body> tags

This error appears if the Ecwid's script.js file (http://app.ecwid.com/script.js) is embedded outside the page <body> tags. That line loads the main script of Ecwid which starts preparing the page for embedding the Ecwid widgets. It requires the presence of <body> tag to work, but if you put the script.js line outside <body>, e.g. into the <head> section of the HTML document, then there is no <body> tag in the page by the time the browser starts executing Ecwid scripts. 

To fix this, you will need to move the script.js line inside the <body> element, i.e. place it between <body> and </body> tags in your store page source. Please do not forget to  remove all Ecwid integration codes from the <head> section of the page source.

Was this article helpful?
0 out of 1 found this helpful
Questions?
Get help
  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7