New design

[chris666]

I'm currently debugging your new design. One problem I discovered first is the lesson navigation. On my browser (chrome) the "review" is not on the same row as "introduction" and "lesson materials" but beneath. Together with the fixed height of .ill-lesson-nav, this creates a rather ugly effect.

The problem is the width of .ill-tab. 33% percent looks quite reasonable at first. This is a common mistake. Between the elements there is usual a distance, so that 3 times 33% plus this distance is more than 100%. I reduced the width to 30% and now all three elements are well aligned.

BTW, I really miss the popup audio.

[Eran]

Hi Chris,

Thanks for the awesome feedback! I tried to duplicate the display issue you report, but I am unable to. Here on Chrome, Introduction, Lesson Materials, and Review are all on the same line (http://screencast.com/t/vu4y4DEZs). Is is possible that your zoom setting is not at 100%? Can you tell us which lesson and possible provide us with a screenshot.

As for the popup audio, this is still an option. Just click on the "Popout Player" icon (http://screencast.com/t/PYyups91). This will popout the player into a separate window allowing you to navigate the site while listening to the audio.

I hope this helps!

Eran

[chris666]

Thank you for the tip with the popup-player. I really couldn't figure out the meaning af this icon.

That's how your site looks on my MacBook:
http://www.screencast.com/users/chrAda/folders/Default/media/ffcb9629-70c3-4d41-9195-5818a1cf31fb

Christoph

[Eran]

Thanks Chris. I was able to reproduce this at 75% zoom on Chrome on my Mac Book Pro. On 100% zoom, I am unable to reproduce this. (http://screencast.com/t/1GXy4hLD) Nevertheless, I will pass this display bug to the developer in charge to troubleshoot further. Thanks again!

[mmmason8967]

I can reproduce the issue at 75% zoom in Chrome and in Firefox, but you have to take Opera all the way down to 20% zoom to get it to show up.

I found that setting width = 32.9% eliminated the problem on Chrome and Firefox until you get to 20% zoom. Setting width = 32.75% eliminated it completely. At 100% zoom (normal viewing), I can't see any noticeable difference between a width of 33% and a width of 32.75%.

マイケル

[chris666]

Here you can find a nice writeup of the problem:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Them author obviously assumes a default margin between the elements of 4px. So you have 8px in addition an 100-3x33= 1% left. As you have less than 800px width you will get a line break. This doesn't just depend on the zoom factor but obviously on the resolution of your device, too.

Personally, I would get rid of the height of .ill-lesson-nav. A line break wouldn't be so ugly and a absolute value in pixel is problematic since it isn't device-independent.

[eran7533]

@ mmmason8967 / @chris666 - Thank you both for the wonderful and very insightful feedback. I just got the word from our developer that a fix has been rolled out.