Adbsl Adbsl - 1 year ago 58
CSS Question

Linked CSS stylesheet only partly connecting

EDIT/UPDATE: This happens every day. I write code and it doesn't work, then I open it the next day and it does work. Why is this happening?
I'm using Sublime Text 2 to write the code, using XAMPP/Apache to run it, and Chrome to view it.

I'm creating a basic web page and this is what I have so far


<!DOCTYPE html>
<title>A Touch of Dazzle</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<div id="main_page">
<img src="ATD-Logo.jpg" alt="A Touch of Dazzle Home Page" style="width: 80%; height: auto;"/>

The css stylesheet is working for both the header and top_nav files but not the footer. They are all formatted the exact same way. I put my css through a css3 validator and there were no mistakes.

Why is it only connecting to some?

(I have tried resaving it and opening and closing it and reopening it in the browser numerous times)

Here is the rest of the code for reference:

<div id="header">
<h1>A Touch of Dazzle</h1>
<h3>Inventory Database</h3>

<div id="top_nav">
<ul id="menu_nav">
<li><a href="">Page One</a></li>
<li><a href="">Page Two</a></li>
<li><a href="">Page Three</a></li>
<li><a href="">Page Four</a></li>
<li><a href="">Page Five</a></li>
<li><a href="">Page Six</a></li>

<div id="footer">
<p>&copy; 2016</p>

The stylesheet obviously connects since parts of it are connecting. it's long but here is the part thats not connecting

/*main page begins*/
#main_page img
margin-left: 10%;
/*main page ends*/
/*footer begins*/
#footer p
float: left;
display: block;
margin: 0 auto;
color: red;
/*footer ends*/

Answer Source

I have found after much research the best way was to force the browser to use my latest stylesheet by writing

<link rel="stylesheet" type="text/css" href="stylesheet.css?v=1.1" />

Thank you everyone for your help, and if you find a better way to do this please let me know.