I have tried to use CSS based rollovers for my site in the footer section at the bottom of the page.
However only the image part behind the text gets shown in Opera 7.51 and Mozilla 1.6.
It works prefectly with IE6 displaying the whole image. Opera 7.51 gives mixed results. Any workarounds?
Here's the code:
<style type="text/css">
<!--
#footer {text-align:center;color:white;background-color:inherit}
#footer a{
color:#333;
width:130px;
height:20px;
background-color:inherit;
background-image:url('../images/off.png');
background-repeat:no-repeat;
text-align:center;
padding-top:2px;
display:inline;
text-decoration:none; font-style:normal; font-variant:normal; font-weight:bold;
font-size:1em; font-family:verdana, sans-serif}
#footer a:hover{
font-weight : bold;
font-family: verdana,sans-serif;
color:black;text-decoration:none;
background-color:inherit;
background-image:url('../images/on.png');
background-repeat: no-repeat}
--></style>
</head><body>
<h1>Footer</h1>
<div id="footer">
<a tabindex="22" title="Go up" href=http://www.webdeveloper.com/forum/archive/index.php/"#top" accesskey="u">Up</a>|
<a tabindex="23" title="Previous page" accesskey="b" href=http://www.webdeveloper.com/forum/archive/index.php/"aaa.html">Previous</a>|
<a tabindex="24" title="Go home" href=http://www.webdeveloper.com/forum/archive/index.php/"../" accesskey="j">Home</a>|
<a tabindex="25" title="Next Page" accesskey="n" href=http://www.webdeveloper.com/forum/archive/index.php/"aaa.html">Next</a>
<hr />
</div>Here are the imagesimage2:
However only the image part behind the text gets shown in Opera 7.51 and Mozilla 1.6.
It works prefectly with IE6 displaying the whole image. Opera 7.51 gives mixed results. Any workarounds?
Here's the code:
<style type="text/css">
<!--
#footer {text-align:center;color:white;background-color:inherit}
#footer a{
color:#333;
width:130px;
height:20px;
background-color:inherit;
background-image:url('../images/off.png');
background-repeat:no-repeat;
text-align:center;
padding-top:2px;
display:inline;
text-decoration:none; font-style:normal; font-variant:normal; font-weight:bold;
font-size:1em; font-family:verdana, sans-serif}
#footer a:hover{
font-weight : bold;
font-family: verdana,sans-serif;
color:black;text-decoration:none;
background-color:inherit;
background-image:url('../images/on.png');
background-repeat: no-repeat}
--></style>
</head><body>
<h1>Footer</h1>
<div id="footer">
<a tabindex="22" title="Go up" href=http://www.webdeveloper.com/forum/archive/index.php/"#top" accesskey="u">Up</a>|
<a tabindex="23" title="Previous page" accesskey="b" href=http://www.webdeveloper.com/forum/archive/index.php/"aaa.html">Previous</a>|
<a tabindex="24" title="Go home" href=http://www.webdeveloper.com/forum/archive/index.php/"../" accesskey="j">Home</a>|
<a tabindex="25" title="Next Page" accesskey="n" href=http://www.webdeveloper.com/forum/archive/index.php/"aaa.html">Next</a>
<hr />
</div>Here are the imagesimage2: