Browsers display website differently

[sittingprettyclothing]

Good day

I have been looking at our websites Analytics and I saw that most of our customers use Safari browser as a means to access our website. Which brings me to my query, some of the menu’s and colors reflect differently in Safari than Google Chrome or Firefox. Is there any way to fix it. I’ve tried fixing one of the drop down menus by moving it where its supposed to be but when I open it any other browser its off there again.

I have noticed two things in safari:
1. My currency drop down menu in the header is way below the other headings, see here:
2. The mini cart’s roll button in the headers text color is not visible but in chrome it is. (I’ve attached screenshots to compare)

Kind Regards
Cathy

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Hi,

1) Can you remove this top: 21px !important; from your Custom CSS:

.dd-select {
   background: transparent !important;
   top: 21px !important;
}

2) Please add this to Theme Options => Custom CSS:

.sf-roll-button span {
   color: #000;
}

[sittingprettyclothing]

Hi David

I tried removing the top: 21px !important; before but then it changes in chrome and firefox etc. I’ve attached a screen shot.

For the roll button, I would like the roll button to have the same hover color than the menu items. #8d6d34. So displaying black and then when you hover its the goldish color.
(before the coding you just gave it displayed the correct colors in other browsers but just not in safari)

Thanks for taking a look 🙂

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

This will do it from my testing:

1)

li.menu-item-7282.menu-item.menu-item-type-gs_sim.menu-item-object-gs_sim.sf-std-menu {
    vertical-align: -20px;
}
_::-webkit-:host:not(:root:root), li.menu-item-7282.menu-item.menu-item-type-gs_sim.menu-item-object-gs_sim.sf-std-menu {
    vertical-align: -0px;
}

2) You can change the CSS colors to reflect that:

a.sf-roll-button.checkout-button > span {
    color: #000!important;
}
a.sf-roll-button.checkout-button:hover > span {
    color: #8d6d34!important;
}

[sittingprettyclothing]

Thanks a million!
Its perfect! 🙂

[David Martin – Support]

Glad to help you out!

Thanks,
David

[sittingprettyclothing]

Hi David

The css you gave me previously worked for a while, but it seems to do the same thing again with the color in the mini cart roll button.
Anything that needs to change in the coding you gave?

Also have a problem changing the hover color of the links Im adding to descriptions or blog posts. So I decided to just change the color of the actual links. When I change it in the Customize menu, it also changes the product category color on of the shop page, the social share buttons on blog post and any other tags…so that wont work. All I would like is for the hove colour on links in posts or product descriptions to be a different color. For now I left the customized color on so you can see.
http://www.sittingpretty.co.za/shop/zambezi-handbag-tan/
http://www.sittingpretty.co.za/shop/
http://www.sittingpretty.co.za/sitting-pretty-jinger-jack-collaboration/

Thanks.
Cathy

[David Martin – Support]

1) You likely have added a CSS error to your custom CSS. You will need to validate your CSS and fix the issues. An example to check:

2) You want to change links within these?

[sittingprettyclothing]

Hi David

Found the post:

1) So when I check it says that most of the coding you gave me is an “unknown vendor extension”.
How can this be fixed? I am not a professional coder/programmer so I don’t really understand the lingo.

Like you can see now there is another item that does not display correctly. In the shop we changed the sorting button so it looks similar to the websites look but in Safari it doesnt seem to change much. Just got a border. See the screenshot 1 attached.

2) No, The hover color seems to be white on anything in my blogposts content. if you go straight to the bottom of lets say the first post, there is social share icons at the bottom as well as related articles, tags, etc. If you hover its white, how do I change the hover color?
This is not just a problem in my posts pages, but also when I have products with linked text.

Hope you understand, I’ll add a screenshot (screenshot 2)

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) Are you pasting the CSS into the direct input field? https://jigsaw.w3.org/css-validator/#validate_by_input

2) This is the Hover Color you have set within the Color Customizer

[sittingprettyclothing]

1)See screenshot

2)Text Hover color is set to a colour as you can see on the website and footer etc. when you hove its a gold colour but for some reason it doesnt have any affect on any of the above mentioned places/item.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

2) If you validate your CSS you will see your color inputs are not valid: color: #f000 !important; – you either can shorten to black #000 or you will need the full hex code for the color you want, it should be 6 characters.

You simply paste your Custom CSS here (direct input): https://jigsaw.w3.org/css-validator/#validate_by_input I have done so and it threw the color code error.

Safari cannot handle the color errors, Chrome is more forgiving on these errors.

[sittingprettyclothing]

No idea how the f got there.

Thanks, again. Always appreciate the help.

[David Martin – Support]

Glad to help.

[sittingprettyclothing]

Hmm I spoke too soon.

When I checked yesterday it fixed the color problem on the check out roll button but I didnt check if the hover colour on the other links changed. Still displaying white. This is not a browser issue just an issue in general, no matter the browser.

-2)Text Hover color is set to a color as you can see on the website and footer etc. when you hover its a gold colour but for some reason it doesn’t have any affect on any of the above mentioned places/item (social share icons, linked text, related article text, tags etc). Just white.