IE 7 and 8 CSS 3 using HTC ISSUES, only 1 drop shadow is appearing and I need sticky footers
Tested and works beautifully in IE 9, Firefox, Chrome and Safari.
IE 7 & 8 on the other hand are full of issues.
Here's the site: http://campusrec.colostate.edu/newsite/
css3.htc); on the outter div, the inner div works fine.
Issue 2: The footer in IE 7 and 8 is not aligning with the bottom like it is in FireFox. It has about 10 px of padding on the bottom and a Drop shadow.
Outter Div: #outterDropShadow Inner Div: #contentCenterDiv
Any ideas for both issues?
Hard to say much without a working live sample but I can tell you this:
I've used plenty of .htc hacks to give CSS3 functionality to IE7/8 and all I can tell you is that it's a dead-end. The way these .htc hacks work is by rendering 'images' that simulate the effects on top of your divs or elements and then arranging absolute positioning and what not.
This means that the second you have overlapping context or intricate combinations of css3 rules/effects, the .htc file's attempts at reproducing said fail miserably.
I strongly suggest you just render the css3 properly on compliant browsers, copy paste the 'screenshoted' elements with the effects on, and then use those as background images for pretty much anything IE related. It's quicker, faster, less prone to failure and very reliable. It's just a matter of playing with proper background image positioning.
Hope this helps
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here