I'm having an extremely hard time trying to figure out why my css file is not being called. So I have a file named Style.css which was working perfectly fine until recently when I tried to modify some of the code and nothing was changing. I genuinely don't have the slightest clue as to why because everything was working perfectly fine when I first made the file.
The picture below shows both of my css files. The reason I have 2 files is because I was testing to see if the path I was calling was correct. Which I think I am calling to correct path, but I'm not getting the right results.
Both css files
As you can see when I call Stylee.css note the extra 'e'. Everything displays correctly with a blue border.
Calling Stylee.css
Then I call Style.css and I don't get a blue border. The border is black which is what the border color used to be in my old file, but I changed it to blue.
Calling Style.css
I absolutely promise this is not photo shopped I genuinely don't know why my old file is being called. I was hoping maybe someone knew why this might be the case. I made sure to go into my folder options and unhide hidden files and folders. Nothing came up. I kept changing the color in Stylee.css and the border kept changing. The style for the hover does work if that helps knowing.
I am aware that I can easily stop calling Style.css and call Stylee.css to make everything work, but I really don't want to settle for that. I'm coding to learn and kind of want to learn why this is happening.
I'm sorry everyone. Doing ctrl + F5 twice fixed the problem.
Old CSS showing up?
Solved my problem.
Related
I am learning HTML. I made a website for my photography and have some photos on my home page as the background, using:
background-image: url("images/homepage/IMAGE_NAME.jpg")
However, I noticed there is one specific image, named "DSC_0251.jpg", that does not display unless I rename it. I thought it was the underscore or the capital letter D causing it to not display, but I have other images in the same folder, that are named similarly, such as "DSC_0704small.jpg". They both start with a capital letter and have and underscore, the latter having even more than the former. However, "DSC_0251.jpg" will not display, until I renamed it, even just calling it "1.jpg" worked. I did not change the size of the image, it is 1.4mb, and everything else is exactly the same.
In other words, this line of code works:
background-image: url("images/homepage/DSC_0067.jpg")
but this line does not:
background-image: url("images/homepage/DSC_0251.jpg")
I used Filezilla to upload the files, and I thought maybe it was because I dragged and dropped the image to the server folder directly from the location on my computer, rather than navigating to the location within Filezilla and dragging and dropping it that way, but I tried it with another similarly sized and named photo, but that one worked. I want to keep the name the same so I know what it is, and plus it's a problem that needs a solution anyway, if it comes up again. Thank you!
If it is a Linux system, try checking the permissions of the file! I had a similar issue where my css and images, didn't load after copying to the new machine, for the same reason. As for windows, I don't work with them!
Just a noobie...
I am writing an HTML code and have linked it to an external CSS file. My CSS file was working normally, but suddenly any extra change I make was not reflected to my HTML. I deleted some CSS code to check if anything will change but nothing happened.
For example, I wrote a code to change the background color of my <body> tag to blue:
body {margin:0px; width:100%;font-family:sans-serif; background:#333; color:#d0d0d0;}
When I delete that code then nothing changes and the background is still blue. I have made a research about that problem and some say that this is because Chrome is caching my file.
Could you please advise?
can you paste some code?
or else I don't understand the problem, ill try help as quick as I can!
The problem is due to Browser Caching.
You can use a strategy to bust the cache.
I personally use versioning the Query String Strategy to resolve this issue.
I do it by adding a version number in the linked resource like below:
<link rel="stylesheet" href="style.css?v=3.4.1">
You can change the version number before publishing the website.
For local debugging, you can use Ctrl + F5, it'll hard reload the website and request all the resources from the server.
I honestly trying this to fix now for literally about 12 hours.. I can't get my hovers to work.
I switched my website to another host, and they simply doesnt work anymore.. idk why
Host before: www.youbetterrun.de (as you see they still work there, try to hover over the navbar and on the Vote Images on the left)
Host after: www.l2xenoth.com - i had my site before on this host in /site2 (in this directory they worked.. idk why) then i switched them to the default directoy and they dont work now..
Anyone know why this happens?
you have some path problem with JQuery, see the errors in the image below, so check the dependencies and their path !
UPDATE
you can see in the bottom left of the screenshot, in js folder there is no jquery
first time poster and html noob here.
For a few hours now ive been trying to use a background picture. I downloaded an image I wanted to use, and set about trying to code it.
No matter what I tried, the image would not display. However, when I tried one of the other images I was using, it displayed just fine.
I tried using just the first letter of the existing image, and the program immediately suggested the image in a dropdown, as well as several other images with names starting with the same letter. However when I tried to use the new images first letter, it did list options, but none of them were the image I had downloaded.
I tried renaming the image, but still no luck.
I havnt included any code just yet, since this seems to not be related to the code itself (Since other images display just fine). Has anyone run into something like this before? Extensive google searches did not yeild anything for me.
In case it matters, I am specifying the background image as part of the Body css.
Thanks in advance for any help.
Please check to ensure your preferred image is located in the same parent folder as your htlm.
As #Patrick Falvey says but if the picture is not in the same folder remeber to / before your file path :)
I'm working on an application and styling it right now, however occasionally when I save my style.css file (my temporary change stylesheet before changing it to LESS) I get some messed up elements that were fine before I reuploaded. I made no changes to those elements and I'm 100% sure it's not my CSS, it's also not my browser cache as I've cleared it and reloaded the page with the same issue. I've also added
?v=1.0.1
onto the end of my link to the stylesheet to trick the browser into believing it's a new one. (Learned that trick on StackOverflow to use with favicons, will give credit when I find where I got it)
It tries to search for the CSS in .LESS files that are non-existent on the web server. Could it be a problem with my bootstrap.css.map file being on the server?
EDIT: Another thing I can't seem to figure out, is why the CSS actually shows up under the LESS file reference?
I found my problem, it turns out I was using the wrong media attribute. For some unknown stupid reason I had set the style.css file to only display for print.. I just removed the entire media attribute to be displayed on all types and it works like a charm.