Pimp My Site Questions for Andy

[javier.rinaldi]

Hi guys,

my bio-box clickable slide-show (http://rinaldi.smugmug.com) is on the fritz on IE. I dunno if it's the css since I just noticed it today. I'm not the only one either, I saw the same behaviour in http://photoscapedesign.smugmug.com . Is this the so called IE "flash", it certainly wasn't happening a few days ago, I've tried it on several PC's.

Any Ideas?

[Barb]

Originally Posted by javier.rinaldi

Hi guys,

my bio-box clickable slide-show (http://rinaldi.smugmug.com) is on the fritz on IE. I dunno if it's the css since I just noticed it today. I'm not the only one either, I saw the same behaviour in http://photoscapedesign.smugmug.com . Is this the so called IE "flash", it certainly wasn't happening a few days ago, I've tried it on several PC's.

Any Ideas?

Yep, definitely exhibiting some strange behavior in IE on a PC. (I have a PC that I turn on for occasions such as this :) ) This is new. As Jav said, was fine a day or so ago.

[rainforest1155]

Originally Posted by bygates

Yep, definitely exhibiting some strange behavior in IE on a PC. (I have a PC that I turn on for occasions such as this :) ) This is new. As Jav said, was fine a day or so ago.

Eeekk...I see it too. That's some serious flicker you've got there and I've never seen this before even though I use IE all the time. Don't know what's wrong there.

Sebastian

[javier.rinaldi]

Originally Posted by rainforest1155

Eeekk...I see it too. That's some serious flicker you've got there and I've never seen this before even though I use IE all the time. Don't know what's wrong there.

Sebastian

Interestingly enough, Andy's Guestbook (http://www.moonriverphotography.com/gallery/729385) has similar code and works well.

[Mike Lane]

These were posted in a thread that they didn't have anything to do with so I moved them into their own thread.

Andy got this code from stu williams over at http://cssplay.co.uk/. I haven't messed with the code at all so I'll let Andy deal with it.


Andy?

[Andy]

Originally Posted by Mike Lane

so I'll let Andy deal with it.


Andy?

Yer joking, right?
Guys, this stuff was all trial and error for me, too. I couldn't begin to tell you why there's flickering going on... I wish I had a better answer for you, I really do. I'm sorry. Maybe next week when I'm back I can look into it further...

[Mike Lane]

Originally Posted by Andy

Yer joking, right?
Guys, this stuff was all trial and error for me, too. I couldn't begin to tell you why there's flickering going on... I wish I had a better answer for you, I really do. I'm sorry. Maybe next week when I'm back I can look into it further...

Mostly

You can at least provide a linky

[Andy]

Originally Posted by Andy

Yer joking, right?
Guys, this stuff was all trial and error for me, too. I couldn't begin to tell you why there's flickering going on... I wish I had a better answer for you, I really do. I'm sorry. Maybe next week when I'm back I can look into it further...

Yuck. I'll look into it later tonight when I get some more time.

[Andy]

Originally Posted by Mike Lane

Mostly

You can at least provide a linky

Thanks Mike - really appreciate it.

OK what's strange, here in this gallery, no flickerage:
http://williams.smugmug.com/gallery/729385

In this gallery, there's severe flickerage. The main difference between the two is the little thumbs are clickable to external links.
http://williams.smugmug.com/gallery/729350

And for real fun, look at this one:
http://williams.smugmug.com/gallery/729385

[Mike Lane]

Originally Posted by Andy

Thanks Mike - really appreciate it.

Oh relax. Have you a link to where you got the code in the first place?

[Andy]

Originally Posted by Mike Lane

Oh relax. Have you a link to where you got the code in the first place?

d00d I was serious when I said "really appreciate it"
uhm

the code
uhm yep... found it...

http://www.cssplay.co.uk/menu/scroll_gallery.html

Thanks Mike!

[Barb]

Originally Posted by Andy

Yer joking, right?
Guys, this stuff was all trial and error for me, too. I couldn't begin to tell you why there's flickering going on... I wish I had a better answer for you, I really do. I'm sorry. Maybe next week when I'm back I can look into it further...

I have no explanation either, but it was working day before yesterday, if not just yesterday. I usually check my site in IE at work to make sure everything is running okay, and it was either yesterday or the day before when I checked it and it was fine. I have changed nothing in the code for that, so it's a head scratcher for me.

