Trouble with CSS rendering on Sharepoint in Edge Browser - Dealing with SEC7111 Issue

Recently, I was moved to a Windows 10 VM from Windows 7 and I encountered an issue with displaying a site for my team at work properly in Edge. A WebPart linking to CSS was showing everything as one large list instead of a table with dropdowns. Oddly enough, when I opened the HTML page on its own in Edge, it displayed fine, but within SharePoint, it wasn't working correctly. Any thoughts on why this discrepancy could be happening? Desired display

Actual display in SharePoint

UPDATE After inspecting developer tools, I discovered a SEC7111 error code on the linked CSS file. I'm searching for solutions, but any assistance would be greatly appreciated!

LATEST UPDATE Upon further investigation of the SEC7111 error, I realized that using "file://" links for the CSS was causing issues because they were not considered secure. Strangely, even though I received the same error in IE, I never had display issues like this before... To resolve this issue, I relocated my linked CSS file to a secure folder in another SharePoint site and linked the CSS from there - now everything is working smoothly!

htmlcsssecuritysharepointmicrosoft-edge

Answer №1

If you're facing a problem, there are various methods you can try to resolve it (It's advised to include your code in the question for better assistance). Here are some solutions that you could consider:

Option 1

Avoid using file:// when hosting your site on a webserver. Since HTML is rendered on the client-side, local files cannot be accessed. It's recommended not to use file://. You can find more information about security concerns and details regarding the file protocol here: (https://en.wikipedia.org/wiki/File_URI_scheme)

Instead of utilizing the local file protocol, opt for an 

Absolute/Relative path to your CSS
using the HTTP/HTTPS protocols.

Option 2

Include the X-UA-Compatible meta tag or set the HTTP response header to ensure that Internet Explorer runs with legacy document modes like: 5, 7, 8.

X-UA-Compatible meta tag:

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    ...
</head>
<body>
</body>
</html>

X-UA-Compatible HTTP response header:

https://i.sstatic.net/x2kRO.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Disabling click events on a span tag in Angular 6: A step-by-step guide

Is there a way to disable the click event for deleting hours with the 'X' symbol based on a condition? Thank you in advance. <table navigatable class="<some_class>"> <tbody> <tr *ngFor="let item of ...

javascriptcssangularhtml-table

Is it possible that using vim omni-complete will remove the word that I had previously selected

