• 0

CSS Rollovers Help Please


Question

Hello:

I'm making a website that requires some css rollover buttons. I have a table with 6 horizontal cells into which I have text links and a background image for the hover and active states. They work fine in FF when I publish (from Dreamweaver), but once I test any button, hover states stop displaying the bold font weight they have assigned. The worst thing is the damn buttons don't work at all in Safari and Chrome (I'm on a Mac and don't have a Windows PC to test in IE).

Here is the CSS code I have right now. What am I doing wrong? I'm no expert at all so thanks in advance for any help/guidance.

a.topmenu:link {
	font-size: 12px;
	font-weight:normal;
	color: #000;
	text-align: center;
	text-decoration: none;
	display: block;
}

a.topmenu:hover {
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	line-height: 44px;
	text-decoration: none;
	background-image: url(../img/btn-topmenu-ro.jpg);
	background-repeat: no-repeat;
	background-position: 0px -2px;
	display: block;
}

a.topmenu:active {
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	line-height: 44px;
	text-decoration: none;
	background-image: url(../img/btn-topmenu-ro.jpg);
	background-repeat: no-repeat;
	background-position: 0px -2px;
	display: block;
}

a.topmenu:visited {
	font-size: 12px;
	font-weight:normal;
	color: #000000;
	text-align: center;
	text-decoration: none;
	line-height: 44px;
	display: block;
}

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

... okay, how are you controlling the rollover functions within your html doc?

if you are using dreamweaver, you might as well use the :

Insert > Image Objects > Rollover Image

that will build the HTML nicely for you, and be compatible with all browsers.... hope that this helps, without bombarding you with a ton of code and other useless information, if you are not going to completely understand it...! :)

Dreamweaver is great for simple things like this, and then go through the code.... it helps... teaches you quite well.

Thats how i cut my teeth into html, css etc/... :)

Link to comment
Share on other sites

  • 0

Anchor styling requires a certain order

That completely fixed the problem.

Sulphy: I'd have loved to make the buttons with images only from the beginning, but they needed to be CSS rollovers. And if it were completely up to me, I'd have made the whole menu in Flash, but it isn't possible.

Anyway, much thanks to you both for your time, help and knowledge. (Y)

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.