Magazine Category Blocks collapsing in Safari/Chrome

[barrya]

Hi!, I've spent a while testing this and reading up on solutions, and I think this is a bug related to Suffusion on Webkit browsers. I'm running Chrome 17.0.963.79 and Safari 5.1.3 on a Mac OS X 10.7.3. I've tested in Firefox 10 (looks fine there, though). Whether or not you consider this a bug with the browsers or a bug with your own code, I thought you and others who are going crazy like I am might like to know.

The issue: the magazine category boxes end before the content does, cutting off part of the last content there. There is an inline height value in a div that wraps around the ul category list. This is from the HTML generated by my site where this is happening (Minna Magazine theme front page)

Code: Select all

<div class="suf-mag-category suf-tile-2c bottom" style="margin-left: 0px; margin-right: 3px; height: 406px; ">
       <h2 class="suf-mag-category-title center">New Films</h2>
              <ul class="suf-posts-thumbnail">


Using 'Web Inspector'(Safari) or 'Inspect Element'(Chrome) the height metric for the UL list element is more than the 406px in the parent div above, so it's cut off.

I've been trying to fix it here myself, and have used .suf-mag-category {height: 100% !important;} in the custom css, which will get it to show the content, but it's then uneven and then takes away the choice of button positions in Suffusion Options Suffusion Options > Templates > Magazine > Button position (below the excerpt or at the bottom of the excerpt box).

Hope this was clear. I have this Button position setting set at "At the bottom of the excerpt box", but have tried it the over way. I've turned off all plugins, and taken out custom CSS. If anyone knows of the right CSS to resolve this better than what I have above, I'd be very appreciative.

The site I'm refering to is: http://dev.collectiveeye.org

Mac OS X 17.0.963.79 Chrome Screenshot:


Mac OS X 5.3.1 Safari Screenshot


I've also tested in Adobe BrowserLab, where their version of Mac OS X Safari looks the same. But their version of Chrome is only up to version 14, and that isn't having the same problem.

Thanks much, love your theme!

[sayontan]

Looks like the resize() event is not firing when invoked manually on your site. If you resize the browser it gets set fine.

I haven't seen this happen elsewhere.

[Flap]

I have same problem with Chromium (linux version of chrome).

[barrya]

Thanks for checking this, sayontan.

I see the inline height value change to the correct number when I resize. The size of this area controlled by some javascript magic, I assume. And that is the issue -- the resize() event not firing?

There is someone else who seems to be having this issue --http://aquoid.com/forum/viewtopic.php?f=4&t=8423&p=36362 -- I don't know if they are using Chrome/Safari/Webkit.

Flap, Did you find a solution?

[barrya]

I am just going to post a partial solution for this here for anyone else that stumbles on this since sayontan posted this in another thread:

Specify a height for this area via custom CSS

Code: Select all

.suf-mag-category { height: 300px !important; }

It's not ideal as the resize of this area is lost, so I think anyone that does this will want to keep an eye on the size of your title/excerpts but if you are having this problem, it's a way to keep the content from cutting off.

[2grafik]

Hello

I have the same problem in firefox (sometimes) and chrome (always when the page loads), resizing fixes it.

I don't have this problem with the category page but by using the tile layout for posts on the front page of my website

somehow the re-size event is not triggered and the divs have the wrong height for the content, I fixed it for now with given the divs a constant height by using the !important css thing.

but its not exactly and elegant solution. Is this a jquery problem with chrome? or has this to do with some js code in suffusion which doesn't work correctly. and is there a solution besides making the tiles a constant height?

[sayontan]

I honestly don't know if there is a better solution - maybe I will find one while trying to fix something else, but for now this is the only way out. Sorry.

[sharonleelu]

Hello,

After upgrading from Suffusion 3.8.2 to 4.3.0, I am noticing a similar but different issue on Safari, Chrome, and Dolphin browsers (webkit browsers) with the Magazine Template > Excerpt block and Category block. Here is what I am seeing:

Screenshot 1 (Safari and Dolphin browsers, MAC OS 10.5.8):
- Issue 1: Instead of displaying the Excerpts in 2 columns, the 4 Excerpts are trying to display in a single column and blocks off a part of the Category block header.
- Issue 2: Similarly, the Categories are not displaying in 2 columns


Screenshot 2 (Chrome, Windows 7):
- Issue 1: It looks like some content (I believe Category thumbnail) is getting wrapped *behind* the Category header.
- Issue 2: Also, the Category block is only displaying 2 posts from each Category even though I've configured Suffusion to display 5 posts per Category.


Screenshot 3 (Correct UI layout/rendering in FF & IE, Windows 7):
- This is a screenshot of how the page is supposed to look like.


Configurations:
a. From Templates > Magazine > Excerpts, I've configured:
- Maximum num of excerpts = 4
- Maximum num of excerpts per row = 2
b. From Templates > Magazine > Category Blocks, I've configured:
- selected 2 Categories blocks to show
- Maximum num of Category blocks per row = 2
- Maximum num of posts in category blocks = 5

I have also de-activated all of my plugins to make sure this is not a conflict with any plugins. I will PM you my URL since this is my test site.

Please help as there are features from Suffusion 4.3.0 that I would like to use. However, with the UI looking so off on Safari and Dolphin browsers, I won't be able to upgrade to the latest version.

Thank you!

[sayontan]

Interesting. I looked at your site on FF, Chrome and Safari and it rendered the same on all of them. Does the issue still exist or have you resolved it?

[Donal]

Same problem with me, have you got a solution or suggestions what to do?