[Plugin: WP-Table Reloaded] Table Reloaded Shadows

  • Resolved Nigel Climpson

    (@nigel-climpson)


    13 years, 9 months ago

    Hi
    I am afraid it is image shadoes again.
    I am using code that has appeared on earlier posts on the Forum with partial success.
    With IE9 I can make DropShadow work but Shadow. I have split up the code below to demonstrate that DropShadow works on column1 but Shadow does not on column 2.
    Even worse I can’t get any shadows to appear when using Firefox or Chrome.
    I am using Weaver ii theme but have also tried the WordPress 2010 but the result is the same.
    The URL to the page that demonstrates the problem is
    http://www.paramount.freeiz.com/wordpress/gallery1

    .wp-table-reloaded-id-1 .column-1 img
    {
    -moz-box-shadow: 5px, 5px, 5px, #999; /* Firefox */
    -webkit-box-shadow: 5px 5px 5px #999; /* Safari/Chrome */
    box-shadow: 5px 5px 5px #999; /* Opera and other CSS3 supporting browsers */
    -ms-filter: “progid:DXImageTransform.Microsoft.DropShadow(Offx=10,Offy=10,Color=’#505050′,enabled=’true’)”;
    }

    .wp-table-reloaded-id-1 .column-2 img
    {
    -moz-box-shadow: 5px, 5px, 5px, #999); /* Firefox */
    -webkit-box-shadow: 5px 5px 5px #999; /* Safari/Chrome */
    box-shadow: 5px 5px 5px #999; /* Opera and other CSS3 supporting browsers */
    -ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135,Color=’#505050′, Enabled=’true’)”;
    }

    I hope you can help as I am tearing out what little hair I have.

    Many Thanks

    http://wordpress.org/extend/plugins/wp-table-reloaded/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    13 years, 9 months ago

    Hi,

    thanks for your post.
    This is really weird, and I’m afraid I have bad news:
    The code looks fine (except for an extra “)” in the

    -moz-box-shadow: 5px, 5px, 5px, #999); /* Firefox */

    but for some reason it is not applied by the browser.
    Unfortunately, I have absolutely no idea why this is 🙁
    It is especially weird, that this is also not working with Twenty Ten…

    Regards,
    Tobias

    Thread Starter Nigel Climpson

    (@nigel-climpson)

    13 years, 9 months ago

    Hi Tobias,
    Thanks for you quick reply.
    The extra ) came from many variations in trying to make it work.

    I would really like Microsoft.Shadow… So why does that not work when Microsoft.DropShadow does.
    I agree with you that it is weird

    Nigel

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    13 years, 9 months ago

    Hi Nigel,

    you might want to check if DropShadow is supported by IE at all. I just know that this ms-filter: "progid:DXImage is so obscure, unreliable and no longer necessary once IE 9 and 10 get higher usage numbers, that the WordPress core developers decided not to add it to WordPress (for various gradients and so on).

    Regards,
    Tobias

    Thread Starter Nigel Climpson

    (@nigel-climpson)

    13 years, 9 months ago

    Hi Tobias,

    ms-filter: “progid:DXImage.Microsoft.DropShadow is supported because it works on my WordPress site. It is Shadow that doesn’t.

    ‘box-shadow’ works in my version of IE, as does -moz- in Firefox and -webkit- in Chrome, certainly outside of WordPress. See http://www.paramount.freeiz.com/shadows

    So my question now is why does box-shadow not work within wordpress and table reloaded. Have you tried this sort of code in the CSS area of your plugin?

    .wp-table-reloaded-id-1 .column-1 img
    {
    -moz-box-shadow: 5px, 5px, 5px, #999; /* Firefox */
    -webkit-box-shadow: 5px 5px 5px #999; /* Safari/Chrome */
    box-shadow: 5px 5px 5px #999; /* Opera and other CSS3 supporting browsers */
    -ms-filter: “progid:DXImageTransform.Microsoft.DropShadow(Offx=10,Offy=10,Color=’#505050′,enabled=’true’)”;
    }

    Best Wishes

    Nigel

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    13 years, 9 months ago

    Hi,

    I have tried this CSS code now on my local dev machine, and it works as expected (except for the progid, which looks weird on IE 8 (only IE I can try)).

    Due to that, and from my experience, I’m pretty sure, that neither WP-Table Reloaded nor WordPress are causing this CSS code to not work.
    Unfortunately, I have no idea how to find the exact cause 🙁

    I just found a workaround maybe: As it seems, it is crucial for the images to have a slight padding.
    Can you try adding

    .wp-table-reloaded-id-1 img {
  padding: 1px !important;
}

    Regards,
    Tobias

    Thread Starter Nigel Climpson

    (@nigel-climpson)

    13 years, 9 months ago

    Hi Tobias,
    Thank you for your efforts. Sadly the padding rules have had no effect, still no shadows in Firefox and Chrome, but IE9 is OK through DXTransform (but only with DropShadow and not with Shadow.

    I will keep playing and reading and will let you know if I find a solution.

    It is only a small detail and I will continue to use Table Reloaded.

    Best Wishes

    Nigel

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    13 years, 9 months ago

    Hi Nigel,

    the shadows are working for me in Chrome, it’s just that they are very small.
    If you increase the values, you should also see them.

    Good to hear that WP-Table Reloaded is still useful though 🙂

    Best wishes,
    Tobias

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘[Plugin: WP-Table Reloaded] Table Reloaded Shadows’ is closed to new replies.