PNG Transparency Help In IE

[PrimeTime]

Hey Everyone,

First time posting here, but I've read some threads on this topic through the search option so hopefully my question isn't a totally n00bish one. I can't get my headers and footers and main page wrappers for my webpage to be transparent in IE. They are supposed to look like torn paper so you can see the background through the jagged edges, but I can't get IE to work with my png files. I use PS elements 2 and I used save for web and picked png-24 and had the transparent button clicked. It looks fine in firefox, but I can't get the filter thing to work right for IE. Here is the code I have for my header. Once I get this working I figure I can get it to work for the rest of my site.

Here's my header code:

#header_wrapper {
position: top center;
padding-top: 48px;
border: none;
margin-bottom: 0px;
background:url(http://primetime.smugmug.com/photos/64843349-O.png) top no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='http://primetime.smugmug.com/photos/64843349-O.png');
}


So that works fine in Firefox, but in IE the background is gray and looks really ugly. You can check out my main page http://primetime.smugmug.com in IE to see it in all it's glory. Any help on how I can fix this would be greatly appreciated. I'm kind of stumped at this point. Oh and I don't have a smiley face in my code, the forums did that, it's supposed to be : D without the space.

Thanks,

Craig

[Andy]

Hi Primetime :wave

Standby, don't customize I'm working on it for you :D

[Mike Lane]

I bet you just need to add

_background:transparent;

[Andy]

I bet you just need to add

_background:transparent;
Yeah.
I try that, and the image disappears in IE6 :dunno

[Mike Lane]

I'll look into it when I get back home to an unblocked computer.

[Andy]

Craig,

I've tried all the standard tricks, even got some help from Ivar. Can't make it work!

Let's see what Mike Lane or Lee say later, tonight.

We'll get it fixed, for sure :thumb

[Mike Lane]

Why do you have the red?


#header_wrapper {
position: top center;
padding-top: 48px;
border: none;
margin-bottom: 0px;
background:url(http://primetime.smugmug.com/photos/64843349-O.png) top no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='http://primetime.smugmug.com/photos/64843349-O.png');
}

It's not valid CSS.

[PrimeTime]

Thanks a lot guys. I really appreciate the help.

-Craig

[PrimeTime]

Why do you have the red?


#header_wrapper {
position: top center;
padding-top: 48px;
border: none;
margin-bottom: 0px;
background:url(http://primetime.smugmug.com/photos/64843349-O.png) top no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='http://primetime.smugmug.com/photos/64843349-O.png');
}

It's not valid CSS.

It used to be
background-position: top center;
but I was messing around and tried changing it to that to get it to work. Should I change it back or do I even need the line at all?

-Craig

[Mike Lane]

It used to be
background-position: top center;
but I was messing around and tried changing it to that to get it to work. Should I change it back or do I even need the line at all?

-Craig

You don't need it at all... "top center" is not a valid value for the position attribute. And you've taken care of the background-position attribute in your by specifying top in your background attribute (which is equivalent to saying background-position:top center;).

[ivar]

It used to be
background-position: top center;
but I was messing around and tried changing it to that to get it to work. Should I change it back or do I even need the line at all?

-CraigTry adding a size and width like this

#header_wrapper {
position: top center;
padding-top: 48px;
width: 763px;
height: 82px;
border: none;
margin-bottom: 0px;
background:url(http://primetime.smugmug.com/photos/64843349-O.png) top no-repeat;
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='http://primetime.smugmug.com/photos/64843349-O.png');
}

EDIT, and add the background none

[PrimeTime]

Try adding a size and width like this

#header_wrapper {
position: top center;
padding-top: 48px;
width: 763px;
height: 82px;
border: none;
margin-bottom: 0px;
background:url(http://primetime.smugmug.com/photos/64843349-O.png) top no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='http://primetime.smugmug.com/photos/64843349-O.png');
}

I just tried that and it made my header move to the left side of the screen. Which I could fix but it still wasn't transparent in IE. So I removed it. Thanks for the suggestion though. Got anymore?