[Mike Lane]

Originally Posted by Andy

d00d I was serious when I said "really appreciate it"

Well why didn't you just say so

[Mike Lane]

I think maybe this is the one that is causing problems? Or at least this one is also causing problems.

http://www.cssplay.co.uk/menu/gallery.html

Lemme see if I can figure it out.

[Andy]

Originally Posted by Mike Lane

Well why didn't you just say so

So, you fix my problem yet?

[javier.rinaldi]

Well,
after looking around, changing stuff, putting it back (I have some leftover screws, I hope I don't need 'em) I narrowed it down to something Andy mentioned, links. I went to the CSSplay site http://www.cssplay.co.uk/menu/gallery.html and discovered that it worked fine and that it had no links to the images.
I played with my css, nothing, I removed the contents of <href=""> and it works fine, weird.
Something changed in the past days that affected this, but for the time being I'd rather have it functional than have the links

[Mike Lane]

There are HTML errors on all the pages posted above that have problems. I'm not sure they are related to the problems but I'm investigating. Andy one of your links on this page has an extra " and Barb and Javier your pages are riddled with improperly nested elements and unclosed tags. While I'm researching you guys should fix those up.

[Mike Lane]

We know that smugmug recently fixed IE's image flicker problem. Presumably that would change the way that IE handles linked images in general or maybe linked smugmug images. I don't know the specifics of what they did or if it would affect this particular bit of customization or not.. It seems pretty clear that if there is a URL associated with the links that you get an extreme version of flicker in IE for this particular application. I wonder if JT could weigh in on this?

[bigwebguy]

Originally Posted by Mike Lane

We know that smugmug recently fixed IE's image flicker problem. Presumably that would change the way that IE handles linked images in general or maybe linked smugmug images. I don't know the specifics of what they did or if it would affect this particular bit of customization or not.. It seems pretty clear that if there is a URL associated with the links that you get an extreme version of flicker in IE for this particular application. I wonder if JT could weigh in on this?

i dont even need to see this to know what the problem (and solution is), the same thing was happening to my slideshow buttons after the latest batch of changes.

you have an image inside an href that's floated right?

you need to specify height & width for the image in css.

so like

a img {height: 20px; width: 20px;}

or something similar to that.

the offending code that was added in the smugmugBlack.css file is a:hover {width: auto;} in case anyone is interested....i ran this up to JT the other day actually and he said that's what he had to do to fix the IE flicker.

[javier.rinaldi]

Originally Posted by bigwebguy

i dont even need to see this to know what the problem (and solution is), the same thing was happening to my slideshow buttons after the latest batch of changes.

you have an image inside an href that's floated right?

you need to specify height & width for the image in css.

so like

a img {height: 20px; width: 20px;}

or something similar to that.

the offending code that was added in the smugmugBlack.css file is a:hover {width: auto;} in case anyone is interested....i ran this up to JT the other day actually and he said that's what he had to do to fix the IE flicker.

Thanx bigwebguy, this helped out a lot. I inserted the above code into the css play code for the gallery
And thanx Mike for pointing out my element and tag troubles, I did my best to clean it up.

a.gallery:hover {width:75px; height:47px; white-space:normal; border:1px solid #fff;}
a.gallery:hover img {border:1px solid #000; position:relative; z-index:100;}
a.gallery:hover span {display:block; position:absolute; width:400px; height:266px; top:120px; left:5px; padding:5px; font-style:italic; color:#696969; background:#696969 url(); z-index:100;}
a.gallery:active img {width:75px; height:47px; border:1px solid #000; position:relative; z-index:50;} 
a.gallery:focus img {width:75px; height:47px; border:1px solid #000; position:relative; z-index:50;}
a.gallery:active {border:0px solid #eee;}
a.gallery:active span {display:block; position:absolute; width:400px; height:266px; top:120px; left:5px; padding:5px; font-style:italic; color:#696969; background:#efedec url(); z-index:50;} 
a.gallery:focus span {display:block; position:absolute; width:400px; height:266px; top:120px; left:5px; padding:5px; font-style:italic; color:#696969; background:#efedec url(); z-index:50;}