Slideshow in DIV background (could I do this better?)

J

jmroberts70

2[H]4U
Joined
Oct 15, 2002
Messages
2,953
URL:
http://www.bedofnails.tv/synopsis.htm

I pulled this off by creating 6 PNG images with an alpha transparency so it would not show through the rounded corners. I am using two different javascript routines to render this page: CurvyCorners for the rounded corners in both IE and the rest of the world, and fadeSlideShow for the rotating background images in the DIV box I've created. My problem is that I'm just not too sure I did the best thing here. First of all, each PNG file is relatively large (around 300K each) and it doesn't quite work that well in IE (actually it's not quite working at all in IE right now). I'd rather use JPG images for the background but integrating the slideshow javascript breaks the rounded corner envelope and the background images start showing their corners... Do any of you have a better way of doing this page (without using Flash) that would have the same resulting rounded corners in IE but still give me a slideshow in the background?
 
Seems like you could use gifs for the rounded corners since they aren't very smooth on the inside, and the outside background never changes so you could fake the alpha there. Then it should theoretically work cross browser.

Maybe you tried that though, just a suggestion *shrug*
 
I actually tried GIF's but the image quality didn't look that good compared to PNG's. Thanks for the idea though...
 
Wait, you used a <div> for every column for the rounded corners? I don't see any image associated to the rounded corners.
 
No, it's a single div for the box. There are no "column" per se. I'm using a javascript routine to round the corners of one DIV that has a white border.
 
For reference, here's a test page I did for the same information:

http://www.bedofnails.tv/test/synopsis3.htm

You can see the rounded corners don't mask the corners of the slideshow images. This is what inspired me to add a transparency element to the images in the slideshow but now I'm thinking I may need to blend the image in the background to the corners of each image so it looks like it isn't there... Kind of a hack!

...Still, even this page doesn't work in IE!! Bummer.
 
The corners aren't rounded in Opera either. The white borders are squared but the slideshow images are rounded, you can see the gaps.

A good rule of thumb is, if it's broken in Opera then your code is broken. This has proven true to me 99.9% of the time in dozens of cases.
 
Well personally I'm not worried about Opera. I've tested the rounded corners in IE, Safari, Chrome and FF. If Opera is my only browser that doesn't accept it, I'm ok with that. Frankly, I think I may need to re-do the rounded corners a completely different way now but the vast majority of techniques may not work well with a slideshow inside of it...
 
Opera is one of the strictest browsers available but also one of the best (if not the best) browsers to do compliance tests on.

The contents of the div is irrelevant. If you have a div called "white-box" and it's rounded, the div doesn't care if a slideshow is inside of it. A slideshow is nothing but a series of <li> elements being shown on a timer. It's no different than there being text inside from the div's point of view.

Also IE6 fails with PNG transparency so that is never going to work unless you apply a certain hack for that.
 
That may very well be true but compliance is not as important to me as cross-browser compatibility. If compliance was my concern, I would be using CSS3 corner-rounding code and been done with it by now but it would still not render correctly in IE (unfortunately the most popular browser right now).
 
Compliance is heavily intertwined with cross-browser compatibility. Buggy/wrong/unsupported code is what causes most browser inconsistency. The version of css does not matter.

It's very normal to just code it right and it'll work in Opera, FF, Chrome, Safari, IE6+ right off the bat. It will be 100% pixel perfect across all those browsers.

There are a few minor exceptions where you'll need to write hacks for IE and FF but it's usually related to spacing or how the browser treats a base element when it has a semi-non-standard attribute applied to it.
 
Well for rounded corners, the version of CSS matters quite a bit. CSS3 implemented the ability to round corners and IE has not adopted CSS3 standards. So if I'm going to do this, I have to find a work-around. So far, non-CSS3 corner rounding involves using an image to match a border at the corners. This becomes a problem if I'm going to then lay a slideshow inside since the actual box does not have rounded corners. Still, maybe I'll just include the corner graphic elements in each image so it will "appear" as if it's inside of the box with rounded corners...
 
In your case with rounded corners yes, you can't just use border-radius and be done with it. I remember linking you to a page on how to do flawless corner rounding (in all browsers) about a month ago when you initially posted a thread on how to make your site. What happened?

Most of the examples posted on that page did not require css3 nor did they involve javascript. It was just a mix of compliant css2 code that's consistent across all browsers and a few small images for the corners.
 
Actually, the final solution that DID work involved using CurvyCorners javascript with CSS2 code. That got a good cross-browser result.

Here's the old page code:
http://www.bedofnails.tv/test/synopsis.htm

I've got some ideas for how I can pull off this same result without using javascript but it's going to take a couple of days to get it working (if it works at all)...

I'm also looking into possibly using the same technique as this guy:
http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
 
When I inspect the corner element with Firebug I see this. Each of the divs that are deepest nested here represent one column of the highlighted area on the web page.

 
Yeah, I think that's the result of the javascript CurvyCorners. I think I'm going to round those corners a different way now. I'm not liking this result!
 
UPDATE:
Well I got it to work over all major browsers now. ...But frankly I look at it as a cheat! Here's the final page:

http://www.bedofnails.tv/synopsis.htm

I got rid of the CurvyCorners javascript and instead incorporated the border and the rounded edges into the images of the slideshow (along with some of the background image at each corner). This eliminated much of the fancy code work I originally had there to have the same effect. Also, By not needing to use transparency effects, I was able to use JPG images in the slideshow as opposed to PNG which reduced the file size tenfold! Now the entire slideshow the size of what just one image was before!

Let me know what you guys think...
 
Looks great ... works great. Nice job.

Not sure if you know or may need this at all..but use jQuery supersleight to achieve IE PNG transparency. With this you can specify individual IDs that the IE AlphaTransparency hack is to be applied
 
Thanks everyone! This has been an interesting and enlightening journey moving from straight HTML to CSS because of a single website project. I couldn't have done it without this place!
 
You must log in or register to reply here.
Back
Top