CSS style PDF Embed: Tip & Trick

Here is a page on my site and the PDF is near the bottom of the page.

As you will please note I have added a drop shadow to the <p> element. Initially it was not working because I was ending up with additional space to the right of the PDF filled with white space, and then the drop shadow to the right of that.

Here was my initial <p> element code:

<p style="margin: 0px auto; width: 850px; margin-top: 8px;">{pdf=images/land/8a/001.pdf|850|1000}</p>

Here is the important part to get it to act correctly. Taking your cues from whatever pixel width and height you have the PDF set to display at, change your <p> element to reflect that using min and max statements. In my case it ends up looking like this:

<p style="margin: 0px auto; width: 850px; margin-top: 8px; min-height: 1000px; height: 1000px; min-width: 850px; -webkit-box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.75); -moz-box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.75); box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.75); border: 1px solid #000000;">{pdf=images/land/8a/001.pdf|850|1000}</p>

And I apologize in advance as this particular article on my site will soon get locked down to subscribers only. So, if the developer would like to add this little CSS trickery to the instructions, please feel free to do so with my blessing and consider it as "paying it forward".

Cordially,
A. Wayne Webb