[headbirth]

My dilemma:

I have this row of icons that I'm doing CSS image rollovers for. For some reason as soon as I put a link around the image they shifted and are now cropped.

http://www.nomadicmind.com/Postings/rollover_bug.jpg

I toyed with different position tags to no avail. Interesting enough it works fine in the old IE for Mac.

Any help would be appreciated ... everytime I pickup web coding after a break it's a matter of relearning it all over again :-(

XHTML Code:

<div id="work">

<p class="rule">
<span class="smallType">view</span>Design<br />
<a href="#"><img src="site/graphics/Trans.gif" alt="Item1" width="16" height="18" /></a>
<a href="#"><img src="site/graphics/Trans.gif" alt="Item1" width="16" height="18" /></a>
<a href="#"><img src="site/graphics/Trans.gif" alt="Item1" width="16" height="18" /></a>
<a href="#"><img src="site/graphics/Trans.gif" alt="Item1" width="16" height="18" /></a>
<a href="#"><img src="site/graphics/Trans.gif" alt="Item1" width="16" height="18" /></a>
<a href="#"><img src="site/graphics/Trans.gif" alt="Item1" width="16" height="18" /></a>
<a href="#"><img src="site/graphics/Trans.gif" alt="Item1" width="16" height="18" /></a>
<a href="#"><img src="site/graphics/Trans.gif" alt="Item1" width="16" height="18" /></a>
<a href="#"><img src="site/graphics/Trans.gif" alt="Item1" width="16" height="18" /></a>
<a href="#"><img src="site/graphics/Trans.gif" alt="Item1" width="16" height="18" /></a>
<a href="#"><img src="site/graphics/Trans.gif" alt="Item1" width="16" height="18" /></a>
<a href="#"><img src="site/graphics/Trans.gif" alt="Item1" width="16" height="18" /></a>
</p>

</div>




CSS:

/* LINKS */
#work A:link {
background: url(../graphics/Un-Viewed.gif) no-repeat center center;
}

#work A:visited {
background: url(../graphics/Viewed.gif) no-repeat center center;
}

#work A:hover {
background: url(../graphics/Viewing.gif) no-repeat center center;
}

#work A:active {
background: url(../graphics/ViewClick.gif) no-repeat center center;
}

[silkk]

I need to see the css for #work and .rule.

[silkk]

and off the top of my head it should be "background: url(../graphics/Viewing.gif) no-repeat top left;"

[headbirth]

I didn't define #work

.rule {
border-bottom: 1px dotted #CCCCCC;
padding-bottom: 3px;
margin-bottom: 8px;
}

[Synotic]

Give the paragraph a fixed height— in your case, 18px. Then, in the link declaration, put "display: block; float: left". Right now, the default display type of your links is "inline." Objects with that display type take on the height of the current line-height. Floating the objects to the left will place the links next to each other again.

Also, you should look into this method of image rollovers. It requires just one image per link, has no preloading requirements, and has no flicker.

Another note is that if you can simply set a width and a height for your links and then remove the transparent image.

To make your site more accessible, just put the name of the link between the link tags: <a>About</a>, and then, in your code, do: "a { text-indent: -10000px }." The text won't appear in visual browsers, but it will in non-visual browsers.

Good luck.

[headbirth]

Wow! Thanks for the help.

Is the fact that the visited image never works using this CSS Image rollover technique a bug in the browser?

[headbirth]

Well, your float and height solution seems to have worked, but after applying the single image rollover technique I have a problem with the first image not appearing in Firefox. IE and Safari work great ... the rollover states in Firefox are fine it's just the initial state is blank.

Here's my CSS for the rollovers:

#work A {
display: block;
float: left;
height: 18px;
width: 16px;
margin-right: 6px;
text-indent: -10000px;
outline: none;
}

#work A:link {
background: url(../graphics/GalleryIcons.gif) no-repeat 0px 0px;
}

#work A:visited {
background: url(../graphics/GalleryIcons.gif) no-repeat -88px 0px;
}

#work A:hover {
background: url(../graphics/GalleryIcons.gif) no-repeat -22px 0px;
}

#work A:active {
background: url(../graphics/GalleryIcons.gif) no-repeat -43px 0px;
}

Any thoughts?

[exca1ibur]

You need to put your dimensions on the parent #work tag. I write all my CSS rollover this way and include a transparent GIF to handle the ALT tag for me. Give this a shot.

Code:
<div id="work">
     <a href="#"><img src="spacer_goes_here.gif" width="18" height="16" alt="Work" border="0" /></a>
</div>

#work {
	margin-left: 6px;
        height: 18px;
        width: 16px;
	}
	
#work a {
	float: left;
	background: url(../graphics/GalleryIcons.gif) 0px -30px no-repeat;
	}
	
#work a:hover {
	background-position: -22px 0px;
	}

[headbirth]

Nice clean code exca1ibur, but it doesn't seem to work for me ... specifying work to be 18x16 just scrunches all my link to the left.

I posted what I have so far here:

http://www.nomadicmind.com/Postings/index1d.html

CSS code here:

http://www.nomadicmind.com/Postings/...SScripts1d.css

Maybe that'll make the Firefox problem clearer.

[headbirth]

Nevermind ... apparently Firefox didn't like the fact that I hadn't filled in my links yet.

[headbirth]

Anyone know why the active state doesn't take for the CSS one image rollover technique?