Joe,
As I asked yesterday, I am still quite curious as to why the JS code hack didn’t work to shrink the page shadow overshoot at bottom. But if you or Walter don’t know, then I shall simply relegate it to “one of the great mysteries of life.”
Anyway, thank you very much for your suggestions two days ago. Here’s what I’ve done to get a solution that is satisfactory to me (which is saying a lot considering my never-ending quest for pixel perfect web designs).
I ended up using the following code block in BEFORE (Page HTML Markup):
<style type="text/css">
<!--
#outerShadow {
-moz-box-shadow: 29px 0 24px -27px #000, -29px 0 24px -27px #000;
-webkit-box-shadow: 29px 0 24px -27px #000, -29px 0 24px -27px #000;
box-shadow: 29px 0 24px -27px #000, -29px 0 24px -27px #000;
}
#FooterGraphic {
-moz-box-shadow: 0 4px 24px 0 #000;
-webkit-box-shadow: 0 4px 24px 0 #000;
box-shadow: 0 4px 24px 0 #000;
}
-->
</style>
Two of the three styles you proposed were very good, Joe. Thank you. They simply lacked the well-formed shadow I wanted at the bottom left corner and bottom right corner of the page. So to spruce up those two areas, I dwelt on your for a while code and then considered that I could just add an additional separate shadow to the Footer Graphic itself. The code above is just that. But there’s a trick required to get it to work properly.
The trick I used started with ditching the fully inline layout and going back to the basics of where I started. Such brings joy to my life, since designing a NORMAL layout with the RPL action is THE GLORY OF HEAVEN compared the the pain and suffering one must endure in tweaking a fully inline layout to look just right (and then when you want to go back and change something, the real pain begins). The main reason I had to ditch the inline layout was that there is no other way to hide the shadow spill that appears at the top of my FooterGraphic. So what I did was go back to my original Freeway 5.6.5 document, add the HTML markup you see above, then sketch a 950px wide HTML box just above FooterGraphic, and I colored that new HTML box the same medium gray as the rest of the page. When you Preview, everything looks great. Without that gray HTML box, you would see the shadow spill out above FooterGraphic. But with my little HTML box cover trick, that spill is covered, and you only see a nice shadow at the bottom of the page. The shadow comes out the sides too, and that mixes with the shadow applied to my outerShadow item, but you really cannot see any extra darkness there unless you’re looking specifically for it. All said, it’s satisfactory to me, which means it probably would be good enough for anyone else who wants to try it on their sites too.
I’d like to mention that I tried to accomplish the same thing in the fully inline layout, and the result was horrific. I tried to layer the gray HTML box above the FooterGraphic by bringing the gray box to the top, having both of those items as child items (but not floated left) of a parent HTML box. And I copied and pasted the parent box inside my outerShadow box and made it Left Aligned. In theory, it all should have turned out well, but the end result is that both of the items (neither of which were floated left) were cast to the top of the page in the browser! And although some may say “just make both items floated Left,” the fact is that doing so would not allow me to make the gray box above the footer box, thereby coving the shadow spillover. So I am not sure how the RPL action accomplishes its version of the inline layout, but RPL solved my problem perfectly.
So kudos on the sheer genius of the RPL action. Sometimes it just takes ingenuity to find a work-around for its limitations. Thank you for pointing my brain in the right direction.
Now the only problem I have is how to get the JavaScript version of PIE to work on my page shadow. Such is not a problem on any of my other web pages because all of those reside on my own server, which enables me to use PIE.htc. (I just add ‘behavior: url(“/PIE.htc”);’ to my style code in HTML Markup.) But since my Atomz search page resides on the Atomz server, PIE.htc cannot be used. I’ve read that PIE.js is a solution in those cases, but for the life of me I just can’t figure out how to get PIE.js to do its job. If anyone can point my brain in the right direction on that, I will truly be in HEAVEN.
http://css3pie.com/documentation/pie-js/
Thank you!
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options