question

BNSindhu-8922 avatar image
0 Votes"
BNSindhu-8922 asked MichaelHan-MSFT commented

SharePoint page UI Issue in Chrome

Hi,

We received a Production issue recently where top navigation bar for a SharePoint on-premise page is causing an UI issue in Chrome, while the same page works perfectly fine in IE11. In Chrome, there is small gap between two navigation bars. We tried to change the CSS by giving the below code,

/works for Chrome/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.classNav{
margin-top:-2px !important;
POSITION: relative;
}
}

/works in IE 10 and above/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.classNav{
margin-top: -50px !important;
POSITION: relative;
}
}

Now after adding margin-top as -2px, it works fine in CHROME but not in IE. Should I add any other tags for it to work in both Chrome and IE?


Any help would be appreciated.

Thanks,
Sindhu

sharepoint-dev
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

BNSindhu-8922 avatar image
1 Vote"
BNSindhu-8922 answered MichaelHan-MSFT commented

Hi @MichaelHan-MSFT

II was able to resolve this issue. The page was by default loading in IE7. I now changed it to IE10 & above and it works fine.

Thanks,
Sindhu

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@BNSindhu-8922,

Glad that you solved this issue. Thanks for the sharing :)
I have converted you comment to an answer, you could accept it to close this thread.

0 Votes 0 ·
MichaelHan-MSFT avatar image
0 Votes"
MichaelHan-MSFT answered MichaelHan-MSFT converted comment to answer

Hi @BNSindhu-8922,

For SharePoint on-premise site, it may not work well with chrome.

I would suggest you use IETab extension for Google Chrome to use the IE rendering engine to display SharePoint pages better: https://chrome.google.com/webstore/detail/ie-tab/hehijbfgiekmjfkfjpbkbammjbdenadd


If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.