CSS Hover Change Background Image not working...

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|632\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> CSS Hover Change Background Image not working...
Sun, 08 Jul 2007, 19:35
garand	I have no idea why this code is not working. Can anyone help me out? It is just the CSS file obviously. * { font-family: Verdana; font-size: 12px; } a { color: black; text-decoration: underline; } a:hover { color: black; text-decoration: none; } a{ outline: none; } #header { background-image: url("images/header.png"); width: 1024px; height: 115px; } #header a { cursor: hand; } #nav { width: 1100px; height: 30px; } #navLeft { float: left; background-image: url("images/nav_left.png"); width: 71px; height: 30px; } #navHome { float: left; background-image: url("images/buttons/home.png"); width: 70px; height: 30px; cursor: hand; } #navHome a:hover { float: left; background-image: url("images/buttons/home_hover.png"); width: 70px; height: 30px; cursor: hand; } #navProjects { float: left; background-image: url("images/buttons/projects.png"); width: 117px; height: 30px; cursor: hand; } #navProjects a:hover { float: left; background-image: url("images/buttons/projects_hover.png"); width: 117px; height: 30px; cursor: hand; } #navGames { float: left; background-image: url("images/buttons/games.png"); width: 87px; height: 30px; cursor: hand; } #navGames a:hover { float: left; background-image: url("images/buttons/games_hover.png"); width: 87px; height: 30px; cursor: hand; } #navArticles { float: left; background-image: url("images/buttons/articles.png"); width: 118px; height: 30px; cursor: hand; } #navArticles a:hover { float: left; background-image: url("images/buttons/articles_hover.png"); width: 118px; height: 30px; cursor: hand; } #navBlog { float: left; background-image: url("images/buttons/blog.png"); width: 70px; height: 30px; cursor: hand; } #navBlog a:hover { float: left; background-image: url("images/buttons/blog_hover.png"); width: 70px; height: 30px; cursor: hand; } #nav3DDesign { float: left; background-image: url("images/buttons/3ddesign.png"); width: 129px; height: 30px; cursor: hand; } #nav3DDesign a:hover { float: left; background-image: url("images/buttons/3ddesign_hover.png"); width: 129px; height: 30px; cursor: hand; } #navWebDesign { float: left; background-image: url("images/buttons/webdesign.png"); width: 148px; height: 30px; cursor: hand; } #navWebDesign a:hover { float: left; background-image: url("images/buttons/webdesign_hover.png"); width: 148px; height: 30px; cursor: hand; } #navSoftware { float: left; background-image: url("images/buttons/software.png"); width: 132px; height: 30px; cursor: hand; } #navSoftware a:hover { float: left; background-image: url("images/buttons/software_hover.png"); width: 132px; height: 30px; cursor: hand; } #navLinks { float: left; background-image: url("images/buttons/links.png"); width: 78px; height: 30px; cursor: hand; } #navLinks a:hover { float: left; background-image: url("images/buttons/links_hover.png"); width: 78px; height: 30px; cursor: hand; } #navRight { float: left; background-image: url("images/nav_right.png"); width: 74px; height: 30px; } #entryHeader { background-image: url("images/entry.png"); width: 914px; height: 30px; line-height: 30px; text-align: left; font-weight: bold; } #entryBody { text-align: left; padding-top: 5px; width: 914px; } #entryBody a { color: black; text-decoration: underline; } #entryBody a:hover { color: black; text-decoration: none; } #notdone { background-image: url("images/notfinished.png"); width: 914px; height: 30px; line-height: 30px; text-align: center; font-weight: bold; } #footer { font-size: 10px; color: gray; } #footer a { text-decoration: underline; font-size: 10px; color: gray; } #footer a:hover { text-decoration: none; font-size: 10px; color: gray; } --v
Sun, 08 Jul 2007, 21:15
Stealth	Well, firstly, the hover thing doesn't work in IE 6 down. Not sure about IE 7. Instead of writing it like: #navHome a:hover I would write it as a.navHome:hover And where ever you are using it just put: id="navHome" As well as: class="navHome" Without any way to test you code I don't really know. I'm not the best with CSS but thats my input. -=-=- Quit posting and try Google.
Sun, 08 Jul 2007, 23:50
garand	well.. i fixed it but now it has to load the images for every page and i dont want that. i would use an frame but i want the url to change when you change pages and with a frame it would stay at "https://www.krypton-media.com". any ideas?
Mon, 09 Jul 2007, 00:01
Stealth	Instead of CSS, use Javascript. That way you can preload the images. -=-=- Quit posting and try Google.
Mon, 09 Jul 2007, 02:20
svrman	Well the easy way would be to load all images on page load in a hidden div or other similar element. "Display:none" or "visibility:hidden" might do it. -=-=- BlitzRSS script back online!