-Craig

[ivar]

I just tried that and it made my header move to the left side of the screen. Which I could fix but it still wasn't transparent in IE. So I removed it. Thanks for the suggestion though. Got anymore?

-Craig

did you see my edit from the previous post?

if you want to center it, just add margin: 0px auto;

[PrimeTime]

Try adding a size and width like this

#header_wrapper {
position: top center;
padding-top: 48px;
width: 763px;
height: 82px;
border: none;
margin-bottom: 0px;
background:url(http://primetime.smugmug.com/photos/64843349-O.png) top no-repeat;
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='http://primetime.smugmug.com/photos/64843349-O.png');
}

EDIT, and add the background none

Looks like we're posting at the same time. I noticed you added the _background: none line in. I added that and the width and height value and it made the gray background go away. Very nice! Now how can I get it centered again?

-Craig

[ivar]

Looks like we're posting at the same time. I noticed you added the _background: none line in. I added that and the width and height value and it made the gray background go away. Very nice! Now how can I get it centered again?

-CraigHaha, see my previous post again :D

[Mike Lane]

To center it add

margin:0 auto;

[ivar]

LOL, this is starting to get funny, 3 people talking alongside here :lol3

[PrimeTime]

Haha, see my previous post again :D

I noticed I didn't put the position: top center; line back in so I did and it still is sitting on the left side in FF and IE. I also just copied and pasted your code into my header to make sure I wasn't missing anything, still on the left side. Any ideas? Also an oddity, in FF the links and buttons in my header still work, but in IE now they don't. This is definite progress though. I've been trying to ditch that stupid gray background in IE for two weeks now hehe. Thanks

-Craig

[ivar]

the AlphaImageLoader needs a abs position, or a width/height. You could do with only a width or only a height too

[Andy]

To center it add

margin:0 auto;

Craig, looks like when you do this last step, you'll be golden. Then repeat for the other pngs and yay!

[ivar]

I noticed I didn't put the position: top center; line back in so I did and it still is sitting on the left side in FF and IE. I also just copied and pasted your code into my header to make sure I wasn't missing anything, still on the left side. Any ideas? Also an oddity, in FF the links and buttons in my header still work, but in IE now they don't. This is definite progress though. I've been trying to ditch that stupid gray background in IE for two weeks now hehe. Thanks

-CraigI've just looked at your CSS, and it still shows the position, and doesn't show the margin: 0 auto....

standby for the button thing

[PrimeTime]

To center it add

margin:0 auto;

Ok I threw that in and it worked great. So the header looks great in FF and IE now. But my buttons in my header haven't worked in IE since I put the no background, width, and height stuff in. Any ideas on how to fix that?

-Craig

[Andy]

Ok I threw that in and it worked great. So the header looks great in FF and IE now. But my buttons in my header haven't worked in IE since I put the no background, width, and height stuff in. Any ideas on how to fix that?

-Craig
Well you want it all, don't you:D

Hang on let's have a look.

[ivar]

Don't know why the problem is there, but this is the solution
add:#header {
position: relative;
z-index: 500;
}

[Andy]

Don't know why the problem is there, but this is the solution
add:#header {
position: relative;
z-index: 500;
}
Yep, THANKS IVAR AND MIKE!

Craig, I put that last bit of code in for you.
looking good!

[ivar]

you gotta love IE, don't you :D

Allright, hack fixed, enough hacking for one day, bedtime!

[PrimeTime]

you gotta love IE, don't you :D

Allright, hack fixed, enough hacking for one day, bedtime!

Thanks so much for the help guys. You guys are quite the team. I'll get cooking on updating the rest of my images to match my header now. Ya'll are awesome!

-Craig

[PrimeTime]

Hey guys,

I've ran into a bit of a snag again, this time with my middle section. Here is my code, I've highlighted what I think is the problem in red.


#homepage, #category, #smugmug, #smugmug_small, #traditional, #allthumbs, #journal, #slideshow, #singleImage, #filmstrip {
position: center;
width: 850px;
height: 200px
border: none;
margin:0 auto;
background:url(http://primetime.smugmug.com/photos/64586769-O.png) repeat;
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='http://primetime.smugmug.com/photos/64586769-O.png');
}

