browser compatibility - floating boxes

BethInBC · #1 (**permalink**) 04-18-2006, 06:53 PM

Hi there everyone:

I am having a problem with floating boxes (GoLive) in Safari and Firefox and I was wondering if anyone has a solution, since I don't know much about solving this type of problem.

the problems are on the home page here:
www.humannavigator.com

As you mouse over the 4 points on the compass the descriptive text is supposed to pop up in the empty spot in the middle, but in Safari and Firefox this text is way offset underneath the compass...

the validation tests cleaned up the code a bit but there are still 2 errors with the csobjects code but that's getting over my head and I don't know if that would affect anything.

It would be nice to make this work but I may have to resort to something simpler. Another option is to not even have that intro page but based on initial reviews everybody likes the idea.

Any help would be much appreciated.
Beth

sands · #2 (**permalink**) 04-18-2006, 09:35 PM

You could try out a script of mine that is perfectly compatible with all major browsers. I am not sure about Safari though. Check it out at:
http://www.sivamdesign.com/scripts/dwld/lks_desc.html
In the script you are using now the descriptive text does not appear in the same area as it should. In the script above the text appears in exactly the same place.

BethInBC · #3 (**permalink**) 04-19-2006, 03:05 PM

Thank you for your reply Sands. I see how your script works but I can't figure out how to make it work in this application. The problem is I have overlapping images - the large, main image which has holes in it for the 4 compass points with text and for the 4 descriptive text areas at the centre of the main image. If it is indeed possible to use your script with these nested images, I don't know how to do it because I don't have enough scritping knowledge.

I looked into using a sliced photoshop image with your script instead but apparently I can't edit the table attributes in GoLive after it's created.

Maybe this can be done simpler with an image map?
Any further suggestions?
Beth

sands · #4 (**permalink**) 04-20-2006, 04:03 AM

Quote:

Originally Posted by BethInBC

I looked into using a sliced photoshop image with your script instead but apparently I can't edit the table attributes in GoLive after it's created.

Maybe this can be done simpler with an image map?
Any further suggestions?
Beth

Check out the link below:
http://www.sivamdesign.com/garvey/index.html
The version you see there is compatible with all new browsers. IE, FF, NS and Opera. The only thing is that instead of images the rollover messages are text which makes the page load faster. Also the code is neater and file size smaller.

Lastly, it is better if you add the following META tag to the page to prevent the IE image toolbar from appearing when you hover the mouse over the page.
<meta http-equiv="imagetoolbar" content="no" />

BethInBC · #5 (**permalink**) 04-20-2006, 12:25 PM

Wow Sands, that's awesome!! It works beautifully now!
Safari really seems fussy. I had it working in IE with the .css file in the root instead of the fbox folder but the descriptive text wasn't showing up. So I also put the .css in the fbox folder and now it works in Safari....hmmmm...

Thank you very very much for your time and effort. It is really appreciated. All your other scripts on your website look very useful and I have bookmarked it for future reference!

Cheers
Beth