button (rollover) works with IE and Firefox but not Opera

roofrabbit · Joined: 12 Jan 2005 Posts: 33 Location: Vienna, Virginia

I'm not sure this is a CSS problem or an HTML problem. I have revealed these problems after Corey Bryant graciously helped me out with others spotted by W3C validator. I was hoping to stumble upon a solution by using the validator.

Overall, the problem is that I have buttons (rollovers) on a web page that work OK with Firefox and IE but not with Opera. The buttons do not appear in Opera, so they can't be used. I have spent hours trying to fix them, and I believe the problem has to do with the ID= designation. This is what the validator has said are the remaining problems. Somehow I need to change the ID designator, but if I use it only once the buttons disappear from IE and Firefox (as expected).

In head of html, there is:

<LINK REL="STYLESHEET" HREF="mystyles.css" TYPE="text/css">

On the web page, there are 14 buttons, each causing a popup with an mp3 file which ought to play music. Each button is in a table. There are two buttons on each table row.

The web page is located at http://www.capitalwinds.org/music.html

In body of the page, there is a lot of code, but here is the HTML code for one row of the table that contains the buttons:

<tr>
<td> </td>
<td ALIGN=right>&#8220A Christmas Entrada&#8221 by Alfred Reed
</td>
<td ALIGN=right><a class="button" id="b1" href="popup1.html" onClick="return popup(this, 'music1')">link to music</a></td>
<td> </td>
<td ALIGN=left><a class="button" id="b1" href="popup2.html" onClick="return popup(this, 'music2')">link to music</a></td><td ALIGN=left>&#8220A Christmas Intrada&#8221 excerpt -- 890 KB
</td>
</tr>

All the other buttons have exactly the same html code except the 'music#" has a different number (#) and the "popup#.html" has a different number for each button.
=======================
In a separate file in the same server directory, mystyles.css, the relevant css code is:

.button {
display: block;

padding-top: 33px;
height: 0px !important;
height /**/: 33px;
overflow: hidden;
background-position: 0px 0px;
}
.button:hover {
background-position: 0px -33px;
}
.button:active {
background-position: 0px -66px;
}
.button#b1 {
background-image: url(http://www.capitalwinds.org/transbutton3.gif) ;
width: 32px;
}
================================
For completeness, here is one of the popup files: popup3.html :

<html>
<head>
<SCRIPT TYPE="text/javascript">

</SCRIPT>
</head>
<body BACKGROUND="All%20buttons/hex0.jpg">
<center>
<EMBED SRC="http://www.capitalwinds.org/Music/variation1_192.mp3"
HEIGHT=140 WIDTH=320>

<NOEMBED>
"Fantasy Variations" excerpt #1:
<a href="http://www.capitalwinds.org/Music/variation1_192.mp3"</a>
</NOEMBED>
<br>
<a href="javascript:window.close()">Click here to close the window.</a>
</center>
</body>
</html>
======================

What I have done to try to correct the problem:

I read in the "html code tutorial " web page that id=".." can be used only once per page. Therefore, in the CSS file I duplicated the section defined by .button#b1{ xxx } so that there were 14 entries, one per button, and renumber b1 so that there were .button#b1, .button#b2, button#b3, etc., until finally .button#b14. Correspondingly I changed the html code for the buttons so that id="b1" became id="b#" where # stands for 2, 3, 4, etc. up to 14. This way only one id="b#" exists in the page. No luck. Still Opera showns no buttons, IE and Firefox do.

I am now at a loss to know what to do.

======================

BTW, I am not an expert in coding HTML and CSS. I learned almost all that I know from the html code tutorial last year, and I did so because I volunteered to make a web page for a non-profit organization. In addition, I do all the design and the art for the entire site, and I am struggling to resolve this web problem.

Thank you for past help and any that you might be able to give to me now.