Session.org - Problem with New Layout

@Jeremy

Having he main headings on the top of the page is a definite improvement.

Problem is though, I’m now having problems with overlapping and superimposed text within the main body of the screen - so session.org for me (and no doubt for many others) has become virtually unusable.

My platform? Win XP Pro - IE8 web browser.

And (before anyone asks), I’ve tried altering the zoom in IE8. That cures the text overlap, but the text is then too small to be readable.

Mix, I’m currently tweaking the layout for IE8. Please hold on to your feedback till I’m done. Thanks.

Wow! That was a quick response!

Feedback on hold …

I cannot download or play the tunes using the new layout

MK

Right. I’ve finished making tweaks for Internet Explorer 8 and Internet Explorer 7. That layout issue you were experiencing should be all fixed now, Mix.

For anyone using a modern browser, you should notice no difference whatsoever. 😉

Still working on the midi playback issue. That’s clearly a problem in a lot of browsers.

Thanks, Jeremy - but unfortunately I still have the same overlapping/superimposed text problem on the summary pages: e.g. Tunes, Discussions etc.

You might need to shut down your browser and open it up again. Either that or try holding down the shift key while you hit refresh in the browser. It sounds like your browser is caching the older version of the style sheets.

Jeremy: “You might need to shut down your browser and open it up again. Either that or try holding down the shift key while you hit refresh in the browser. It sounds like your browser is caching the older version of the style sheets.”

@ Jeremy: Actually, I had already tried all those things you you suggested (as well as re-booting my PC) - none of which cured the problem.

However, a few minutes ago I tried switching into IE8 “Compatabilty Mode”, then back out of it again. That cured the overlapping/superimposed text problem .

However, it also created a new problem. I now have to scroll sideways (as well as the expected vertical scroll) in order to read what is on the screen.

Q. Are your web pages within the site configured for a fixed screen width?

“Are your web pages within the site configured for a fixed screen width?”

For most browsers, no. But for older versions of Internet Explorer (less than 9), yes. Because those browsers don’t understand media queries I kind of have to apply a minimum width. I’ve gone with 960 pixels. Any narrower than that and the navigation starts to fall apart.

But like I said, every other browser gets a more flexible layout.

I have to report that I’ve just opened The Session with IE8 (using Win XP) and didn’t have any of the problems Mix is experiencing. I guess that isn’t particularly helpful for him, but it does suggest that it’s something idiosyncratic to his set-up.

Jeremy “ I kind of have to apply a minimum width. I’ve gone with 960 pixels”.

Q. Anything mission-critical about your 960 pixel choice? That lies in between with first two screen resolutions offered by Windows XP:

800 x 600
1024 x 768

(i.e 960 lies between a screen width of 800 pixels and a screen width 1024 pixels).

The inference is that I would have apply a minimum of 1024 x 768 resolution to avoid the problem of sideways scrolling. The problem for me (and maybe others) is my eyes cannot cope with any screen resolution greater than 800 x 600.

Incidently, I didn’t have the sideways scrolling issue with the new session.org, until the recent change.

Scutcher: " … and didn’t have any of the problems Mix is experiencing. I guess that isn’t particularly helpful for him, but it does suggest that it’s something idiosyncratic to his set-up.

@Scutcher: Nothing “idiosyncratic” about my PC set-up - not unless you consider having a poor eyesight and having to set a screen resolution of 800 x 600 as being “idiosyncratic”.

If you set your screen resolution to 800 x 600, I reckon that you too will experience the sideways scrolling problem.

Well, Mix, the thing is that every other browser does get a flexible layout so your 800 pixel wide resolution would work well on Chrome, Firefox, or any other modern browser that understands CSS media queries. Are you in a position to switch browsers?

The only other option for IE8 and below is to go back to simply serving up the small-screen layout, which is what was happening before today. I’m guessing that for most IE8 users, that would be less desirable.

Anyone else out there using IE8 (or IE7 even)? Is the “new” layout preferable to simply getting the linearised content?

Mix,

My screen setting is 800x600 and, as I said, I don’t experience any problems.

At 800 by 600, 100% zoom, IE8 and Windows XP I do need to scroll horizontally but when scrolled all the way to the right all that is missing on the left is the left-hand margin of these comments. I can see all the text.
At zoom 125% (CTRL+ once from 100%) it won’t all fit.

Mix - I know it won’t be much use for most other applications but using full screen resolution and then CTRL+ repeatedly in IE8 until the text gets back to what it was at 100% and 800 by 600 is MUCH easier to read.

Jeremy: “Are you in a position to switch browsers?”

A. Possibly. But I don’t really wish to, just for one website.

Jeremy: “The only other option for IE8 and below is to go back to simply serving up the small-screen layout, which is what was happening before today.”

Q. Is some kind of a compromise possible to get the best of both worlds? There seems to be quite a lot of white space on the left-hand margin. If that white space weren’t there, I’d have no need to sideways-scroll to the right.

Scutcher: “My screen setting is 800x600 and, as I said, I don’t experience any problems.”

Q. What is your “Zoom” setting?

My zoom setting is 100%.

Thanks, David50 and yes, I’ve already played around with the zoom settings. But as you imply, it’s a workaround, rather than a solution.

“when scrolled all the way to the right all that is missing on the left is the left-hand margin of these comments. I can see all the text.”

