Template not working well in Mozilla Firefox

[alepia]

Hello!

I just changed my template which works well in italian language in chrome, while in french in all the browser there is a small space/break between the logo and the central part of the website.

While the biggest issue is that the website has broke down and the template is completely switched...

the website is www.alepia.ch

What shall I do? I guess it might be a stylesheet pproblem...

[kuroi]

Cross browser issues almost always point to problems with the site's XHTML structure.

This link shows that you have a lot of errors to be fixed, with a good possibility that the one (or ones) causing your problem are amongst them.

[alepia]

What's the file I should be working on, in order to remove this errors? I'm sorry but I am quite a noob with this

[kuroi]

Unfortunately that's something that we can't answer as that looks like a customised commercial template, so we don't know how it's been structured or where the errors have been introduced.

A good starting point is to switch (temporarily) to the Zen Cart default Classic template. That's virtually free of validation errors, so any that you see there have been introduced in your language define blocks. Any that reappear when you switch back to your current template are in that template.

[alepia]

a lot of errors are within the tpl_modules_dropdown_menu, but most of the errors I can't remove them as they would make the dropdown menu not working! Here is the code of this module:

<style type="text/css">

#zUL li {
	float:left;
	width:auto;
	position:relative;
	border-right-width: medium;
	word-spacing:inherit;
	border-top-color: #CCCCFF;
	border-right-color: #CCCCFF;
	border-bottom-color: #CCCCFF;
	border-left-color: #CCCCFF;
	table-layout:auto;
}


#zUL li ul {
	visibility:hidden;
	position:absolute;
}


#zUL li:hover ul {
	visibility:visible;
	background-color:#66bb00; /*change this to any color you want*/
}
</style>

<div id="navMainWrapper">
<div id="navMain">

<ul id="zUL">
    <div align="center">
      <!--Insert your links here-->
      </li>
    </div>
    <li>
      <a href="http://alepia.ch/shop/"><?php echo BOX_HOME; ?></a> </li>
    <li>
      <div align="justify"><a href="http://alepia.ch/shop/index.php?main_page=page_3"><?php echo BOX_HISTORY; ?></a>
          <ul>
            <li><a href="http://alepia.ch/shop/index.php?main_page=page_2"><?php echo BOX_ALEPPO; ?></a></li>
            <li><a href="http://alepia.ch/shop/index.php?main_page=page_4"><?php echo BOX_SAPONE; ?></a></li>
            <li><a href="http://alepia.ch/shop/index.php?main_page=fabbricazione"><?php echo BOX_FABBRICAZIONE; ?></a></li>
          </ul>
      </div>
    </li>
    <li>
      <div align="justify"><a href="http://alepia.ch/shop/index.php?main_page=consigli"><?php echo BOX_CONSIGLI; ?></a>
          <ul>
            <li><a href="http://alepia.ch/shop/index.php?main_page=acne"><?php echo BOX_ACNE; ?></a></li>
            <li><a href="http://alepia.ch/shop/index.php?main_page=psoriasi_eczema"><?php echo BOX_PSORIASI; ?></a></li>
            <li><a href="http://alepia.ch/shop/index.php?main_page=consigli"><?php echo BOX_CONSIGLI; ?></a></li>
            <li><a href="http://alepia.ch/shop/index.php?main_page=capelli"><?php echo BOX_CAPELLI; ?></a></li>
            <li><a href="http://alepia.ch/shop/index.php?main_page=shampoo"><?php echo BOX_SHAMPOO; ?></a></li>
            <li><a href="http://alepia.ch/shop/index.php?main_page=gommage"><?php echo BOX_GOMMAGE; ?></a></li>
            <li><a href="http://alepia.ch/shop/index.php?main_page=how_to_choose"><?php echo BOX_CHOOSE; ?></a></li>
          </ul>
      </div>
    </li>
    <li> 
      <div align="justify"><a href="http://alepia.ch/shop/index.php?main_page=pics"><?php echo BOX_GALLERY; ?></a> </div>
    </li>
    <li> 
      <li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_CONTACT; ?></a></li>
    </li>
    <li>
      <div align="justify"><a href="http://alepia.ch/shop/index.php?main_page=pro"><?php echo BOX_PRO; ?></a> </div>
    </li>
    <li>
      <div align="justify"><a href="http://alepia.ch/shop/index.php?main_page=shopping_cart"><?php echo BOX_HEADING_SHOPPING_CART; ?></a> </div>
    </li>
    <div align="justify"></a>
      </li>
    </div>
