Docs

[Kyle W]

A site I’m building displays perfectly on ever browser except MS Edge. The 1st section and the header are giving me issues.

Here is how the site should look:

And here is how it looks on MS Edge Browser:

I can actually fix the content width issue by replacing:

.masthead {
height:0px;
  }

with

@supports (not(-ms-ime-align:auto)) {
.masthead {
height:0px;
  }}

But then the navbar is the wrong color and I can’t seem to call it correctly in the css to either make it transparent or a dark color so the logo and menu are visible.

[Kyle W]

This reply has been marked as private.

[Rad]

Hi there,

It says incorrect password, please check.

And your site crashes edge browser even by visiting the login page.

Thanks.

[Kyle W]

This reply has been marked as private.

[Paul R]

Hi Kyle,

I was able to fix it by adding width:100%; in the style field of your hero section element.

Kindly check on your end.

[Kyle W]

Yes, that looks to have solved that issue. Any ideas on why the styling for the header doesn’t apply in Edge? The navbar should be transparent and I’ve also styled the menu items.

Thanks for your help!

Kyle

[Christian]

Please disable all third party plugins, scripts, and customizations then check if the issue persists.

Thanks.

[Kyle W]

No change when all plugins are deactivated. And I should note that this is only occurring on the homepage with the Cornerstone video background. The other pages show the header correctly.

[Paul R]

Hi Kyle,

The video background is set to position absolute and MS Edge is treating position absolute differently.

In ms edge you need to set the width of the parent container so it will display correctly.

I will forward this to our web development team for review.

Thanks

[Kyle W]

What would be the CSS for that?

I’m going to try to target Edge only some CSS using

/* Microsoft Edge Browser 12+ (All) - @supports method */

@supports (-ms-ime-align:auto) {
  .selector { property:value; } 
}

[Paul R]

Hi Kyle,

Yes, it will be something like this.

/* Microsoft Edge Browser 12+ (All) - @supports method */

@supports (-ms-ime-align:auto) {
  .home #x-section-1 { width:100%; } 
}

But you don’t need to target ms edge only, by setting the width to 100% it will work in all browsers.

Hope that makes sense.

[Kyle W]

That does make sense. Thanks.

I changed the first section to be rev-slider video instead of a background video of cs-section. The nav bar is still white on MS Edge and also Firefox on windows XP and 10.

Can you take a look again? Login credentials are above in a previous response.

[Rad]

Hi there,

Please try this

.masthead {
height:0px;
position: absolute;
width: 100%;
}

I’m not sure what’s the problem but it should be fixable by just setting height to zero. IE/Edge are really unpredictable.

Thanks.

[Author]

Posts