css parts are missing when loading from wwwroot - html

Question

I published a working version of my site to my wwwroot folder, but when I open the website some of the design is missing.
I looked in devTools (sources) in chrome and noticed that there are parts of my css that are missing, when I open the css manualy from the wwwroot folder I see that the parts are actualy there.
What might cause a selective css load?
The missing part of my css file:
#layer {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
height: 550px;
background-repeat: repeat;
position: absolute;
z-index: 3;
width: 100%;
top: 0;
left: 0;
}
#slide {
position: relative;
z-index: 1;
}
.menufixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
border-bottom: chocolate 8px solid;
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
The whole css file as published to the wwwroot folder:
.menu_item {
color: #FFFFFF;
border-top: 4px solid #B6B5B5;
display: inline-block;
font-family: Arial;
font-variant: small-caps;
font-weight: normal;
padding: 5px 2px 0px 2px;
text-decoration: none;
/* font-weight: bold; */
letter-spacing: 2px;
margin: 5px;
}
#Top {
border-bottom: chocolate 8px solid;
/* margin-bottom: 3%; */
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
a {
text-decoration: none;
color: #5E5E5E;
}
#Logo {
color: #5E5E5E;
font-family: 'Reenie Beanie', cursive;
display: inline-block;
margin-right: 3vw;
background: url(http://www.elinorart.com/Gallery/latest%20artworks/slides/93.jpg) no-repeat, #5E5E5E;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1 {
font-size: 70px;
margin: 5% 0;
}
h1:hover {
color: chocolate;
}
a:hover, a div:hover {
color: chocolate;
}
#menu_bar {
display: inline-block;
}
#contact_text {
width: 50%;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
/* font-weight: 600; */
font-size: 16px;
/* font-family: -webkit-pictograph; */
color: #5E5E5E;
/* letter-spacing: 0px; */
}
#bottom_left p {
padding: 0px 49px 0 64px;
}
#bottom_center p {
padding: 0px 62px 0 30px;
}
#contact_details {
padding-bottom: 10px;
color: #5E5E5E;
font-size: 16px;
}
#pageFooter {
font-size: 0.8em;
color: #5E5E5E;
text-align: center;
font-family: Arial;
margin-top: 10%;
}
li {
line-height: 24px;
font-family: Arial;
color: #1C1C1C;
font-size: 16px;
list-style-type: none;
}
.exhibit_name {
color: black;
}
#page {
text-align: center;
background-color: rgb(232, 232, 232);
}
.page_content {
font-family: Arial;
/*text-align: initial;*/
/* background-color: rgb(232, 232, 232); */
/* padding-top: 3%; */
}
p {
font-size: 16px;
font-family: Arial;
}
#media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
body.about_me {
background-color: green;
}
.borderClass {
border-color: chocolate;
}
#contactDiv {
display: inline-block;
}
td {
vertical-align: top;
}
.contact_field {
border-bottom-width: 1px;
border: 1px solid #5E5E5E;
border-radius: 4px;
font-size: 16px;
font-family: Arial, cursive;
width: 322px;
height: 24px;
}
.contact_field_desc {
font-size: 14px;
padding: 4px;
font-family: Arial;
text-align: left;
}
.send_form {
border-bottom-width: 1px;
border: 1px solid #5E5E5E;
border-radius: 4px;
padding: 5px 28px;
}
body {
margin: auto;
}
#Facebook {
/* width: 100%; */
/* text-align: center; */
/* margin-left: 40%; */
/* margin-top: 3%; */
display: inline-flex;
margin-top: 2%;
}
#fb-root {
/*float: left;*/
vertical-align: central;
margin-right: 10px;
}
#fb-root2 {
/*float: right;*/
vertical-align: central;
margin-left: 10px;
}
.fb_iframe_widget {
/* margin-right: 13px; */
/* float: left; */
padding-right: 10%;
}
.exhibitions {
width: 40%;
margin: 0 5%;
float: left;
/*text-align: left;*/
}
.wrapper {
display: inline-block;
width: 45%;
text-align: left;
}
.exhibitions_wrapper {
padding-right: 3%;
}
ul {
padding: 0px;
}
ul li ul li {
list-style-type: initial;
padding-bottom: 10px;
}
.exhibitions_year {
/* margin-left: -5%; */
font-family: 'Reenie Beanie', cursive;
font-size: 37px;
/* line-height: 1px; */
margin: 14px 0;
color: orange;
color: chocolate;
font-weight: 500;
letter-spacing: 4px;
}
.bottom_sections {
width: 25%;
/* height: 100%; */
vertical-align: top;
text-align: left;
display: inline-block;
/* padding: 2%; */
}
.bottom_content {
/* padding: 0 10%; */
text-align: center;
}
.buttom_text {
font-size: 13px;
line-height: 25px;
padding: 0 10%;
text-align: left;
}
#AboutMe p {
font-size: 13px;
line-height: 25px;
}
.contact_info {
display: inline-block;
width: 19%;
vertical-align: top;
padding-left: 30px;
}
#exhibitions_wrapper {
width: 70%;
}
#AboutMe .wrapper {
border-right: 1px solid lightgray;
padding-right: 30px;
}
h3 {
padding-top: 3%;
margin: 12px 0;
font-variant: small-caps;
font-size: 37px;
font-weight: normal;
color: dimgrey;
letter-spacing: 10px;
font-family: Arial;
}
h4 {
font-size: 24px;
color: dimgrey;
font-variant: small-caps;
font-weight: normal;
}
h5 {
margin-top: 30px;
/* padding: 15px; */
border-bottom: 1px solid black;
font-size: 24px;
color: dimgrey;
font-variant: small-caps;
font-weight: normal;
text-align: center;
}
h2 {
/* padding: 0; */
margin-top: 12px;
font-variant: small-caps;
font-size: 32px;
font-weight: normal;
color: dimgrey;
letter-spacing: 10px;
font-family: Arial;
}
#AboutMe .contact_field {
width: 187px;
}
input {
margin-bottom: 15px;
}
.gallery_homepage {
height: 550px;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
.gallery_homepage div {
height: 550px;
}
#layer {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
height: 550px;
background-repeat: repeat;
position: absolute;
z-index: 3;
width: 100%;
top: 0;
left: 0;
}
#slide {
position: relative;
z-index: 1;
}
.menufixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
border-bottom: chocolate 8px solid;
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
Thanks!

Answer 1

There can be many reasons for it:
Your CSS rule might be overridden by inline style
It may be overridden by other preceding rule (in the later lines) in the same CSS file
You might be over ridding the css using ' !important' (this can be seen in dev tools)
You might have an error in your CSS file such as wrong syntax or missing ';' after rule or missing '{' or '}' at the beginning or end block of rules
Last but not least you might not be including the (correct) CSS file properly in the html
Hope this helps.

Answer 2

I just had a similiar problem: I updated a HTML and a CSS file and uploaded it to the server. When reloading in the browser, the updates in the HTML file showed but those in the CSS didn't. That was because of the way the browser (in my case Chrome) is caching. When opening in an Inkognito-Tab or deleting the cache it did work.