Issues with padding and column breaks

[Mark Kessler]

Hello,

I think I already developed a firm grip of the concepts of the treesaver framework and is is actually a lot of fun to work with. But I am getting a few issues that I hope you can help me with.

I uploaded a test case which I tried to boil down to the essentials (see link below). I am getting two issues on this template (optimized for iPa d, has to be viewed on a screen with at least a resolution of 1024x768 pixel). 

The first issue, which is actually the more severe, is that on the end of the first column the text doesn't break clearly so on the second column there are a few pixel of the text from the first column.

The second issue is that I can not really find an explanation for the fact that the <header> container which encloses the image does get an additionally padding of 18 pixel (below the text which follows the image), no matter how high the image is.

I am aware of that all margins in the page should be a multiply of the line-height which is 24px in my case. But I was not able to solve this issue with this approach.

Here is the testt link:

http://asia-shop-goslar.de/app/webroot/test/

Any help will be highly appreciated!

Mark

[Mark Kessler]

Can you please help me with this? Any hint would be very appreciated.

[Pietro Giorgianni]

Hi,

I cannot open the link: http://isup.me/asia-shop-goslar.de says the site is down.

Does the first column contain elements without height or with a wrong height (inline images without the height attribute, elements that declare a certain height but are indeed taller and don't include "overflow: hidden", or the like?

Other two possible causes are fonts getting loaded late (after column calculation) or problems with fractions of pixels. Regarding the latter, are you seen the problem with every browser or just with some ones?

pietro

--
You received this message because you are subscribed to the Google Groups "Treesaver" group.
To unsubscribe from this group and stop receiving emails from it, send an email to treesaverjs...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Mark Kessler]

Hi,

the site is up and running now, it was only a temporary failure. I experience the problems on all browsers I tested, Chrome, FF and Safari. I removed all references to Web Fonts so it should also be not a Font related issue.

I think the issue has to do with the first figure on the page which is a group of headlines. I do not set a specific size on that figure because the headlines could be one or more lines.

Maybe if you look at the page you can see what the problem is.

Thank you!

Mark

[Pietro Giorgianni]

Hi,

yes, I can know see the site.

I see that the column contains an element <header> with class keepwithnext, containing an img and a very long paragraph. I'm not sure about what exactly is making it appear wrong, but:

* why such a big paragraph (too big to fit one column) inside an header?

* why mark the header as keepwithnext? if the header alone cannot fit one column, the header plus the next paragraph surely won't.

Try to simply remove the keepwithnext class.

pietro

[Mark Kessler]

Hi Pietro,

I removed keepwithnext but it didn't change it. I also tried to adjust the font size everywhere. The only thing that worked was to remove the "header" container. I still not understand the reasons but this seems to work now.

Thank you,

Mark

[Darren Ramowski]

I had similar issues when trying to use a web font. I believe it's down to the way the column sizes are calculated based on the line height.