Background positioning driving me crazy!

[Ludatha]

Hey
I am struggling to get the background position to obey me, using top, bottom, left etc works, but when I start using px it doesn't do a thing.

I'm trying to combine all the images in my site.

Here is the development:
http://84.12.13.44/design/

http://84.12.13.44/design/images/lef...ation_text.png


http://84.12.13.44/design/images/link_images.png


Anybody help me solve this?

[abduraooft]

Check http://jigsaw.w3.org/css-validator/v...44%2Fdesign%2F
Try it like

a.nav_genyx {width:62px; background-position:0 0}
a.nav_genyx:hover {background-position:0 100%}

a.nav_computers {width:101px; background-position:-62px 0}
a.nav_computers:hover {background-position:-62px 100%}

PS: Hope, you'll add some text inside the anchors for the search engines.

[Ludatha]

Originally Posted by abduraooft

Check http://jigsaw.w3.org/css-validator/v...44%2Fdesign%2F

Does that mean I cannot use px in positioning and I'm forced to use percentages?

[abduraooft]

Originally Posted by Ludatha

Does that mean I cannot use px in positioning and I'm forced to use percentages?

Check the additions in my above post.

[Ludatha]

Originally Posted by abduraooft

Check the additions in my above post.

Thanks for the help, but I can't seem to get the left navigation working, its vertical as opposed to horizontal:

.genyx_left_link {height:14px; background-position:0 0;}
.genyx_left_link:hover {height:16px; background-position:0 -85px;}

The only thing that happens is that the height increases by 2px.

[abduraooft]

Change them to

a.genyx_left_link {height:14px; background-position:0 0;}
a.genyx_left_link:hover {height:16px; background-position:0 -85px;}

to override the specificity of .left_col_links a

[Ludatha]

Originally Posted by abduraooft

PS: Hope, you'll add some text inside the anchors for the search engines.

Just one last thing, how do I add text but make it invisible, I know about display:none, but that hides the image as well.

[reyna12]

Originally Posted by Ludatha

Just one last thing, how do I add text but make it invisible, I know about display:none, but that hides the image as well.

text-indent: -99999px;

[abduraooft]

You may set a large negative text-indent to the anchors to hide the text from normal users.

[Ludatha]

CSS is such a flawed language...
Thanks guys.