Strange glitch with CSS and Uploadify's hideButton

1
votes

I'm trying to change the way an Uploadify button looks using the solutions posted here. Instead of changing the Flash file, I want to do it with CSS.

What this involves is wrapping the file input and flash object in a div:

<div class="uploadWrapper">
   // File upload
   // Flash object
</div>

And using the following Uploadify settings:

...
wmode      : 'transparent',
hideButton : true,
...

And using the following CSS:

.uploadWrapper {
   background: url(../path/to/new/image.png) 0 0 no-repeat;
}

But the output is this:

enter image description here

It shows a bizarre blue rectangle over the top of my background-image. Does anyone know why this is appearing? I've tried fiddling with the CSS properties of the object (visibility and hidden) - both hide the entire swf object (and so the blue rectangle), which is useless since it needs to be visible for users to click on.

Click here for a jsFiddle.

1
cssflashuploadify
I'm struggling with the same issue and have been following the same thread. The first solution works for me except that the text doesn't appear over my button. I'm still trying to get it right. – Hawkee

1 Answers

0
votes

I posted my solution on the question you initially provided:

Uploadify button: Style with CSS?

It should work for your problem.