IE and Firefox Compatibility

mayo

New Member
Hi, I am currently working on my personal web page, which features my music, pictures, and services I offer as a musician. The link to my page is:

http://www.mayo.x10.mx

I designed this page with Firefox, and after all this work I checked my website in IE and it doesn't display as it should. Couple of things I need help with:

1. The two sideshows (background X, and pictures of me on the right) appear to be offset by couple of pixels.

2. The transparent png picture of me has a white background, even though it should not.

Can you confirm this or other problems on your browsers, or am I doing something wrong.
 

ronaldroe

Super Moderator
Staff member
Welcome to the biggest web design headache: IE.

Start by setting the margin and padding of everything to zero. There are a plethora of ways to do this, and people can debate for hours on which to use, but the easiest way is: * {margin:0; padding:0;}

PNG alpha transparency doesn't work in IE 7 or older. There are JavaScript hacks out there, but the easiest way is to just work around it or ignore it.
 
Last edited:

mayo

New Member
Thank You, the zero margin and padding helped me out and fixed the position problem. Could you help me out with the png transparency hack? The thing is that I tried it with IE8 which I though should already have transparency for PNG.
 
Last edited:

rwebber77

New Member
Thank You, the zero margin and padding helped me out and fixed the position problem. Could you help me out with the png transparency hack? The thing is that I tried it with IE8 which I though should already have transparency for PNG.

Check out this write up, simple fix and it even explains exactly what is happening.
 

ronaldroe

Super Moderator
Staff member
Thank You, the zero margin and padding helped me out and fixed the position problem. Could you help me out with the png transparency hack? The thing is that I tried it with IE8 which I though should already have transparency for PNG.

Glad the positioning worked. I start all of my designs by importing my CSS reset. It's nice to have a clean slate to work with, since all browsers' user css is different.

As far as the PNG fix, be sure you're following all of the directions, notably this one:

Note that you must have height and width attributes specified for each image.

I noticed you only specified the width. Try specifying the height and see if it works...
 
Last edited:

mayo

New Member
I tried setting the width and height of the 3 images that have the transparency problem, but no luck.

One important thing I just realized is that my table that holds the actual content has transparency, and it does work in IE, which leads me to believe there is something else in there that causes the problem.
 

ronaldroe

Super Moderator
Staff member
Transparent backgrounds on elements are different from alpha transparency in images. Try changing the image to png-8. It doesn't use alpha transparency (though the quality may drop).
 

rwebber77

New Member
I changed the mayo1.png to png-8 a while ago and it worked across all browsers for me.

Did you get my pm about that mayo?
 

mayo

New Member
Thanks, bur that didn't work either.

Edit:
Just read your second post, I will look in my pm box and let you know.
 

mayo

New Member
I think I found the root of the problem. The thing is that for some reason when I put a background-color:whatever; in my css file for the <div> that the slideshow is in, it shows the transparency how it should, but without any background the images wont show transparency. I tried background-color:transparent; which didn't work. Also tried to put an image as a background for the div which didn't work either.

I think I have seen somewhere on the net that IE needs to have a background color in order to render transparency correctly. If this is the case how can I solve my problem on my website where I can't have a background color for the div because it needs it to be transparent.

Thanks for your replies so far!


EDIT:
I found a little fix which gets rid of the white background, BUT adds a black outline on each image while its moving in the slideshow. I think we can call this progress. Finally something! The website that I found it at is here http://forum.jquery.com/topic/jquery-cycle-plugin-and-png-transparency-in-ie8-and-ie7 and the actual code is this: #image-container img {background:none !important;}

I still need your guys help to help me figure out the black outline on the slideshow. Thanks in advance
 
Last edited:

ronaldroe

Super Moderator
Staff member
Have you tried setting cleartypeNoBg: from jquery.cycle.all.latest.js to true? It's on line 905. Just a shot in the dark...
 

mayo

New Member
Thanks for the suggestion. I tried it and it didn't work. I also tried changing the cleartype: !$.support.opacity to true on line 904, but it didn't work either.
 

mayo

New Member
Thank you all for your suggestions and ideas. In the end I decided to abandon this template and go with a different one. I would really appreciate if you can give me a constructive criticism of how this page looks. Thank you!

The link again is http://mayo.x10.mx
 

mayo

New Member
Thank you. I am interested in having a music player the would play continuously throughout the website, regardless if the user would switch in between the pages. Something like reverbnation.com has. For those not familiar the player is always in the header, and one can queue songs into that play list from different profiles.

EDIT:
I just realized that on my http://mayo.x10.mx/donate.html page in IE8 I get an extra box that's empty. In firefox it looks like its supposed to.
 
Last edited:
Top