3 columns blog layout broken in FF and IE but not in Chrome

I am using a 3 column blog layout that is behaving really strangely in FF and IE but works perfectly in Chrome.

The blog page is set up with a description, then 3 articles in 3 columns below it. Here is the link:
http://livelaughlove.com/lll-programs

And here is the code in Chrome:

Code: Select all

<div class="items-row  cols-3  row-0" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
  <div class="column-1" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">...</div>
  <div class="column-2" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">...</div>
  <div class="column-3" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">...</div>

However, in FF and IE the page is broken. The description is fine and the first column displays properly. However, the second and third columns are no longer children of the <div class="items-row" div but they seem to blow out of it. The result is column-1 is 1/3 of the page, column-2 and column-3 instead lose part of the styling and they no longer get the 33.3% width they need to work. This is what they look like in firebug (In IE is a similar mess):

Code: Select all

   <div itemtype="http://schema.org/BlogPosting" itemscope="" itemprop="blogPost" class="items-row  cols-3  row-0">
       <div itemtype="http://schema.org/BlogPosting" itemscope="" itemprop="blogPost" class="column-1">...</div>
   </div>
  <div itemtype="http://schema.org/BlogPosting" itemscope="" itemprop="blogPost" class="column-2">...</div>
</section>
<div itemtype="http://schema.org/BlogPosting" itemscope="" itemprop="blogPost" class="column-3">...</div>

As you can see, column-1 works fine and is inside the "items-row" div, but then after the first column is rendered column-2 falls outside it and column-3 falls outside the <section> element.
(Naturally, I edited the code a bit to make it readable and as similar as to what I see in Firebug as possible).

If I rename "com_content" under the template HTML directory, everything works. I will keep this as is at this link:
http://livelaughlove.com/lll-programs
Until this Monday. After that, I will rename com_content as it apparently fixes the problem well without major drawbacks.

Thank you.

Hi

Please prepare the page and tell me the exact url where I will be able to see it.

The link is the one I inserted in the OP:

http://livelaughlove.com/lll-programs

It now seem to be broken in Chrome as well. Here is a screenshot (I had to zoom out to capture a bigger area)

https://www.dropbox.com/s/t2kbc66aun6et ... 4%20PM.jpg

this is what it should look like (I did it by renaming com_content in the HTML folder of the template)

https://www.dropbox.com/s/2tfyr7zofh9op ... 9%20PM.jpg

Hi

Looks like content of article is not cut properly by script which is causing a validation error. Please send me an access to ftp and joomla panel. Please also check if the <readmore> line is not set between opened html tags.

There is no "read more" in that page.
The structure is simple. It's a category page, the blog above is the description and each of the columns below are articles. Each article has a module at the bottom.

Since I cannot wait any longer to fix this issue, I created a clone of the site and I will send you access to that. In the meantime I'll rename the com_content directory which fixes this issue on the live site.

EDIT: I went by exclusion and I basically renamed first each directory inside gk_storebox/html/com_content and then each file in the offending directory.

Step 1: I renamed gk_storebox/html/com_content/category and the page was fixed
step 2: I renbamed gk_storebox/html/com_content/category/blog_item.php and that fixed the site, so the error is in this file because once renamed the page looks fine.

Check your IM. Thank you for looking into this.

Hi

I have found a bug in file /html/com_content/category/blog_item.php. Lines were in wrong order. Works well in some article configurations that's why programmers missed it.

Lines 18 and 19 which looks like:

Code: Select all

   <?php if (($params->get('show_author')) or ($params->get('show_category')) or ($params->get('show_create_date')) or ($params->get('show_modify_date')) or ($params->get('show_publish_date')) or ($params->get('show_parent_category')) or ($params->get('show_hits')) or $params->get('show_print_icon') or $params->get('show_email_icon') or $canEdit or $params->get('show_title')) : ?>
   <div class="itemBody">


should be

Code: Select all

   <div class="itemBody">
   <?php if (($params->get('show_author')) or ($params->get('show_category')) or ($params->get('show_create_date')) or ($params->get('show_modify_date')) or ($params->get('show_publish_date')) or ($params->get('show_parent_category')) or ($params->get('show_hits')) or $params->get('show_print_icon') or $params->get('show_email_icon') or $canEdit or $params->get('show_title')) : ?>