HTML5 sidenav output, IE indented by miles

[ChoccieMuffin]

Hi all

I've got a Sidenav HTML5 output that looks great in Chrome and Edge, but looks absolutely rubbish in IE, looking for some help to fix it. (I know we specify that we don't support IE, but enough end users are likely to be using it that if it's not too much of a pain to fix, I'd like to.)

The problem is, the content is all shifted over to the RIGHT (not left as I originally said) (very wide left margin or padding? I can't work it out) which means that the content on the right is off the side of the screen and there's no scrollbar on the bottom.

I've done "Inspect" on the generated content but I can't work out what's not playing nicely. Any suggestions?

Thanks

CM

[NorthEast]

Generally, side nav should work fine in IE11 - but definitely not older versions of IE.

You mention there is "content is all shifted over to the left", and other "content on the right".
So what is the "content" on the left and right? By default, the navigation is on the left and topic body on the right, or do you mean the topic body is displayed in two columns (like a responsive layout)?

It might help to show a screenshot, or provide a bit more info about how things are set up with your skin and CSS.

[ChoccieMuffin]

I never could tell left from right, my original message was a load of nonsense!
In IE there's a really wide space on the left, so side menu and topic content are all shoved right, and the right-hand side of the content is off the screen with no scroll bar so there's nothing you can do to see it. The problem is all that extra space on the left.
This is what it looks like in Chrome. The green outline shows the space that's supposed to be there (in my skin I set Maximum Width on the Main Page to 1500px).

chrome_full.png

But this is what it looks like in IE. The red outline shows how it's just far too wide. It's Internet Explorer from Windows 10. I don't have IE11 to check it out, but I'll get our QA crew to take a look and give me some feedback.

IE_Full.png

[NorthEast]

The good news - or bad news - is that I can see exactly the same issue in IE11 when I set a Maximum width in the skin.
It's not a setting I ever use, so I hadn't seen that problem.

Whilst I'm not testing in a 'vanilla' empty project, it still suggests that Flare's CSS is the root of the problem, rather than any custom CSS.

Personally, I'd just move away from IE if you're allowed to do that. Attempting to support it will just cause headaches, so don't do it unless you need to.

[ChoccieMuffin]

Bug raised with Tech Support, and the first response is "we've recently moved away from IE so we recommend using Edge instead, if possible", but as a lot of my end users haven't, this isn't really what I need to hear. I'll keep you updated if anything useful comes out of the discussion and I'll keep my fingers firmly crossed in hope. (That dsoe mkae tpynig a bit trckiy tho!)

[Psider]

(That dsoe mkae tpynig a bit trckiy tho!)

BAHAHAAA

[NorthEast]

In the meantime, if you must support IE11, then probably don't set that max-width in the skin.

You could achieve a similar effect (but not identical) by:
1) In your stylesheet, add a new div that uses a max-width, e.g. div.topic-container { max-width: 50em; }
2) In your template/master page, add the div.topic-container and put everything inside it - the body proxy, breadcrumbs, footer, whatever.

That'll restrict the width of all the topic content, just not stuff in the header.

Bug raised with Tech Support, and the first response is "we've recently moved away from IE so we recommend using Edge instead, if possible", but as a lot of my end users haven't, this isn't really what I need to hear. I'll keep you updated if anything useful comes out of the discussion and I'll keep my fingers firmly crossed in hope. (That dsoe mkae tpynig a bit trckiy tho!)

Unless the users of your product must use IE11 because it's required for an old web app or operating system, then you should probably move away from supporting IE11.

IE11 will be officially end of life this year, meaning Microsoft will no longer support it, fix security issues, etc. - so it's really not a good idea to be still using it.
It's a 2013 browser that was effectively replaced by Edge from 2015, so it's not like people haven't had a few years to remove dependencies on it and use something else.

[ChoccieMuffin]

Solution for now (because we're close to release) is to not set max-width in the skin. It's not ideal, but next release I'm definitely going to put that one right back in there! Problem is, the default browser on a lot of the machines our users are likely to be using (and that some of our testers are using!) is still IE. Not the best default to be using but if that's how it is, then I've just got to work with it.

Thanks again for your feedback and for confirming what I needed to do.