Member Avatar for kevwood

hi all.

i am having problems getting my CSS file to link in with all my pages. the navigation section looses its bg image.

here is the code i am using for the navigation

<div id="navigation"><p id="P_navigation">
        <ul id="List_nav">
            <li><a href="xxxxxxx.html" class="top_nav">xxxxxxx</a></li>
            <li><a href="xxxxxxx.html" class="top_nav">xxxxxxxxx</a></li>
            <li><a href="xxxxxxxx.html" class="top_nav">xxxxxxx</a></li>
            <li><a href="xxxxxx.html" class="top_nav">xxxxxs</a></li>
            <li><a href="xxxxx.html" class="top_nav">xxxxxx</a></li>
            <li><a href="xxxxx.html" class="top_nav">xxxxxxx</a></li>
            <li><a href="xxxx.html" class="top_nav">xxxxx</a></li>
            <li><a href="xxxxx.html" class="top_nav">xxxxxx</a></li>
            <li><a href="xxxx.html" class="top_nav">xxxxxx</a></li>
            <li><a href="xxxxxxx.html" class="top_nav">xxxxx</a></li>
            <li><a href="xxxxxx.html" class="top_nav">xxxxx</a></li>
            <li><a href="xxxxxx.html" class="top_nav">xxxxxx</a></li>
        </ul></p>
    </div>

here is the css link to the file

<link rel="stylesheet" type="text/css" href="css/main_style.css" />

here is the css used for the navigation

#navigation{
    float : left;
    width : 18%;
    border : solid #45bf55;
    border-width : 3px;
    background-color : #fff;
    margin-right : 30px;
}

#P_navigation{
    padding-left : 4px;
    padding-top : 4px;
    list-style-type : none;
    margin : 0;
    margin-left : 0;
}

#List_nav li{
    list-style-type : none;
    margin : 0;
    margin-left : 0;
    background : url(../images/buttons/main_link_bg.png) no-repeat;
    width : 98%;
    height : 30px;
    text-align:center;
    padding-top : 4px;
    padding-left : 4px;
}

the files are store with css file stored in a folder called CSS then the image for the link bg is stored in a folder IMAGES/BUTTONS (folders not in caps).

it all works fine on the index page but fails to show on the following pages. I am assuming the rest of the css is working as my text is remaing the colours i want and the formatting seems to be correct.

  • 2 Contributors
  • 3 Replies
  • 217 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by theHop

Dani AI

Generated

Good catch by and well done getting it working, . This is a common, low‑friction issue where a working stylesheet still appears to “lose” images on some pages because of caching, path resolution, or server filename rules. Short, practical checklist and small fixes that prevent the same surprise later:

  • Hard refresh first (Ctrl/Cmd + Shift + R or Ctrl + F5). If that fixes it, the browser had cached an older asset (CSS or image).
  • Use DevTools → Network (check “Disable cache” while DevTools is open) and reload. Confirm the CSS and the image both return 200 and not 404/403. Right‑click the resolved image URL → Open in new tab to confirm it is reachable.
  • Inspect the element and look at the computed background-image value to see the exact URL the browser tried to load.
  • Remember: URLs inside CSS are resolved relative to the stylesheet file, not the HTML page. If pages live in different folders this matters. If you want to avoid that, use root‑relative or absolute URLs instead (see example).
  • On servers (Linux) filenames are case‑sensitive — a mismatch in capitalization will work locally on Windows but fail after deployment.

Small examples to reduce confusion (change names to match your project):

<link rel="stylesheet" href="/css/main.css?v=20260127">
/* root‑relative image path avoids ../ issues */
.nav-item { background-image: url('/images/nav/nav-bg.png'); background-repeat: no-repeat; }

Extra tips: add a build step that fingerprints files (main.abc123.css) or append a version query string for cache‑busting; check for a stray <base> tag that alters URL resolution; verify file permissions and correct MIME types on the server. These steps will make the behavior consistent across pages and prevent future “works on index, not on other pages” surprises.

Recommended Answers

All 3 Replies

Member Avatar for theHop

So if I understand correctly, your folder structure is as follows.

index.html
css/main_style.css
images/buttons/main_link_bg.png

your css seems fine to me. the url function in css is relative to the css file it self. The only thing I can think is maybe the browser is loading cached versions of your other pages. Have you tried to refresh on the other pages. sometimes it's worth holding down the refresh key to get to force a new version of the page. Or just try them in a different browser to see if the BG image is still missing

Member Avatar for kevwood

thanks for the reply it was a chaching problem it is working fine now. never had that happen before.

Member Avatar for theHop

No problem...I have fell for that a few times. I think it was with background images too. glad you got it sorted. Please vote up my answer and mark as solved. : )

commented: great response. +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.