Background image for rollover menu - path relative to css file - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Background image for rollover menu - path relative to css file

odin1701

6:56 pm on Jan 12, 2011 (gmt 0)

I am trying to do a rollover menu in CSS.

This is what I have for a stylesheet:

a.home {
display: block;
width: 75px;
height: 30px;
background: transparent url(images/home.gif) no-repeat;
}

a.home:hover {
background-position: -75px 0;
}

I have this saved in a folder called includes as stylesheet.css

In the head of my HTML file, I have this:

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

That should load it.

Now, if I have a blank document, this works fine:

<body>

<a class="home" href="#"></a>


</body>

The problem I am having is that when I try to make it work on my actual page, it isn't working.

Now, I am putting the <a.... portion into a row of a table so this is apparently what is causing the issue and I don't know how to fix it. Any ideas? I know, I know ditch the table, and I will but I don't know how to do that just yet. I'm wanting to get a basic page up with the info I need and then figure out how to do all of the layout in CSS.

rocknbil

5:50 pm on Jan 14, 2011 (gmt 0)

url(images/home.gif)
href="includes/stylesheet.css"

Your structure:

/file.html
/images
/includes

The CSS is looking for

/includes/images/home.gif

Because with CSS, the requests are always relative to the style sheet. Do this

url(/images/home.gif)

(Note: this will only work on your server, not from local computers because they don't have a "document root.")

Or, if it's not at the domain root, the dot-toothpick syndrome works but presents maintenance challenges:

url(../images/home.gif)

(This one will work locally but is not optimal for servers)

odin1701

8:29 pm on Jan 14, 2011 (gmt 0)

Thanks, I figured that out.

But I did end up working through everything and I'm doing everything in CSS now, no more HTML tables!

Took a bit but I'm getting the hang of it.

I am using the ../ for now, it does also work on my server. I'll have to change it once I figure out how it determines the document root.