Skip to main content

I’ve tried everything on my end but can’t seem to figure out how to solve this custom css issue and was hoping someone else here might have figured out a solution?

We have a custom home page with the page title/description graphic (the one that shows an icon, page title, and description text in a white background just below the header) hidden via a custom style. Below that, we have a logo with a margin-top style assigned with a negative value to get the logo to be a little higher on the page. Without the margin-top: -50px assigned there is a big gap between the logo and the header.

This works perfectly in Chrome/Edge (I blurred out our logo but the placement is right):

But Safari seems to ignore it completely (see below). I’ve Googled the heck out of this but cannot figure out a workaround. Any css gurus have any ideas? I’ve tried using padding, margin, etc. in all sorts of ways to no avail. Notice the large gap between the header and the logo - this happens only in Safari:

 

Can you share the HTML/CSS you’ve been using so far?

Thanks @nick.tosto . This page was developed by a vendor recommended to us and they have ghosted us since : (

/* Pushes page up to reduce space taken up by header */
#doc-page-73{
    margin: -100px 0px 0px 0px;
}

If you would be willing, I’d be happy to get you a login to our LMS if you want to take a look. Just let me know.

That -100px value seems to be ignored by Safari.

It looks like Chrome sees the #doc-page-73 element as a block element while safari sees it as inline. 

if you add:

display: block;

 to your above CSS does it fix it? it worked for me in the inspector but I can’t test in your custom styles area.

Since Chrome and FF have it as display:block already, I’m not too worried about it causing unintended issues.

 

 

@nick.tosto that did it! THANK YOU! Really appreciate the help with this and had just about given up before posting here. Thanks again!

Reply


Terms & ConditionsCookie settings