Sat, 2004-01-17 15:38
Hi. I've been doing a redesign on http://www.psipay.com , which is full of mouseover images and nested tables. I've removed all the tables, and I've got some nice CSS code to replace the navigation buttons and make everything much cleaner and faster.
I initially created the top and left navigation as separate pages, and they both worked perfectly in IE 6, Opera 7, NS 7, Mozilla and Firebird. But now that I've put a full test page together using those files as includes, it's only working in IE.
The current version of the page is at http://www.raisemyrank.com/psi/test.htm . Something in there is keeping this from displaying properly in non-IE browsers, but I don't know what.
Thanks.
Sun, 2004-01-18 00:49
#1
Compatibility lost
Forget all the visibility stuff - all you need is something like this
.nav a:link, .nav a:visited
{
width: 143px;
height: 20px;
display: block;
text-decoration: none;
}
.nav a:hover, .nav a:active
{
width: 143px;
height: 20px;
display: block;
text-decoration: none;
background-image: url("images/btn-back2.gif")
}
and then around your link
<span class="nav"><a href="#">Home</a></span>
but there are many other ways to do menus - check this site as well http://css.maxdesign.com.au/index.htm
The point is, in my code I do not specify a background at all for the link or after visited, so the underlying background will come through. It is only on hover or active I want to chow the new background, and I do not have to hide anything.
Regards
Day
Sun, 2004-01-18 03:40
#2
Compatibility lost
Thanks, but it doesn't look like that's going to work. I tried out what you suggested, making a few small modifications like adding the background image to link and visited, and it looks better in Firebird, but it doesn't work well in IE -- the background doesn't load quickly enough, and because it's in the CSS it doesn't cache, so every time you mouse over a link you get a flash of the background (the blue stripe) before the link's background kicks in.
And it's essential that this look good in IE, even if it can't work well in other browsers, because the client's audience is nearly 100% IE.
Sun, 2004-01-18 06:34
#3
Compatibility lost
oops sorry you are correct.
You can either add this into header
<script type="text/javascript" language="javascript">
<!--
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("images/buttonhover.gif","images/buttonnormal.gif","images/buttonactive.gif","");
//--></script>
with the name of your image of course or more than one.
and then in the body tag
<body onload="preloadimages()">
or just add this at the end of the doc inside the body tag.
<img border="0" src="images/buttonhover.gif" width="1px" height="1px" alt="" name="bh" id="bh" style="position: absolute; bottom: 0px; margin-left: -20px" />
Regards
Day