Issues with background-color

Hi everyone! :grinning:

I did a website for a course and everything was fine.
Then I uploaded it and the background-color of the footer stopped to work.
So this is probably silly, but I can’t understand why! :sweat_smile:

Here is the link:
https://omnifoodfrancesca.000webhostapp.com/#

Any help is much appreciated! :joy:

2 Likes

Can I have the code please because I can’t see anything wrong, but that’s probably because I don’t have the code.

Hi @trevorhodges :grinning:

thank you for your reply!

here it is: https://codepen.io/francesca829/pen/wZBxMy

1 Like

Hello!
It appears you have an extra curly brace in your css at the end of the .error selector:

.error {
    background-color: rgba(219, 54, 24, 0.8);
}
}

That extra closing curly brace immediately precedes your footer selector. Hope this helps! :grinning:

1 Like

Thank you for your reply!:grinning:
I fixed the bug but it didn’t work.
The footer’s background is still white instead of grey. :sweat:
The strange thing is that it’s ok on my computer. It changed when I uploaded the files, but I didn’t make any changes to them.:thinking:

1 Like

I just now followed your link to your webpage, and the footer is grey. I’ve opened it with Edge, Chrome and Firefox. Are you still having problems?

1 Like

Yes. I just checked again to be sure. If you follow the link, you’ll see that the footer is white but there isn’t that extra curly brace in the css file. :sweat:

1 Like

Weird, it’s grey for me, too.

Back when I was styling our webshop I was going crazy with the CSS changes not displaying, until I found out I had to use a different kind of page reload that forces a CSS reload (which otherwise just uses the cached CSS), in chrome its ctrl + shift + R or shift + F5

Sometimes the code shown in the inspect window is the autocorrected code - many browsers ignore some minor errors and just correct them somehow, so not seeing the excess curly brace might be a result of that maybe?

2 Likes

You can also use rgb (red green blue) values instead, and that could work. I still ckecking, but I currently haven’t found the problem.

1 Like

@coderighton it worked! Thank you! :star_struck:

@trevorhodges why should rgb values would work?

3 Likes

rgb values are just the alternative way that I find to fail less because you just get red, green, and blue mixed into that color.

1 Like

Funny, because any document on the server that does not match the cached version gets downloaded and replaces it. That’s the way browser caching works. If it didn’t we would have to Ctrl+F5 every page we visit daily to wipe yesterday’s version from the cache.

2 Likes

I had no idea obviously, and wasn’t trying to be funny.
Why do I need to “special” reload a page to see my CSS changes then if it’s not because of caching?

To me it made sense in the way that it saves time and bandwidth to cache a stylesheet for a limited time which - I thought - browsers do naturally because we don’t expect sites to change CSS frequently.

Sorry if I did spread false information.

2 Likes

It was the behavior you describe which I found funny, not your comments. Nothing to apologize for. It’s been a while since I worked with response codes but I think somethng in the 300s is the response from the server if a cached file has not been changed on the server. The file is not sent down if this is the response.

Browser caching is a way to limit unnecessary bandwidth and reduce latency for a site that has hundreds or thousands of requests per minute. The more resources such as script libraries, style sheets, images, audio and video files, etc. that can be cached, the faster each page load or repeated visit will occur.

When we F5, all changed files should download. If in your case it only happens when you flush the cache first, then I have no explanation for that. One could speculate or surmize it has something to do with the server, or variant browser behavior, but that is just conjecture. If you find out more about this topic, do please bring us up to speed with you discoveries.

2 Likes

I didn’t know. Thank you! :grinning:

1 Like

Guess I got the connotation wrong. :sweat_smile:

Your welcome :slightly_smiling_face:!

1 Like