Problem with template under IE 11

There is a problem with animation image under IE 11. It not goes up to the top of the page but starts where menu ends. Is there a CSS fix for that. It does not look good and IE is still one of mainstream browsers.

Hi

I've asked programmers to take a look into this. Will let You know when they will answer.

Hi

For the issue with top menu please add this to override.css and make sure override is enabled in template settings:

Code: Select all

#gkPageTop {
position: absolute;
top: 0;
}


Hi.

This fixes the IE issue but creates two new ones for IE and Firefox. One is that now the initial images is a little reduced and you start seeing the white where it says: "Welcome to the Business Portfolio Website"

2:) The width/margin of the site is increased and a horizontal scroll-bar is visible on both browsers to scroll into darkness.

Thanks for your guidance.

Hi

Ok, so I'm sending this back to programmers.

Hi

I've just got another part of code which should fix the problem. Please try with this:

Code: Select all

#gkPageNav > div {
position: absolute;
width: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}


Hi.

Thanks for your reply.
But this code still creates an unwanted horizontal scrolling bar in IE.
Much more than last time. Right side goes into black.

Hi

Can You please contact me on skype (my login "teitbite") ? Maybe when I'll see it while sharing screen I'll come up with a fix.

Hi.
I sent you access codes to the backend.
Thanks

Hi

No no. I do not need Your backend access. We need to met on Skype and share screen so I'll see what is the problem. I do not have IE11, that's why I was sending it to programmers for help, but since the last fix didn't help I would like to try by myself.

Hi

After a skype session we figured out some more lines of code to add to fix:

Code: Select all

#gkPageTop {
    -ms-overflow-y: hidden !important;
}

#gkHeaderTop .gk-parallax {
    margin-top: -120px;
}


Hi

Correction. We had to remove all mentioned changes and add just this small class:

Code: Select all

#gkHeaderTop {
    display: table;
    width: 100%;
}