From looking at Microsoft documentation on their filter, I saw that AlphaImageLoader has three different sizingMethod options, crop, image, and scale. Here is what each does as described by MS.

crop: Clips the image to fit the dimensions of the object.

image: Default. Enlarges or reduces the border of the object to fit the dimensions of the image.

scale: Stretches or shrinks the image to fill the borders of the object.

I want something that allows me to repeat the image over and over like I'm doing with firefox. But i don't see anything in the filter that can do that. Does anyone know a way to do that? Using sizingMethod with either of the above options either cuts everything from but my bio, shows the image once to scale and then theres no background, or stretches the background to cover my whole site and it looks dumb. Any help would be greatly appreciated.

Oh, I'm also having the same problem with the buttons not working in my middle section. I tried copying the

#header {
position: relative;
z-index: 500;
}

code but anything I put in place of header does nothing. Any suggestions on that would be great too. Thanks,


-Craig

[Mike Lane]

The problem is what I've highlighted in red:

#homepage, #category, #smugmug, #smugmug_small, #traditional, #allthumbs, #journal, #slideshow, #singleImage, #filmstrip {
position: center;
width: 850px;
height: 200px
border: none;
margin:0 auto;
background:url(http://primetime.smugmug.com/photos/64586769-O.png) repeat;
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='http://primetime.smugmug.com/photos/64586769-O.png');
}

There is no such thing as position:center;

Also, the filter hack is not the same as the background property. You will be unable to tile the images together like you can in firefox.

[PrimeTime]

The problem is what I've highlighted in red:

#homepage, #category, #smugmug, #smugmug_small, #traditional, #allthumbs, #journal, #slideshow, #singleImage, #filmstrip {
position: center;
width: 850px;
height: 200px
border: none;
margin:0 auto;
background:url(http://primetime.smugmug.com/photos/64586769-O.png) repeat;
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='http://primetime.smugmug.com/photos/64586769-O.png');
}

There is no such thing as position:center;

Also, the filter hack is not the same as the background property. You will be unable to tile the images together like you can in firefox.

Ok Thanks Mike. I removed the position:center line. To get the background to not look stretched badly I made a really long version of my middle graphic, like 1800 px, and then set the option to crop, and it cuts it off at the end of my site. But I still am having the same problem that I had with my header, none of the links or buttons work. It's like the background is covering them up because when I had a background image that only covered a portion of my site the uncovered portion's links worked, but the covered portion didn't. Anyone know a way to get this to work? I've tried variations on the code Ivar gave me yesterday,

#header {
position: relative;
z-index: 500;
}

but I don't know what to put in place of header to cover the main section of my page. Any ideas?

-Craig

[ivar]

Ok Thanks Mike. I removed the position:center line. To get the background to not look stretched badly I made a really long version of my middle graphic, like 1800 px, and then set the option to crop, and it cuts it off at the end of my site. But I still am having the same problem that I had with my header, none of the links or buttons work. It's like the background is covering them up because when I had a background image that only covered a portion of my site the uncovered portion's links worked, but the covered portion didn't. Anyone know a way to get this to work? I've tried variations on the code Ivar gave me yesterday,

#header {
position: relative;
z-index: 500;
}

but I don't know what to put in place of header to cover the main section of my page. Any ideas?

-CraigHi Craig,

Try using #homepage, #smugmug, #critique, ..... etc. instead of #header. Let me know if that works.

[PrimeTime]

Hi Craig,

Try using #homepage, #smugmug, #critique, ..... etc. instead of #header. Let me know if that works.

Thanks for the reply Ivar,

Yesterday I tried all these: #homepage, #category, #smugmug, #smugmug_small, #traditional, #allthumbs, #journal, #slideshow, #singleImage, #filmstrip and nothing. Tried #critique just now and still nothing in my main section works. Any ideas on how to fix this?

-Craig