Single CSS file for multiple pages

[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.

[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

[kevwood]

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

[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. : )