3 replies [Last post]
qwerty
Offline
newbie
Somerville, MA
Last seen: 15 years 38 weeks ago
Somerville, MA
Timezone: GMT-5
Joined: 2003-10-29
Posts: 5
Points: 0

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.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 35 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

The only way to learn is to do it yourself

qwerty
Offline
newbie
Somerville, MA
Last seen: 15 years 38 weeks ago
Somerville, MA
Timezone: GMT-5
Joined: 2003-10-29
Posts: 5
Points: 0

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.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 15 years 35 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

The only way to learn is to do it yourself