absolut transparency
It's one of those days.
A Friday afternoon when after those "four evil hours" you get another four so it'll make your work day and set you longing for the weekend.
Today was an easy day in terms of real work but a damn hard one from the "find yourself something to bang your head on" perspective.
If you look at the Services section in my right sidebar and you click on the "here" link you'll see what I did today. And this is not a trick from my part into making you see that note.
Now, if you played a little with that you probably want to know how I did it. Or you already said something like "png background, so WHAT!?" and closed this window.
I'll have to assume that u didn't do that and you are still interested in what the heck was so hard to do anyway?
Well that is a div with a fixed width and height because of the fix sized image in the back. In Firefox is easy because it knows how to handle correctly png's with variable transparency as backgrounds. In IE is a little harder and you have to use "AlphaImageLoader" and background: none inside a "*html #yourDivId" CSS rule in order to make it work in both browsers.
Well that is not a really big issue if you know your CSS woes but this one is a little tricky. You see, that div had to have position: absolute on a high z-index in order not to break the blog's layout. And when I set that position absolute I suddenly noticed that in IE the links inside it stopped working because of the "AlphaImageLoader" filter. The final solution was to put the div in a container and to position this last one absolutely. After goggling a lot and reading some 10 km long pages with comments I got the hint that my links had to have a position:relative rule and I had to remove any type of positioning declaration for the inner div's CSS in order to make them work properly.
And because I wanted the page below to respond to user actions I couldn't make the container 100% and use margin: 0 auto; to center my div on the page. So my last resort was to use some quick JavaScript in order to center the container on the page.
Well it works ok and I am satisfyed with the final result.
If you encounter any quirks please drop me a note.
A Friday afternoon when after those "four evil hours" you get another four so it'll make your work day and set you longing for the weekend.
Today was an easy day in terms of real work but a damn hard one from the "find yourself something to bang your head on" perspective.
If you look at the Services section in my right sidebar and you click on the "here" link you'll see what I did today. And this is not a trick from my part into making you see that note.
Now, if you played a little with that you probably want to know how I did it. Or you already said something like "png background, so WHAT!?" and closed this window.
I'll have to assume that u didn't do that and you are still interested in what the heck was so hard to do anyway?
Well that is a div with a fixed width and height because of the fix sized image in the back. In Firefox is easy because it knows how to handle correctly png's with variable transparency as backgrounds. In IE is a little harder and you have to use "AlphaImageLoader" and background: none inside a "*html #yourDivId" CSS rule in order to make it work in both browsers.
Well that is not a really big issue if you know your CSS woes but this one is a little tricky. You see, that div had to have position: absolute on a high z-index in order not to break the blog's layout. And when I set that position absolute I suddenly noticed that in IE the links inside it stopped working because of the "AlphaImageLoader" filter. The final solution was to put the div in a container and to position this last one absolutely. After goggling a lot and reading some 10 km long pages with comments I got the hint that my links had to have a position:relative rule and I had to remove any type of positioning declaration for the inner div's CSS in order to make them work properly.
And because I wanted the page below to respond to user actions I couldn't make the container 100% and use margin: 0 auto; to center my div on the page. So my last resort was to use some quick JavaScript in order to center the container on the page.
Well it works ok and I am satisfyed with the final result.
If you encounter any quirks please drop me a note.
posted by cosmin at 5:23 PM
0 Comments:
Post a Comment
<< Home