Firefox, Chrome bug sidebar

Hello,
I hope that issue wasn’t resolved somewhere and I didn’t find the topic.
We use your great Fashionistas in one blog and I discovered a small bug, which I would like to fix.

With Safari everything looks great so far:

With Chrome and Firefox it looks like that:

The search button is under the search field with firefox and chrome and the font size or something else seems to be wrong in the tabs “popular, latest, etc…”.

Could you be so kind and advice us what to do to fix it?

Thanks!

Hi,

Please post a link to your website, so we can check.

Best Regards,
Csaba

Dear Csaba,

Thanks for getting back to me. Unfortunately, I cannot make the link of the blog public yet. But today I realized, that this bug (chrome and firefox) just appears on Mac El Capitan - on OSX 10.7 it is working with all browsers as it should.

Hi,

I have Mac OSX El Capitan installed on my MacBook Pro Retina, I can check the issue, if you give me a link to your website here on forums or in e-mail at csaba.athemes@gmail.com

Best Regards,
Csaba

Hi Csaba,

Thanks, I will send it to you via email.

Cheers!

Hi,

I have got it, please try this Custom CSS and let me know how it works:

.site-sidebar .widget_search .search-field {
    width: 60% !important;
}

Add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Also let me know on what screen size you are testing, so I can check based on that.

Best Regards,
Csaba

Since I’m not an expert, I don’t know what a Child Theme is, but I edited the code you mentioned in the admin dashboard under “appearance” - editor… In there I did already some color changes and it worked well for me. There I found two entries similar to the one you mentioned and changed 65% (this is how I found it) to 60%. Unfortunately is hasn’t changed anything for me.

I also reverted the code in the editor to how it was and installed the plug-in you mentioned to add custom CSS and added your lines in there - also no change for me.

In Safari and El Capitan everything is perfect, just Firefox and Chrome makes the problem (of course the newest versions).

1280 × 1024 is my screen size.

Thanks for your help, very much appreciated!

Hi,

It’s not safe to modify in Appearance / Edit directly, because you will loose the modifications after updates, so using the plugin I have recommended the changes will be safe from updates, so please copy all the modified CSS classes and IDs to the plugin.

That’s weird, I checked on El Capitan ( with latest Chrome, Safari and Firefox ), both are the same, on all of them it shows correctly ( inline ), please try this Custom CSS ( this will make your search field very short, so the search button will surely have to fit, if not, then post a screenshot how it shows for you after adding the CSS:

.search-field {
    width: 30% !important;
}

Best Regards,
Csaba

Hi Csaba,

Thanks for your continued support. I will add all custom css to the plug in from now on!

Here is the screen with your custom css. The search bar is indeed smaller, but the arrow still shows the weird error.

The weird thing for me is that if I put the custom CSS for making the search bar smaller in, I don’t see any difference in Safari, just in Firefox and Chrome. Is that intended?

I will send you via email the css code I use currently, maybe you can spot the mistake.

All the best,

update

Now I do see the changes of the search field also in Safari!

Hi,

Ok, so the search field was resolved, right?

The other issue you pointed out is maybe of a wrong font rendering, you get that only in Safari or in any other browser?

Best Regards,
Csaba

Hi,
The search box is fine now.
The other issues are also only in Chrome and Firefox. Safari is perfectly fine!

best regards,
IW

Hi,

Please let me know how you changed the font and what font you tied to use, so I can check which one is correct.

Best Regards,
Csaba

Hi,

I didn’t change any font. All I changed was the colors of links and hover effects and some borders. Nothing else!

Best regards,
IW

Here again two screens, the font seems to change in firefox rest. chrome:

Safari: All cool:

Firefox, bug:

Hi,

For me it’s fine in all browsers, please try to clear your browser cache in all browsers where you have the issue. So you haven’t changed the font family nowhere?

Best Regards,
Csaba

I always empty the cache, before I check if something changed.
I think I narrowed the problem down further:

When I make the window of Firefox e.g. smaller this happens to the section:

If I do the same to Safari, I really have to make it extremely small to get the same kind of error:

So the sidebar adjusts to the size of the window. Can one fix that with a custom CSS?

Thanks for your continued support, I really appreciate it.

By the way, also on the iPad the same issue occurs:

Hi,

I think by making the fonts smaller can resolve the issue, please try this Custom CSS and let me know how it works:

.widget-tab-nav li a {
    font-size: 0.8em !important;
    letter-spacing: 1px !important;
}

Best Regards,
Csaba

Thanks so much. That issue is solved!!!

Thanks for the great support.