Log in

View Full Version : 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:


<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


#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:
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...


<!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.


#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:



#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! :)
nihilater
10-03-2009, 05:32 PM
Hi there nihilater,

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

coothead

Oh I see. Ok, saw it. hehe. thanks man. Problem Solved!
bluewalrus
10-03-2009, 05:47 PM
I used firebug to view the css and saw that there was default padding coming in from firefox so i zeroed it out on all the elements you were using there.
nihilater
10-03-2009, 06:34 PM
Oh Firebug, hmm, need to check that out. Thanks man!