CSS sprites

[Pavs]

I am playing around with CSS sprites today, where I combined a total of 8 images together and used CSS to show each images as links. The problem is not all images share the same size the two sizes are:

width:190px; /* Height and width of each link block */
height:42px;

and

width:380px; /* Height and width of each link block */
height:42px;

Everything works great except for that on the larger image (width:380px) only 190px is used as link when I click on it, the rest doesnt work as link. I think the reason is because I am using it on a wordpress blog as a widget there are two widgets side by side. each widget is just over 190px in wide, so when I use the smaller image it works, the larger image works only upto the size of the widget. Is there a way aroud this?

Thanks for any help.

I know I am not supposed to post any links.
But I will copy the whole CSS code below which might give people whoa re seriously willing to help, a hint where the site might be and an example of what i am trying to say. Please note that I am not prior experience with CSS. Today is the first day I am using it, but I pick preety fast, so any tips are helpfull:

--------------------------------------style.css----------------

.comtainer li{
float:left; /* Allows list to display horizontally */
display:inline; /* Fixes the IE double margin bug */

}

.comtainer li a { background: url(http://farm3.static.flickr.com/2316/2292053595_126cae4297_o.png) no-repeat top left;
display:block;
width:190px; /* Height and width of each link block */
height:42px;
margin-right: 0px;
margin-bottom: 10px;
vertical-align: middle;

}

#sprite-firefox a{ background-position: 0 -100px; }
#sprite-life a{ background-position: 0 -170px; }
#sprite-linux a{ background-position: 0 -240px;}
#sprite-mac a{ background-position: 0 -310px;}
#sprite-window a{ background-position: 0 -380px;}
#sprite-wordpress a{ background-position: 0 -450px; }

.comtainer2 li{
float:left; /* Allows list to display horizontally */
display:inline; /* Fixes the IE double margin bug */
}

.comtainer2 li a { background: url(http://farm3.static.flickr.com/2316/2292053595_126cae4297_o.png) no-repeat top left;
display:block;
width:380px; /* Height and width of each link block */
height:42px;
margin-right: 10px;
margin-bottom: 10px;
vertical-align: middle;

}

#sprite2-haxorforum a{ background-position: 0 -520px; margin-left: 5px;}

#sprite2-haxornetwork a{ background-position: 0 -30px; margin-left: 5px;}

--------------------------------------style.css----------------

--------------------------------------widget links 1----------------

<ul class="comtainer">
<li id="sprite-linux"><a href="http://www.linuxhaxor.net/"></a></li>
<li id="sprite-window"><a href="http://www.windowhaxor.net/"></a></li>
<li id="sprite-mac"><a href="http://www.machaxor.net/"></a></li>
</ul>
<ul class="comtainer2">
<li id="sprite2-haxorforum"><a href="http://www.haxorforum.net/"></a></li>
<li id="sprite2-haxornetwork"><a href="http://www.haxornetwork.net/"></a></li>
</ul>

--------------------------------------widget links 1----------------

--------------------------------------widget links 2----------------
<ul class="comtainer">
<li id="sprite-firefox"><a href="http://www.firefoxhaxor.net/"></a></li>
<li id="sprite-wordpress"><a href="http://www.wordpresshaxor.net/"></a></li>
<li id="sprite-life"><a href="http://www.lifehaxor.net/"></a></li>
</ul>
--------------------------------------widget links 2----------------

Thanks again for any help.
pavs

[fside]

There must be more going on here. You haven't posted everything. It works fine in Firefox. The image line is broken on the top by Opera, and on the bottom line by IE. But in all cases, you can click to the edge of the two wide images and get to the desired link.

[Pavs]

fside, yes you can onthe wideimages only if you click onthe left corner, not on the right corner, I tried it with firefox and IE, doesnt work.

Personally I am not worried about opera. But on IE, the broken line you mentioned right before the two wide images, how to fix it.

(the css sprite isnt implemented on all the links but only the first two links after this line:
--------------------------------------widget links 1----------------

Thanks for looking into it.

[fside]

On all the boxes. You can click right up to the rightmost side and corner and bring up the URL, at least as you posted, here. As for the line break, perhaps you could just float each in a div of a certain class instead of using the unordered list?

[Pavs]

Thanks for looking into it. I am switching into text based menu. It seems more logical, and faster to load the page, which was my ultimate goal when moving to CSS sprites.