When writing HTML with gvim, I find it frustrating that the omni-complete feature always deletes my previous word and even my previously selected ones. For example, let's say I'm in the middle of writing the following code**('_' indica ...

htmlvimomnicomplete

Leveraging ternary operators within HTML elements

Currently, I am utilizing the Vue.js framework to create a dynamic list that updates based on two different list objects. My main objective is to adjust the border of the list cards depending on a specific condition. Below are the defined cards: <li ...

javascripthtmlvue.jsconditional-operator

Why isn't the justify-content property set to center in my CSS code functioning properly?

For a front-end challenge from Frontend Mentor, I attempted to center a card on the screen using justify-content: center, but it doesn't seem to be working as expected. Any suggestions on how to achieve this? @import url('https://fonts.google ...

htmlcss

How can the HTML input fields be adjusted to generate the specific array needed in PHP?

I have created an HTML form with the following structure: <form action="sample_test.php" method="post"> <input type="text" name="fileName" value="8.png" id="fileName[]"> <input type="text" name="fileLink" value="https://www.filepicker.i ...

phphtmlarraysassociative-arrayhtml-input

I'm curious about how I can determine the reason why my badge is not accepting HTML tags in its tooltip

My goal is to integrate a bootstrap badge-alert with an HTML tooltip. I am following the example provided at https://getbootstrap.com/docs/4.3/components/tooltips/ Despite my efforts, when using the code snippet below, the tooltip appears but the HTML tag ...

htmlbootstrap-4

Do search engines crawl through JavaScript-generated keyword and description meta tags?

My website loads its template via ajax, with the description and keywords meta tags present on the template.html file rather than the current index.html page. Once the template is loaded, it embeds the meta tags into the index.html file. I'm wonderin ...

javascripthtmlajaxseometa-tags

I am experiencing a situation where my content is overflowing but the scroll feature is

After making my website dynamic, I encountered an issue where the content overflow on the home page prevented me from scrolling to the bottom of the page. Here is a link to my website for reference: ...

htmlcssscrolloverflow

Hover to stop menu movement

Can someone help me achieve a similar menu hover effect like this one? I'm trying to create a menu with a hold/pause effect on hover, specifically in the section titled "A programme for every vision". The goal is to navigate through the sub menus smo ...

javascriptjquerycss

Having trouble with JavaScript not working when clicking an image and toggling a div?

Why isn't the onclick image and toggle div functionality working with JavaScript? I made the change from: <input type="button" id="Showdiv1" name="Showdiv1" value="Show Div 1" onclick="showDiv('div1')" /> to: <img src="https://d ...

javascripthtmlcss

The issue of footer overlapping the login form is observed on iOS devices while using Safari and Chrome

Unique ImageI am currently working on an Angular 8 project with Angular Material. I have successfully designed a fully functional login page. However, I am encountering a problem specifically on iOS devices such as iPhones and iPads, whether it is Safari o ...

cssangulartypescriptangular-material

When setting the margin to auto, it perfectly centers elements on servers and IE, but on Chrome off the server, it appears to be aligned to the

There seems to be an issue with the display of my page in Chrome - it starts at the middle and ends on the right side. However, when I view it on my server or try it on Internet Explorer 11, it appears centered. Why is that? This problem only arose after ...

htmlcssgoogle-chromewebbootstrap-4

Display the datepicker beneath the input field

I successfully integrated the datepicker, but I prefer for the calendar to display below the date input field rather than above it. HTML5 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv=" ...

javascriptjquerycsshtmltwitter-bootstrap

The navigation pills in Bootstrap 5 are experiencing functionality issues

Hey everyone, I'm currently tackling a new project and running into an issue with Bootstrap 5 nav pills. I need them to toggle between column and grid view, but they aren't behaving as expected (content displays fine on the first pill, but nothin ...

htmlcssbootstrap-4bootstrap-5cdn

JS-powered menu links losing color after being clicked

I have a JavaScript rollover switch issue - when I click on the link, the color should stay orange (#f7931d), but it reverts back to grey. What am I missing in my code? CSS: #content-slider { padding-top:5px; height: 240px; width: 359px; ...

css

Is there a way to adjust only the height of a responsive image?

Increasing the Height of an Image on a Mobile Device! I have an image that displays as the header of my website. When I resize the window to mobile format, the image resizes too. However, I want the height of the header image to be longer! Is this possibl ...

csshtml

Center align the label and textbox using CSS in a horizontal arrangement

Is there a way to center the label text within the div? My desired outcome is: ----------- Name: | textbox | ----------- For a demo, check out this code: http://jsfiddle.net/53ALd/2053/ ...

htmlcss

Tips for sending two values to a PHP file using JavaScript Ajax

I have created a code for two dropdown menus. The goal is to select values from both menus and send them to a php file using the GET method. The values should be sent to the php file only when both menus have selections made. Below is the code snippet: ...

javascriptphpjqueryhtmlajax

Alter the navigation background when moving between sections on a one-page website

I need to ensure that the background of the navigation remains transparent on the "home" section. However, when switching to other sections, the background color of the navigation becomes permanently black. <header class="clearfix"> <nav> ...

javascriptjquerycsshtml

Php: Form data vanishes upon refreshing the page

Hey there! I'm a beginner in the world of PHP and currently working on developing a multi-page form. However, I am facing an issue where the entered data disappears as soon as the page is refreshed. Below is the code snippet that I have been trying to ...

phphtml