CSS breaking in host site - html

I'm having a weird issue where I'm sure I've written the CSS fine, however the browser isn't picking up the classes.
When checking the file on my hosting provider I see that the classes seem to be registered wrongly. I'm thinking the issue might be here.
classes shown with different ui colouring to others
Anyone know what the issue might be?

When checking the file on my hosting provider I see that the classes seem to be registered wrongly. I'm thinking the issue might be here.
Codes are fine. Your host probably render the colours of the code wrongly.
But i don't see you use the .hero-home anywhere on http://www.jardox.com/. Probably the reason why you didn't see any change?
Edit: There's some problem with the characters. change them to utf-8?

Related

How to remove Weird VS Code Suggestions as HTML Tags?

Whenever I code, in almost all types of file extensions i.e js, jsx,html,ts. I get these weird inline suggestions to make it as HTML tag. I truly tried everything out, checked out extensions, JSON settings, unchecked all the suggestions/autocomplete settings. But, this never goes. I don't know what to do, I am truly fed up of this.
And it always suggest whenever I put : in front of anything. Like below.
Wierd Html tags suggestion
It's so annoying. VSCode experts please help.
I have been trying to remove this from long time, I also checked the vscode IntelliSense documentation, and did all the troubleshooting but it still didn't help.

Academicons and HTML not showing correctly

This question was already asked before, nevertheless the solution that was suggested didn't solved the problem.
I am trying to include the ResearchGate academicon in my website, nevertheless it is displayed as a square in Google Chrome and as square with numbers inside in Firefox, while loading the website from the server.
If I download all the files to my computer (as a zip and then opening directly the html file) it displays correctly.
The previous question that was asked with the exactly same problem (and overall situation, it actually uses the same template for the website as I do) is here with its discussion is here Font-awesome: An emoticon looks different on my computer than on the actual webpage
I already tried doing the suggested modifications in the .htaccess file without success. Does anyone of you have an idea on how to attack this problem?
Many thanks!
Edit 1:
I include here the mime types reported by my CPanel:
Mime Types in CPanel
Edit 2:
Sorry, I don't have enough reputation to post the pictures, but they are identical to the quoted previous Question (linked: Font-awesone: An emoticon looks...).
Is it even in the correct size (maybe it is very small)? When not: Check font-awesome.com .. it has set some classes with allows you to size your icons. Try this class on your html in the <i> tag: fa-x3
I´ve made the same on this page in the footer.
Don't kill me if I am totally wrong for what you are searching.

External stylesheets either not downloading or not being applied in very rare cases

I recall some very rare instances of seeing major websites (Amazon, Facebook, etc.) either not downloading a CSS file or not applying the rules, causing the page to look like this:
I've been tasked to provide an internal explanation after we received a complaint email with an attached screenshot from a user of one of our websites showing the same effect. The screenshot contains sensitive user information, so I'm unable to post it. But it shows that inline styles are being applied, but any style referenced from an external CSS file isn't being applied.
Unfortunately, I am unable to reproduce this issue, and other than just saying "styles aren't being applied", I am coming up dry with a detailed explanation and I would love to understand it myself.
I would appreciate any input on why this might happen, or reference to any articles. Even if someone knows what this event is called, I would be happy to go research it, but as of now I'm coming up blank.
There are more than one scenarios under which this can occur:
1) bandwith issues : as italo.nascimento mentioned, a slow connection, where your HTML is downloaded but your CSS is timed-out so you're left with a naked HTML page (happens often also when a website is under DoS or has many many visitors and the server can't keep up with the traffic)
2) caching problems : something is changed in your HTML, but the CSS is served from the browser's local cache so the selectors don't match...
3) FOUC : It's not really similar to what you're asking, unless the printscreens were made during the page load.. It's called Flash of Unstyled Content.
In general 90% of these kinds of problems are cause by connection issues. Dropped packets, TimeOuts, CDN's not working properly.. And as they are random I don't think you can "reproduce them" - it's not something that can get fixed.
Happened to me lots of times in major sites.
Mostly, it happens when Internet connection is very slow or oscilating, so the files doesn't load correctly from the server (packages get lost) and the site is showed in pure HTML. Maybe you could reproduce it by limiting your bandwidth and reloading the page.

Firefox displaying HTML page as code

I am following a tutorial for developing a simple Facebook app, yet the sample code will not work in Firefox (works fine in IE) - it literlly just displays the code, all on one line.
Full code is here, if it is helpful - http://pastebin.com/YggfCQEH
Can anybody tell me why this is not working? I've no doubt that this is something really simple, but I cannot spot what is wrong. Thanks.
Most likely your server returns mime/type text/plain. What is the filename? Chances are, if it's not .html or .htm that is the problem.
The issue here was that the encoding was UTF-8, and apparently Firefox does not like that. Changing the encoding to ANSI sorted the problem.
Maybe you can try to find some other working page on that server, and check what is the files extension that generates correctly, and rename your file with the same extension as that.
Firefox has an option in the View menu you may check. View>Page Style, if No Style is selected FF will disable all CSS and leave you with just html, that's my first guess. (I only suggest this since you say its only FF and this solved a friend's problem just the other day...)
Your code looks fine, but there could be something in the js file screwing it up... i'd double check functions.js for anything weird.

Random css class from nowhere

I have a problem on a page i'm coding. Problem is i'm getting random img classes from nowhere (at least nowhere i know). I've put the generated class below.
<img class=" iryjanjabqqmypymdnuv" src="some/source/path">
There are several jquery plugins and jqueryui on the page but div that got img has nothing to do with those js libs. I also use php but that must have nothing to do with this i guess.
If you need any codes or names of the libraries just ask. Please help me i really have no idea and all the search i did was empty about this.
I had exactly the same problem. Find out that AdBlock Plus is responsible for that. So, just disable all the extensions and reload the page
Just wanted to chime in for anyone that finds this googling their problem, this is exactly the right answer in my case as well. AdBlock Plus (in Firefox only, not Chrome) was generating random class names for images I have embedded in my nav bar for social media links.
Now I have to either find a way to get around that or anyone using ABP in Firefox will see a weird looking nav bar due to this issue. It's not exactly an unpopular plugin.
I work in both Chrome and Firefox and use ABP in both. Hopefully we won't have to find workarounds for this.
Is it possible that you're browsing on a mobile network connection? Some mobile networks modify the HTML/CSS for images so they can serve lower-bandwidth versions, but allow you to "fix" them later. For example, on T-Mobile, if I hover over an image it will give me an Alt tag telling me the keyboard shortcut to use to load the original.
Obviously this won't be the case if it's all local...
I had the same problem and disabled all extensions in Firefox and then it was gone. Not sure which extension is the guilty party, have too many to chase it down by disabling each of them one at a time. :)