</ul>
<div align="justify"><br class="clearBoth" />
</div>
</div>
</div>

[alepia]

The problem is the Header dropdown module!

[gjh42]

At a quick look, there are several HTML errors there, starting with a missing <li> after the first <ul id="zUL">

<ul id="zUL">
    <div align="center">
      <!--Insert your links here-->
      </li>
    </div>
    <li>
      <a href="http://alepia.ch/shop/"><?php echo BOX_HOME; ?></a> </li>

The div in red needs to be inside a <li> </li>, not directly inside the <ul>.

[alepia]

I re wrote the dropdown menu part of the code and I got this:

<style type="text/css">

#zUL li {
float:left;
width:auto;
position:relative;
border-right-width: medium;
word-spacing:inherit;
border-top-color: #CCCCFF;
border-right-color: #CCCCFF;
border-bottom-color: #CCCCFF;
border-left-color: #CCCCFF;
table-layout:auto;
}


#zUL li ul {
visibility:hidden;
position:absolute;
}


#zUL li:hover ul {
visibility:visible;
background-color:#66bb00; /*change this to any color you want*/
}
</style>

<div id="navMainWrapper">
<div id="navMain">

<ul id="zUL">
<!--Insert your links here-->
<li><a href="http://alepia.ch/shop/"><?php echo BOX_HOME; ?></a> </li>
</li>
<li><a href="http://alepia.ch/shop/index.php?main_page=page_3"><?php echo BOX_HISTORY; ?></a>
<ul>
<li><a href="http://alepia.ch/shop/index.php?main_page=page_2"><?php echo BOX_ALEPPO; ?></a></li>
<li><a href="http://alepia.ch/shop/index.php?main_page=page_4"><?php echo BOX_SAPONE; ?></a></li>
<li><a href="http://alepia.ch/shop/index.php?main_page=fabbricazione"><?php echo BOX_FABBRICAZIONE; ?></a></li>
</ul>
</li>
<li><a href="http://alepia.ch/shop/index.php?main_page=consigli"><?php echo BOX_CONSIGLI; ?></a>
<ul>
<li><a href="http://alepia.ch/shop/index.php?main_page=acne"><?php echo BOX_ACNE; ?></a></li>
<li><a href="http://alepia.ch/shop/index.php?main_page=psoriasi_eczema"><?php echo BOX_PSORIASI; ?></a></li>
<li><a href="http://alepia.ch/shop/index.php?main_page=consigli"><?php echo BOX_CONSIGLI; ?></a></li>
<li><a href="http://alepia.ch/shop/index.php?main_page=capelli"><?php echo BOX_CAPELLI; ?></a></li>
<li><a href="http://alepia.ch/shop/index.php?main_page=shampoo"><?php echo BOX_SHAMPOO; ?></a></li>
<li><a href="http://alepia.ch/shop/index.php?main_page=gommage"><?php echo BOX_GOMMAGE; ?></a></li>
<li><a href="http://alepia.ch/shop/index.php?main_page=how_to_choose"><?php echo BOX_CHOOSE; ?></a></li>
</ul>
</li>
<li><a href="http://alepia.ch/shop/index.php?main_page=pics"><?php echo BOX_GALLERY; ?></a>
</li>
<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_CONTACT; ?></a>
</li>
<li><a href="http://alepia.ch/shop/index.php?main_page=pro"><?php echo BOX_PRO; ?></a>
</li>
<li><a href="http://alepia.ch/shop/index.php?main_page=shopping_cart"><?php echo BOX_HEADING_SHOPPING_CART; ?></a>
</li>
</ul>
<br class="clearBoth" />
</div>
</div>

I removed 20+ errors but I still get one error which I don't know how to solve without breaking the module. The error is:

Line 129, Column 23: document type does not allow element "style" here
<style type="text/css">
✉
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

[gjh42]

It tells you what the problem is: such as a "style" element in the "body" section instead of inside "head". The way to fix this is to remove the entire style section from the PHP file and put its rules into the stylesheet where they should have been.