CSS image rollover problem

**nihilater** · 10-03-2009, 05:19 AM

I have this buttons right here:
http://rodsyconstruction.com/tryButs.html

and you see when I rollover a button, the rollover image isn't aligned in a proper way. I have this html code:

HTML Code:

 <div id="navi_panel">
    <div id="navimask">
      <ul>
		
			<li id="nav1"><a href="#">left</a></li>	
			<li id="nav2"><a href="#">home</a></li>	
			<li id="nav3"><a href="#">webs</a></li>	
			<li id="nav4"><a href="#">photos</a></li>	
			<li id="nav5"><a href="#">adders</a></li>	
			<li id="nav6"><a href="#">readers</a></li>	
			<li id="nav7"><a href="#">right</a></li>	
		
      </ul>
    </div>
  </div>

and this CSS

Code:

#navi_panel
{width:600px; height: 83px; margin: 0px auto; padding:0px;}

#navimask ul
{
  display:block;
  float:right;
  width:535px;
  height:83px;
  background:url(images/image_sprite.png) no-repeat 0 0;
  list-style:none;
}

#navimask li
{

  display:block;
  height:83px;
  float:left;

}

#nav1
{width:71px;}

#nav2
{width:81px;}

#nav3
{width:81px;}

#nav4
{width:81px;}

#nav5
{width:81px;}

#nav6
{width:69px;}

#nav7
{width:71px;}

#navimask ul li a {
  display:block;
  width:100%;
  height:100%;
  text-indent:-9999px;
  outline:none;
}

li#nav1 a:hover {
  background: url(images/image_sprite.png) no-repeat 0 -83px;
}
li#nav2 a:hover {
  background:url(images/image_sprite.png) no-repeat -71px -83px;
}
li#nav3 a:hover {
  background:url(images/image_sprite.png) no-repeat -152px -83px;
}
li#nav4 a:hover {
  background:url(images/image_sprite.png) no-repeat -233px -83px;
}

li#nav5 a:hover {
  background:url(images/image_sprite.png) no-repeat -314px -83px;
}

li#nav6 a:hover {
  background:url(images/image_sprite.png) no-repeat -395px -83px;
}

li#nav7 a:hover {
  background:url(images/image_sprite.png) no-repeat -464px -83px;
}

I know I have placed the positions on x-axis right, but I have a problem with the y-axis. I don't know how to place the rollover image to move a little on the left so that it will be aligned when i rollover on it. thanks. Hope anyone can help.

**jscheuer1** · 10-03-2009, 06:11 AM

In my experience trial and error will resolve these type of situations rather quickly. Just increase or decrease the offending axis value until it results in the desired presentation.

**nihilater** · 10-03-2009, 07:01 AM

I actually played with the axis x and y already at my:

Code:

 li#nav1 a:hover {
  background: url(images/image_sprite.png) no-repeat 0 -83px;
}
li#nav2 a:hover {
  background:url(images/image_sprite.png) no-repeat -71px -83px;
}
li#nav3 a:hover {
  background:url(images/image_sprite.png) no-repeat -152px -83px;
}
li#nav4 a:hover {
  background:url(images/image_sprite.png) no-repeat -233px -83px;
}

li#nav5 a:hover {
  background:url(images/image_sprite.png) no-repeat -314px -83px;
}

li#nav6 a:hover {
  background:url(images/image_sprite.png) no-repeat -395px -83px;
}

li#nav7 a:hover {
  background:url(images/image_sprite.png) no-repeat -464px -83px;
}

but it only change the hover image independently, not the whole image to which it has to be on the left side so that it will align. You can check my link, the hover images are actually on the right proportion, only its on a farther right.

I was actually thinking if i have errors on other codes in my style sheet. Thanks..

**coothead** · 10-03-2009, 01:58 PM

Hi there nihilater,

does this help...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://rodsyconstruction.com">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Untitled Document</title>

<style type="text/css">
#navimask {
    width:535px;
    height:83px;
    margin:0 auto;
    padding:0;
    list-style:none;
    background:url(images/image_sprite.png);
 }
#navimask li {
    float:left;
    height:83px;
 }
#nav1 {
    width:62px;
 }
#nav2,#nav3,#nav4,#nav5,#nav6 {
    width:73px;
    padding-left:8px;
 }
#nav7 {
    width:59px;
    padding-left:8px;
 }
#navimask a {
    display:block;
    height:73px;
    text-indent:-9999px;
    outline:none;
 }

#navimask a:hover {background:url(images/image_sprite.png);}

#nav1 a:hover {background-position:-0 -83px;}
#nav2 a:hover {background-position:-70px -83px;}
#nav3 a:hover {background-position:-151px -83px;}
#nav4 a:hover {background-position:-232px -83px;}
#nav5 a:hover {background-position:-313px -83px;}
#nav6 a:hover {background-position:-394px -83px;}
#nav7 a:hover {background-position:-475px -83px;}
</style>

</head>
<body>

<ul id="navimask">
 <li id="nav1"><a href="#">left</a></li>	
 <li id="nav2"><a href="index.html">home</a></li>	
 <li id="nav3"><a href="webs.html">webs</a></li>	
 <li id="nav4"><a href="photos.html">photos</a></li>	
 <li id="nav5"><a href="adders.html">adders</a></li>	
 <li id="nav6"><a href="readers.html">readers</a></li>
 <li id="nav7"><a href="#">right</a></li>		
</ul>

</body>
</html>

coothead

**bluewalrus** · 10-03-2009, 03:47 PM

This fixes it on my broswer firefox 3.5.3.Put that at the start.

Code:

#navi_panel, ul,li {
padding:0;
margin:0;
}

**nihilater** · 10-03-2009, 04:22 PM

Thank you guys for the reply. I really need this! I'll try that and will reply as soon as it works. thanks again!

**nihilater** · 10-03-2009, 04:31 PM

@bluewalrus - man, that one line worked! Haha, thats magic man. thanks so much. How did you figured that out? I was out all night figuring it myself.

@coothead - hey man, yours worked too. What did you changed with my code? Thanks man. You actually fixed it to make it look more arranged...

Thanks guys, you helped alot!

**nihilater** · 10-03-2009, 04:40 PM

Hey man, thanks again. That worked both in FF and IE.

by the way, @bluewalrus, when I added your code, the whole navigation moved to the left but i added this auto in the margin like this:

Code:

#navi_panel, ul,li {
padding:0;
margin:0px auto;
}

and that worked out good! thanks again man!

**coothead** · 10-03-2009, 04:49 PM

Hi there nihilater,

What did you change with my code?

Well, the main thing that I changed was the width of the a elements to allow for a reasonable margin between the links.

coothead

**nihilater** · 10-03-2009, 05:30 PM

@coothead - man, i ended up using your code. I had a problem with my old code cuz it doesn't fit in the center of my container. And yours actually is much concise. My code is really messed up and long. yeh, man thanks!

Thread: CSS image rollover problem

Thread Tools

Search Thread

CSS image rollover problem

Bookmarks

Bookmarks

Posting Permissions