My page looks terrible in IE... any ideas?

[jwtseng]

I used hoverbox and lytebox to slap this page together for my kid. It looks great in Safari on Mac and FireFox PC for the most part. But on IE6 (and probably IE7) it looks really bad. I think there is a problem with the lytebox part of it. The windows get shifted around and some of the navigation bits don't display (like the Close button). Any ideas?

http://music.katiekate.com
http://dirtdoog.dyndns.org/songpage/index.html

I have a feeling there is some conflict or compatibility issue with the CSS. But I basically know nothing about CSS, so I guess that's a large part of the problem.

 

[angelwatt]

Here's one discussion on lytebox with a person having the same problem it seems, though can't say they found a solution.


And at this page in the comments someone mentions your problem. They don't seem to test IE6 very well, but seems IE7 works OK.

I don't think your CSS is to blame. I've been developing a similar script to lytebox so know how hard it is to get this stuff working in all browsers.

 

[jwtseng]

angelwatt...

Thanks so much for pointing me to those message threads. At least I know that I'm not alone (and it's not something that I fouled up on!). I guess IE users will miss out

Interestingly, I had to add the flashvars "wmode: opaque" to get the flash animations to show up in FireFox on the PC as well. Otherwise, it would just be a blank white frame with the lytebox interface. Strange.

 

[Mitou]

jwtseng,
I visited your site and was really impressed with what you did in iweb. It looks great of course it helps to have such a great looking model. She is adorable.
Could you please tell me how you incorporated the page curl corner in one of your pages. I have been looking for that and could not find it.
Thanks

 

[jwtseng]

Could you please tell me how you incorporated the page curl corner in one of your pages. I have been looking for that and could not find it.
Thanks

I don't remember where I first saw this effect, but basically I lifted it off a webpage that I saw it on. I'm really a newbie when it comes to this kind of stuff, so if I was able to do it, you should have no trouble.

Do a google search on "peel.js" and you should find lots of examples. Here also is a page translated from German with a configurable version...

PageEar

Basically the process involves downloading one .js file and two .swf files and then throwing in two images that you make (one for the small corner and one for the big corner). Upload the whole package to your server and then reference the .js file with a line of javascript in your webpage.

Just found this webpage with better directions...
Peeling corner

As with my original problem, this peeling effect isn't perfect with IE either... at least not on my page.

PS. Thanks for the kind words about my little site!