CSS Background resizing

[Spinal]

I have a strange question...

I'm working on a new site to keep track of all the weird and wonderful trips I do, and I saw a neat trick on another site... but I'm having trouble achieving the same effect.

If you look at this page:
The Journal | Overland Journal

(or pretty much any page on that site)
on the left hand side there is a menu, done almost entirely with CSS - there is no javascript involved, which is what I'm trying to get to.

The issue is; when I try something similar, my background image (which essentially is a black .png with rounded edges) doesn't get resized.

If you mouseover (or hover to use CSS appropriate jargon) you'll notice that the black .png is resized to fit the length of the text...

and I can't figure out how to do that. I tried cheating, and looking at their source code, but I can't see any attributes on the background option that resizes the image...

Any ideas?

TIA,
M.

EDIT: Forgot my source code!

.test1:hover span {
	background:url(../images/roundedbox.png) center top no-repeat;
	color:#ffffff;
}

    <td class="test1"><span>Link 5</span></td>

 

[Rayny]

I may be out of my depth here but:-
Could you not make the black.png much smaller and then use the repeat declaration so that it repeats itself to fill the required height and length ?

 

[stevesey]

Noticed they have a different class for each menu item, and the png itself is as wide as the longest menu item - didn't have time to look any further though.

 

[Stratman]

I you're using Internet Explorer to view the page youj wish to emulate, click on 'View' in the menu bar then 'Source'. This will show the HTML source code of the page.

 

[Sp!ke]

The code you need is hidden away in a separate cascading style sheet though.

 

[Stratman]

Curses! Foiled again.

 

[stevesey]

The code you need is hidden away in a separate cascading style sheet though.

Just another level of indirection to follow.

Although said style sheet has all the white space and carriage returns removed, didn't get as far as putting it into something that would re-format it for me.

 

[Noodle-Pulp]

try this bad boy
http://mabblog.com/cssoptimizer/uncompress.html

 

[Spinal]

I had a look through their css file, inserted carriage returns using dreamweaver...

While they do have a different class for each menu item, I can't find any reference to those classes in the css sheet, so I think they use the classes in the javascript (or somewhere else anyways).

This is relevant though:

#navigation2 {
	margin-top: -5px;
}
#navigation2 a:link {
	color: #666;
}
#navigation2 a:visited {
	color: #666;
}
#navigation2 .lh a:link {
	color: #000;
	font-weight: 700;
	background: none;
}
#navigation2 .lh a:visited {
	color: #000;
	font-weight: 700;
	background: none;
}
#navigation2 .lh a:hover {
	color: #000;
	font-weight: 700;
	background: none;
}
#navigation2 li {
	clear: left;
}
#navigation2 a {
	display: block;
	height: 27px;
}
#navigation2 span {
	display: block;
	height: 27px;
}
#navigation2 a {
	margin-left: -7px;
	padding-left: 7px;
	float: left;
}
#navigation2 span {
	margin-right: -7px;
	padding-right: 7px;
}
#navigation2 a:hover {
	background: url(../graphics/navigation2.png) no-repeat top;
}
#navigation2 a:hover span {
	background: url(../graphics/navigation2.png) no-repeat top;
}
#navigation2 a.current {
	background: url(../graphics/navigation2.png) no-repeat top;
}
#navigation2 a.current span {
	background: url(../graphics/navigation2.png) no-repeat top;
}
#navigation2 a:hover {
	background-position: left;
	color: #dbdbdb;
}
#navigation2 a.current {
	background-position: left;
	color: #dbdbdb;
}
#navigation2 a:hover span {
	background-position: right;
	position: relative;
}
#navigation2 a.current span {
	background-position: right;
	position: relative;
}

That's the hover line, and the reference to the image... any idea what the hash does?

M.

 

[Noodle-Pulp]

(I quote)
The hash is an id selector. So, somewhere in the body there is an id name of "load" like so:

<div id='load'>

Where as the dot is a class selector, and references an element with a class name of "loading" like so:

<div class="loading">