I have a very odd instance in that my main Google Chrome browser is prioritising the wrong css.
I am using WordPress with Elementor and Astra on a Siteground Server. I have tried clearing both the browser cache, server cache etc...I even tried clearing Google Chrome cache via the settings.
The issue only happens on this Google Chrome Setup, works on another Chrome instance (including Incognito) and for Firefox and Edge etc.
This is the code that should be working
.elementor-button-wrapper .elementor-button:hover, .elementor-button-wrapper .elementor-button:focus {
color: #ffffff;
background-color: #062950;
border-color: #062950;
}
And this is the fallback style it is using:
.wp-block-button .wp-block-button__link, .elementor-button-wrapper .elementor-button, .elementor-button-wrapper .elementor-button:visited {
color: #062950;
}
The above code actually has a strikeout on it in the inspector but the right code is used when I tick to disable this code.
I have had this issue on Cloudways before when Varnish caching was being used.
Does anybody know off the top of their head what it could be and whether there is an underground way of purging the entire Google Chrome cache for a specific site? Many thanks!
So I found the problem which was really rather simple and probably so simple I didn't think to look.
The style was active for that element but crossed out in the Google Chrome inspector. It was bewildering why unticking an overridden style would fix the issue. The reason was that part of that style rule included the :visited (but it was classed as an inactive element).
Simply put, the browser history was the reason and I had to create an additional style to to offset the visited link from taking preference. I hadn't even considered whether the link was visited or not.
.wp-block-button .wp-block-button__link, .elementor-button-wrapper .elementor-button, .elementor-button-wrapper .elementor-button:visited {
color: #062950;
}
Example, it was the .elementor-button:visited that was creating this mess, and I was only look at .elementor-button-wrapper .elementor-button which was the active element.
I don't know if this will help anybody but considering other states beyond :hover is important when debugging odd issues like this!
Related
after I’ve been looking for a similar question to solve my issue, which was unsuccessful, I am now addressing to the community for help!
On my portfolio-website https://www.signz-fiction.at (umbrella quantum template) there is a preloader which doesn’t go away on mobile devices after you refresh the page (or press the green logo on top).
Although it is not an optimal solution for me i tried to disable the preloader under custom css but this did not work either
#preloader{display:none !important;}
Or
body > .preloader{ display: none; }
Though I am ui designer, I have only basic knowledge in web development and so I don't know how to fix the problem.
Grateful for any help, thx!
Ps:
The website is a bit older and there was a problem with the google font when i switched from http to https.
Could it be that the prealoder-thing is also related to the switch?
I think you may be confusing the loader animation with a preloader (which pre loads images and other assets to make them readily available).
On your site, the loader animation element has the class .loader, I've looked at your site with View-Source and haven't seen any element with the .preloader class
Try:
body .loader {
display: none;
}
but note that this might not help because the loader is controlled by JavaScript which might remove this property on page load.
Also, you have errors on your site:
mixed active content - avoid using http:// on your https:// site
a JS error you should look at, that may be the reason why the loader isn't being removed on time
on a certain website I would like to change the appearance of a certain link. The operator of said website did something to it so that it does not work the way it used to anymore.
(I'm moderately new to CSS, this much in advance.)
The link goes [website]/internal/main.php?action=menu&id=[some number]. So far I've been changing it with
a[href*="main.php?action=menu&id"] { font-size: 30px;}
but that does not work anymore. So basically 'select any link that cointains that string and change the fontsize to 30px'.
However it would be really helpful/convenient to be able to edit it. Any other links on the page can still be edited via the above CSS. After reading a little I thought adding "!important" would solve the problem, but it did not.
I was under the impression that no matter what the website 'does' that the user has full control over what the browser displays, as it should fetch the 'intended' thing from the server and THEN add custom CSS to it, effectively changing it.
To that end I've been using the Firefox AddOn "Stylus" to edit/change the appearance. Other similar programs also did not manage to change said links. (Stylish, StyleBot for Chrome). It is the same issue on both Chrome and Firefox. I have not tried any other browsers but i imagine it is the same there.
I'd be very thankful for any pointers in the right direction, explanations of where my understanding of the matter is wrong and/or solutions to this problem.
Thank you in advance
Most likely the original CSS definition for links on tha site is done for the different states a:link, a:hover, a:active and a:visited
So you should change your rule to
a:link[href*="main.php?action=menu&id"],
a:visited[href*="main.php?action=menu&id"] { font-size: 30px;}
And similar for the two other states
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
I am having a problem with IE 8 where the visited links color do not change in our application.
We don’t have this problem with IE6.
When using IE6, visited links changes its color if the link has been viewed before.
Our application works fine with IE6 but with IE8 the visited link do not changes its color.
For information,
I have cleared the history , unchecked the option "use Windows Colors" in the browser option. But the links in our application always remain unvisited.
Here is the CSS:
a:link {
color : #006000;
}
a:visited {
color : #3CB371;
}
Any help and suggestions would be greatly appreciated.
There is a security issue with the :visited style.
To describe it briefly, it is possible for a malicious site to find out what sites you've visited by having links to all the sites it wants to check for, and then just examining the colours of those links.
This issue got a lot of publicity about three years ago, and as a result IE and all the other browsers released patches that disabled the :visited style.
I couldn't find a link that was specific to IE, but here's a link from Mozilla describing the problem and their solution for it in Firefox.
Older browsers (IE6, IE7) will still support the :visited style, but IE8 and all other current browsers do not.
Some of them do support it as a user-configurable option, but defaulting to switched off, but very few users will have switched it on, so you can basically ignore that.
More recently, some browsers have re-enabled the style, but changed the Javascript getComputedStyle() function so that it ignores the visited style. This allows the end user to see the visited colour but prevents the potential for a hacker to find out the information. I don't think IE8 ever got this update.
I have created a link and when I try to set the style;
a:visited {
text-decoration: underline;
color: #FF0000;
}
It doesnt seem to work. It works fine in IE. I have also followed the order; link, visited, hover, active.
Is this a known issue, or am I making any mistake?
It might have to do with specificity and the order that you have your selectors in. In general, when specifying link states, you should follow the "love/hate" principal:
:link
:visited
:hover
:active
Maybe you have the :hover or :active selector before :visited?
Download the Firebug or WebDeveloper plugin for Firefox and use it to examine the style of the link, say using Inspect, to see where the style is being set. You should be able to see what styles are being applied and from where.
i have heard it is to do with the security - so something under the firefox hood disables visited links from showing so that other software cannot inspect the active styles and figure out where a user has been.
that does sort of make sense, but they should make it an option, and they should also EXPLAIN TO PEOPLE THAT THAT IS WHAT THEY HAVE DONE and save us all some time.....
Go to Tools -> Options and check if Firefox is remembering your browsing history. If this option is unchecked then the browser cannot show you which links you have visited because you denied the browser that information, hence the reason why your visited links do not change color.
Because of security issues that Google/Bing/etc. will be glad to tell you about, only a short list of properties can be styled with the :visited pseudoclass. Text-decoration isn't one of them, though color ought to work.
Depending on what IE version the OP was using when s/he posted this question, the issue there may be incompatibility of IE, especially before IE8, with standards and with other browsers.
More information here (among other places): https://www.w3schools.com/cssref/sel_visited.asp
It's likely being overridden by another style. If you have the Web Developer toolbar installed you can see what CSS styles are in affect and where they came from by selecting "View style Information" from the CSS menu.