Welcome to the MacNN Forums.

loren s · Sep 20, 2004, 12:43 PM

This code works in all broswers for me except Mozilla brand broswers.

Or would anyoone have a link to an image stack of css rollovers tutorial that works in most all broswers ??

Code:
<style type="text/css" title="currentStyle">.rollover1 a {display:inline-block;padding-left:20px;width: 90px;height: 67px;margin-bottom:2px;margin-left:2px;border:solid 1px;background-image: url(rool/roll1.gif); text-decoration: none;}.rollover1 a:hover { background-position: 0 -67px;color: #049;}.rollover1 a:active {background-position: 0 -67px;color:#fff;}</style>
<style type="text/css" title="currentStyle">.rollover2 a {display:inline-block;width: 90px;height: 67px;margin-right:0px;margin-bottom:2px;background-image: url("rool/roll2.gif");}.rollover2 a:hover { background-position: 0 -67px;color: #049;}.rollover2 a:active {background-position: 0 -67px;color:#fff;}</style>
<style type="text/css" title="currentStyle">.rollover3 a {display:inline-block;width: 90px;height: 67px;margin-right:2px;margin-bottom:2px;background-image: url("rool/roll3.gif");}.rollover2 a:hover { background-position: 0 -67px;color: #049;}.rollover3 a:active {background-position: 0 -67px;color:#fff;}</style>
<div>
<span class="rollover1">
<a [ href="#" ]> </a>
<span class="rollover2">
<a href="#"> </a>
<span class="rollover3">
<a href="#"> </a>

Chris O'Brien · 01:44 PM

Whoa. Stop. Synotic's gonna go mental about that

try this:

Code:
<html>
  <head>
    <style type="text/css" title="currentStyle">
        .rollover1 a {padding-left:20px; margin: 0 0 2px 2px; border:solid 1px; background-image: url(rool/roll1.gif); text-decoration: none;}
        .rollover2 a {margin: 0 0 2px 0; background-image: url("rool/roll2.gif");}
        .rollover3 a {margin: 0 2px 2px 0; background-image: url("rool/roll3.gif");}
        span a {display:inline-block;width: 90px;height: 67px;}
        span a:hover { background-position: 0 -67px;color: #049;}
        span a:active {background-position: 0 -67px;color:#fff;}
    </style>
  </head>
  <body>
    <div>
        <span class="rollover1">
            <a href="#">link 1</a>
        </span>
        <span class="rollover2">
            <a href="#">link 2</a>
        </span>
        <span class="rollover3">
            <a href="#">link 3</a>
        </span>
    </div>
  </body>
</html>

Remember to close tags. And does IE have good enough CSS 2 support to understand inline-block?

Anyway - I've taken out some of the redundancy, but without knowing the whole layout of the page, it can't be 100%... And I've left the span's in incase anything else was going in them - you could just give the <a>'s classes, y'know.

That's a bit of a start for yer.

Edit: Ooh, I'm now an elite member

registered_user · Sep 20, 2004, 02:05 PM

Better still, style the anchor tags and do away with the spans entirely!

loren s · Sep 20, 2004, 02:23 PM

Aw thankyou.
Oddly enough mac IE shows this nice and clean so does safari, but mozilla shows it as tiny boxes. what gives ? I thought Mozilla was suppost to be the bees nees of proper code and rendering. I have now spent 4 hours trying to get this done with what could have been ten minutes in flash... arrggggg I hate html

I keep trying to style the a tags but it did nothing.. could you paste a simple example?

Chris O'Brien · Sep 20, 2004, 03:00 PM

Originally posted by registered_user:
Better still, style the anchor tags and do away with the spans entirely!

Originally posted by Black Book:
And I've left the span's in incase anything else was going in them - you could just give the <a>'s classes, y'know

registered_user · Sep 20, 2004, 03:34 PM

that's what I get for not side-scrolling. :o

Synotic · Sep 20, 2004, 04:05 PM

Originally posted by Black Book:
Whoa. Stop. Synotic's gonna go mental about that

True, in that I didn't take the time to read through all that code, much less make sense of it

I'll pull a phil and ask if you have a link to what you're trying to do. If I were you, I might experiment with "display; block" and 'float: left' for the anchors (can we call them that?) instead of inline-block. I'm also not exactly sure why you're putting a block-like element in an inline one, it wouldn't surprise me if that were the cause of one of you're rendering issues. One of those four hours could possibly of been better used by reading through a CSS tutorial/reference. Although it may seem a little boring and even pointless, it'll benefit you in the future and you'll be able to recreate the same effect you're going for in less than 10 minutes. If you're looking for direct help, the best resource for CSS rollovers is probably from the inventor himself.

loren s · Sep 20, 2004, 04:31 PM

well I mean I can still not get mozilla to make it work. I did try float left but now IE will not render it correctly.. boo hoo

Synotic · Sep 20, 2004, 05:13 PM

Originally posted by loren s:
well I mean I can still not get mozilla to make it work. I did try float left but now IE will not render it correctly.. boo hoo

Well I mocked this up in a couple minutes and it seems to work well enough in IE5:mac, MSIE6, Safari and Firefox.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<title>rollovers</title>
		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
		<style type="text/css">
			body { margin: 0.2em }
				a { margin: 0.2em; padding: 0.2em 0.4em; border: solid 1px #666; color: #444; text-decoration: none; font: 12px "Lucida Grande"; display: block; float: left }
				a:hover { background: #666; color: #fff }
				a:active { background: #444; border-color: #444 }
		</style>
	</head>

	<body>
		<a href="t1/">Test 1</a><a href="t2/">Test 2</a><a href="t3/">Test 3</a><a href="t4/">Test 4</a><a href="t5/">Test 5</a>
	</body>
</html>

I didn't take the time to create some test images to work with for the CSS rollovers, but I'm guessing that your problem is with the general layout/positioning rather than the actual rollovers themselves, whose code looks reasonable enough. If you want some more ideas on how to use CSS rollovers, check out the link I gave you earlier.

Also, when using things like inline-block and trying to wrap blocks in inline elements, you're bound to get rendering issues if you use a bad doctype� another reason why a small snippet of your code may not be completely helpful.

loren s · Sep 23, 2004, 11:15 AM

thank you, i will try this out soon.