Until version 6.11, the basic layout in ePages became structured by table elements. Let’s look at a typical ePages layout.
Until now, for example, the left menu bar was classified as the table element ‘td.navbarLeft’ which means ‘table cell navigation element on the left side’. The right menu bar was classified appropriately ‘tdNavbarRight’.
With version 6.11. of ePages the following HTML table elements are now omitted:
They are now replaced by the following DIV elements (DIV = division)
- „div.Middle” or „.Middle”
- „div.NavbarLeft” or „.NavBarLeft“
- „div.NavbarRight“ or „.NavBarRight“
- “div.ContentArea“ or „.ContentArea“
The special case: Internet Explorer 7
As so often, there is no rule without exception. In our case, this is the Internet Explorer 7, for which there had to be created special "copies" for three of the new DIV elements. They are classified as followed:
For the element div.Middle there is no need for a special copy for Internet Explorer 7.
Impact on self-written CSS code
So, what does this mean for you?
If you adapted the layout with the standard tools of the shop that you can find in the backoffice of your shop, there is no need to worry. Your shop will look the same after the update as it looked before it. However, if you have modified one of the table elements mentioned above with self-written CSS code to take advantage of enhanced layout options, you need to adjust the CSS code after the update.
Here’s an example:
This is a simple CSS code which you can use to manually hide the left column:
This manually entered command won’t work after the update as the variable ‘td.NavbarLeft’ can not be called anymore. To ensure that your changes are displayed again, check your CSS code and replace the "old" table element names with the "new " DIV. In our example, this will look like this.
To avoid display problems with the Internet Explorer 7 you need to add additional information into the code. The code will have to look like this:
That’s it. After you have made these simple changes to your old self-written CSS code your shop will look like before.