Yes indeed. It’s the big whitespace margin that forces the need to right-scroll. But I don’t understand the need for that wide margin. Maybe I’m missing something.

@Scutcher:

Just to clarify - I gather that you are using IE8 on WinXP or XP Pro with a screen resolution of 800 x 600 pixels with an IE 100% zoom and that you can see the full screen width of ALL pages of session.org without any sideways scrolling.

Even Jeremy seems to be saying that’s not possible.

So how are you doing it?

I can see how switching browsers for one website would be frustrating. All I can suggest is you try another browser out and, if you like it, run with it for everything. I always used to use Internet Explorer. I have used Chrome for a while now and do find it better.

As an aside, and rather annoyingly, I do have to switch to Internet Explorer if I want to change my profile pic or cover pic on Facebook as it doesn’t appear to let you crop the pictures in Chrome. That definitely is outside Jeremy’s list of problems however.

Mix - It is all visible at one step out on the zoom - 75%

I think most programs these days have a way of getting larger, easier to read text, at higher screen resolutions. This 800 by 600 is doing my head in, though I agree having to scroll right every time after going to a new page is annoying. The only things in that wide margin are the Log In and Logout functions

“It’s the big whitespace margin that forces the need to right-scroll. But I don’t understand the need for that wide margin.”

~ The Mustard Logo, perhaps?

Web Style Guide 3rd Ed. (Pat & Sarah)

Home link:

“Placing your organization or site logo in the upper left corner of the page—and linking that logo to the home page—is a widely used convention and one you should adopt. If you are not using a logo or graphic in your header, at least put a “home” link near the upper left corner of the page, where 99 percent of users will expect to find it.”

http://webstyleguide.com/index.html

Mix - Try 75% zoom and set the Text Size to ‘Largest’.

Na éisc: “Placing your organization or site logo in the upper left corner of the page—and linking that logo to the home page—is a widely used convention”

Indeed yes. I’m all in favour of standards. But a site logo and/or home page link can be in the top left-hand corner of a page header without affecting the margin of the page content which follows. On this site though, it would appear that it does. And (talking of standards), on most websites that require a login, the corresponding logout is on the top right, and available from any page - not just the home page.

@David50 - Thanks for suggestion. That makes everything fairly clear apart from the headings at the top of the page which wrap-around thus:

RECORDIN
GS

DISCUSSIO
NS

But unless I undo thes settings before quitting session.org, others sites which I frequently use are adversely affected.

.. so it’s still only a workaround.

@nocause - you’ve said it all - if you switch browsers because of just one website you might cure one problem only to find another!

Correction!

I said above: “and available from any page - not just the home page.”

Retracted.

I thought that was the case because I had signed in with the “stay logged in” option checked. If you do that, you don’t get the logout option on any page. Odd,that.

Well maybe but that is the only problem I have found with Chrome (and I think Firefox as well). It is also very odd that it should happen with a website as popular as Facebook. They really should have everything covered.

Cheers, Mix. My post was intended as a bit of tongue in cheek. I usually avoid smilies hoping that a phrase like “The Mustard Logo” is silly enough by itself. Having said that I don’t think the logo needs to be readily available as I scroll down the page. Aside from “The Mustard Search” I don’t use the homepage. And when I do want to link to another section the *Home* & *End* buttons on my keyboard work for site navigation. So, for my uses, the whitespace column on the left doesn’t serve any purpose.

I get the Log Out option at the bottom of the LH margin with the “stay logged in” option checked.

I do that all the time now, then Log Out when I have finished, because it seems to solve the problem of lost posts due to having been logged out.

Mix, I’ve been making some more adjustments to the styling and with a little bit of JavaScript, I think I’ve managed to get everthing working for your browser and screen resolution.

You might need to hit refresh a few times but let me know if everything is working okay for you now.

Jeremy - Brilliant! Your JS certainly did the business. 🙂

I can now view any screen on session.org without the need for sideways scrolling. The screen headings no longer wrap-around (and the logout button is now back and working, too).

Thanks for your help.

Hey you can crop photos for facebook in Chrome, I know because I’ve done it. I do not use IE outside of work, and to test my websites. It is quite normal for IE to eff up the display and it always requires special treatment. It is not a matter of switching browsers only to find more problems, it is ONLY IE that has the problem. Also safari has problems with redirects so hotel login pages won’t load. But google chrome or firefox will handle 99.999% of what you need to do on the web. IE is disfunctional and should only be used on websites specifically written for IE (work in my case). It is no accident that ALL web developers develop in other browsers first and then after they’ve written their site, spend twice the amount of time debugging for IE because unfortunately people still use it. If you surf with IE and experience display issues, it is because IE doesn’t follow standards, possibly because Microsoft is arrogant despite rapidly losing market share on their piece of junk browser.

That being said I just opened the site on a Windows XP computer with the display set to 800 x 600 using IE 6.0(possibly the least popular browser in the world)and the display was fine. The menu doesn’t show up unless you hit the arrow at the right, so it’s almost like I’m getting a mobile version. The recent activity queries to the right don’t show up, and neither does the logo at the top left.

http://www.youtube.com/watch?v=vTTzwJsHpU8

play video

Oh that’s because you fixed it, sorry didn’t finish thread completely before I had to respond to the comment about photo cropping.