UPDATE: Just three days ago, my website looked flawless without any updates to the CSS or HTML.
Suddenly, a few days back, I noticed that the styling of my website was completely off. It seemed like the browser decided to ignore my stylesheet and display everything in Times New Roman font. This issue was apparent in both Chrome and Internet Explorer.
Whenever I tried to style an HTML element in my stylesheet, the browser failed to recognize it. However, when I applied the styles directly within the HTML code, it worked perfectly fine.
One may assume that the HTML document is not reading the CSS file properly, but oddly enough, some elements such as the header, navigation bar, and footer were displaying correctly.
HTML Page
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" type="text/css" href="new-site.css" media="screen"/>
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300|Open+Sans:400,700|Roboto:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrap">
<?php include('includes/googleAnalytics.php'); ?>
<?php include('includes/nav.php'); ?>
<div id="content-custom">
<div id="main-custom">
<div id="main-intro-custom">
<br>
<br>
<span>Contact Us</span>
<p>Questions or comments? Send us a message. We would love to hear from you.</p>
</div><!--end mainintrocustom-->
</div><!--end main-custom-->
<div id="contact">
<div id="checkfaq">
<a href="faq.php">Check our FAQ to see if your question has been answered.</a>
</div><!--end checkfaq-->
<form name="contact" method="post">
<br>
<input type="text" name="name" placeholder="name" required/>
<br><br>
<input type="text" name="email" placeholder="email" required/>
<br><br>
<textarea name="message" placeholder="message" required></textarea>
<br><br>
<input type="submit" name="send" value="Send" />
</form>
</div><!--end contact-->
</div><!--end content-->
<?php include('includes/footer.php'); ?>
</div><!-end wrap-->
</body>
</html>
For instance, on this page, only the elements within <div id="contact"> are not being styled properly.
Even if I include the following in the external stylesheet:
#contact{
background:orange;
}
The browser refuses to render it. However, simply adding inline styles like this makes it work:
<div id="contact" style="background:orange;">
The oddest part is that neither the CSS nor the HTML underwent any changes. Upon reaching out to hostgator for support, they confirmed that there were no server errors causing this issue.
Any suggestions on resolving this puzzling situation? Has anyone faced a similar problem before?
UPDATE: Here's the link to my stylesheet: CSS HERE
UPDATE: I suspect the problem originated from not closing the .imgThumb:hover class. How did the browser suddenly disrupt the layout days after testing it? And why did other pages get affected by this error if they didn't include the .imgThumb class?