2 Issues - One small (IE/FF) and one impossible?

[TalkieT]

Well, I have spent a good couple of hours on this, mucking with Firebug and multiple browsers etc, but I can't QUITE get the last element of my page consistent across FF and IE... Yep, it's to do with transparency, but I may have transcended that and broken something else instead since I have transparent PNGs working elsewhere on the page...

Anyway...

http://www.nzsnaps.com

I'm generally REALLY happy with how I have it looking, but the bottom of the all encompassing grey box (#303030) is rounded on Firefox, but square on IE.

The roundedness SHOULD come from a 750*62 png with rounded bottom corners that is a background for the popular photos... That works in FF

But in IE, the grey background is being picked up from .box and I can't figure out why the difference between FF and IE... I'd be very grateful for any pointers as to what I have screwed up this time :-)

(edit: Oh, the .box background IS being picked up by FF, but the png is overlaying it)


The second (impossible) question related to the speed of image cycle for the slideshow... I have done some searching and while I have a crossfade parameter - it would appear there's no way to set a delay between images! Is this really true? If so, is the feature request already logged to add this as a parameter?

Cheers - Neil G
www.nzsnaps.com
http://talkiet.smugmug.com

[jfriend]

I would suggest trying a couple things in this CSS:

1) Put the _background:none back (it is supposed to be there for the IE _filter rule to work right)
2) Add a space after the close paren in the background rule
3) Set the background color to black so the tranparency in the background will show black in the corners

#popularPhotos {
background: transparent url(http://talkiet.smugmug.com/photos/493269863_vbiQr-O.png) no-repeat center bottom;
_background: none;
_filter:progidXImageTransform.Microsoft.AlphaImage Loader(enabled=true,sizingmethod=image,src='http://talkiet.smugmug.com/photos/493269863_vbiQr-O.png');
position: relative;
margin: 0px auto;
top: 0px;
width: 728px;
height: 52px;
padding: 0px 11px 10px;
background-color: #000000 !important;
}

With these changes made in the IE developer's toolbar, I can get the rounded border to show up.

If this doesn't work, I notice that your background image is 62 pixels high, but the popular photos div is 52 pixels high. That could also be an issue on IE.

[TalkieT]

I would suggest trying a couple things in this CSS: [snip]

This worked perfectly thanks - I'll dissect it later tonight to figure out precisely which bits I had wrong

I'm more interested in the "IE developers toolbar" you speak of... Is it similar to Firebug for Firefox? Got a link? It would be hugely helpful to have a tool like that in IE for tracking down these issues.

Cheers - N

[jfriend]

This worked perfectly thanks - I'll dissect it later tonight to figure out precisely which bits I had wrong

I'm more interested in the "IE developers toolbar" you speak of... Is it similar to Firebug for Firefox? Got a link? It would be hugely helpful to have a tool like that in IE for tracking down these issues.

Cheers - N I think it was because the background color wasn't black.

The IE Developer's Toolbar is very primitive compared to Firebug, but it's better than nothing. You can see the object hierarchy, click on an object and see it's CSS parameters and/or change them. You can get it from Microsoft here (http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en).