list rollovers not working

sam77 / 2010-02-24 22:05:16   

Encountering a problem with hover on menu in safari. Hover state just started not working over the list items in safari. The rollovers work fine in firefox, but for some reason they don't come on consistently in safari. I've tested it on two different computers, cleared cookies and cache and I'm getting the same result. Have been messing with my css code thinking there might be some conflicts, but nothing I've done really has had any effect.

I don't know if this is related, but quite sometime ago the backend programs drag and drop exhibit organization tool stopped functioning. As a result I've had to go into mysql and type in the ord info manually. Not sure if this system glitch would have an effect on the menu hover state info.

oh my site is www.bigday.la

Vaska A / 2010-02-24 22:08:27   

Validate your page...the second error says it all...

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bigday.la%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1

sam77 / 2010-02-24 23:39:42   

I'm sorry Vaska, I still don't understand, I'm trying to get the logo to change on mouseover, but it doesn't change using any other approach I've tried. Is the problem that I'm trying to do this from within the backend server html dialog? I wasn't sure how I'd embed a rollover logo link in the site other than doing it this way.

I'm amazed its this difficult to just have a logo switch out on mouse over, I mistakenly thought it was gonna be pretty straight forward.

Any suggestions would be appreciated.

sam77 / 2010-02-25 04:45:11   

Not sure how the code for the logo would effect the code for the exhibits, would someone know how these effect one another?

sam77 / 2010-02-25 04:45:11   

Not sure how the code for the logo would effect the code for the exhibits, would someone know how these effect one another?

arsondpi / 2010-02-25 07:10:12   

Well it does - double quotes and single quotes matter...
And most importantly I'm not sure of what oversrc is doing in your code - haven't seen this before...

Anyhow what you are trying to do can be easily achived with css.
Do a web search using keywords css rollover image
It's easier and less of a hassle in my opinion.

tabarez / 2010-02-25 11:54:39   

hello i have a similar problem with safari and rollover
in my page http://www.amaruyama.com/en/index.php?/print/work-1/

i have a rollover below the thumbnails, and it works fine in firefox but safari doesn't show it.
any idea?

Vaska A / 2010-02-25 12:05:04   

Sometimes getting this kind of thing is a bit of work. Obviously, while it might work in one browser another will not.

It's possible you have a conflict...you have this in the style.css file:

  1. #img-container a.thickbox:hover { border-bottom: 3px #BFBFBF solid; 
  2. border-top: 0px #000 solid; border-left: 0px #000 solid; 
  3. border-right: 0px #000 solid; }

And then you have this inline directly on the page:

  1. a.thickbox { border: none; }
  2. a.thickbox img { border: 3px solid #fff; margin: 0 6px 9px 0; 
  3. #position: absolute; _top: 50%; display: table-cell; 
  4. vertical-align: top; text-align: left; }

I realize one has a hover and the other doesn't, but it could still be causing problems. Take the rule from the css file and simply add it to the CSS output from the exhibit (make it the last rule). See what happens then.

I've had a few of these situations over the years. What I found is that you have to get more and more specific until you find exactly what it needs.

puppiepoppy / 2010-02-25 13:12:55   

I have pasted this into my Pre-Nav Text in my Setting....maybe you should try this.

  1. <a href="http://www.michaelwongcc.com" onmouseover="handleOver();return true;" onmouseout="handleOut();return true;"><img name=imgName alt="michaelwong website" src="http://www.michaelwongcc.com/files/gimgs/mainlogo1.gif"></a>

In my index.php, I've put in the script within the Head.

  1. <script language="JavaScript">
  2. <!--
  3. // PRELOADING IMAGES
  4. if (document.images) {
  5.  img_on =new Image();  img_on.src ="http://www.michaelwongcc.com/files/gimgs/mainlogo2.gif"; 
  6.  img_off=new Image();  img_off.src="http://www.michaelwongcc.com/files/gimgs/mainlogo1.gif"; 
  7. }

function handleOver() {
if (document.images) document.imgName.src=img_on.src;
}

function handleOut() {
if (document.images) document.imgName.src=img_off.src;
}

//-->

Vaska A / 2010-02-25 13:15:52   

It doesn't apply...he's using a CSS hover.

tabarez / 2010-02-25 14:45:23   

thank you very much for the answer Vaska!
actually I did what you said, but still it wont show it.
so i deleted the css from the exhibition file and it kept doing fine with firefox.

than i found out something interesting: adding some lateral space to the rollover effect i noticed safari actually show it, the problem is that is doing it behind the thumbnail!

however i'm still trying to move down the underline effect whit some css attribute...

tabarez / 2010-02-25 18:38:00   

spent such a long time trying to solve this little detail...
anyone have an idea about how to fix it?

i've been trying every css attribute but that border with safari doesn't want to move down!

again the link

jesper / 2010-02-25 18:49:15   

Hello.

You want the grey border to move down on hover, yes?

Try to add padding in the bottom here

#img-container a.thickbox:hover

Regards,

Jesper

tabarez / 2010-02-25 19:28:38   

solved it!!

  1. that is what i had:
  2. #img-container a.thickbox:hover
  1. and this is what is working now:
  2. #img-container a.thickbox:hover img

must admit i'm quite satisfied now but a day is gone

thank you Vaska, thank you puppiepoppy and thank you Jesper
hope this can help someone...

sam77 / 2010-02-26 00:46:12   

the whole oversrc thing is based on this javascript i found online

http://jehiah.cz/archive/simple-swap

I have this basic structure pasted in my prenav text field

  1. <a href="url"><img src="logo.gif" oversrc="logohover.gif" onmouseover="javascript:SimpleSwap(this,'oversrc');" onmouseout="javascript:SimpleSwap(this,'src');"></a>

and then have the javascript in my js folder.

  1. function SimpleSwap(el,which){
  2.   el.src=el.getAttribute(which || "origsrc");
  3. }

function SimpleSwapSetup(){
var x = document.getElementsByTagName("img");
for (var i=0;i

sam77 / 2010-02-26 00:51:22   

!!!! I just wrote a novel and none of its here!!!

ok so used that javascript.

and tried the css approach from this site

http://www.tutorio.com/tutorial/pure-css-image-rollovers

and it just comes back blank, and then causes all these other problems in the site.

I basically just want the logo to change on hover state, I'm not sure if I supposed to use the pre-nav text field or ignore it or what. But by using it so far its caused other glitches, so I'm trying to understand why the other glitches are occurring.

sam77 / 2010-02-27 23:00:41   

K got rid of all the validation errors, and going to find another way to handle the logo rollover, but the list block rollover is still not working consistently in safari, does anyone have an idea why this would be working inconsistently?

www.bigday.la

This thread has been closed, thank you.