CSS3 not displaying properly in Wordpress? Why?

by Dexx
9 replies
Hey Guys,

So here's the issue I found and just wondering if any of the more experience coders may know a fix for this.

I'm trying to use some of the cool CSS3 shadow effects as found on this site here: Different CSS3 Box Shadows Effects | CSSDeck

Now when I tried posting the exact code in a test Wordpress post, all of the code that was associated to :before and :after did not show up (the rest displayed properly): Test Post CSS | Profit System Template

Now when I pasted that same code again into a blank HTML document and then uploaded it to my test server, the code showed properly: Website Name

I tried using the default Wordpress template and other templates (to see if that was the problem) and it made no difference...

So I'm just wondering why Wordpress seems to have an issue with :before and :after CSS codes, and how this can be fixed? Any ideas?

~Dexx
#css3 #displaying #properly #wordpress
  • Profile picture of the author Michael71
    First of all, Wordpress has no issue.

    Check the "surrounding" CSS or your "effect"...
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[7899819].message }}
    • Profile picture of the author Dexx
      Originally Posted by Michael71 View Post

      First of all, Wordpress has no issue.

      Check the "surrounding" CSS or your "effect"...
      I'm not that experienced with CSS, so I'm not sure where the surrounding errors would be around the effects...but the code works when placed in a plain HTML file...so wouldnt that mean the CSS code is working fine?
      {{ DiscussionBoard.errors[7901055].message }}
      • Profile picture of the author ttkim
        Yea, because of the z-index, the shadow is hidden behind the white background of your wrapper.

        Also, to add onto Andrew's solution, I think you'll have to change the height of the effects div to be 100%.

        Code:
        .effect1, .effect2, .effect3, .effect4, .effect5, .effect6, .effect7 {
            height:100%;
        }
        Signature

        My signature

        {{ DiscussionBoard.errors[7901201].message }}
  • Profile picture of the author SteveJohnson
    The first thing you need to do when troubleshooting display errors is check the page source code.

    In your case, it is riddled with errors that would prevent the effects from being applied ( more than a few stray </p> tags, an incorrect comment tag, and several others). Fix those, then come back again if you can't get the effects to work.

    Hint: the errors are likely introduced by the WP post editor. If you're going to enter raw HTML, turn off the visual editor in your Profile.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[7900590].message }}
  • Profile picture of the author Dexx
    Okay I created a fresh wordpress install (for testing purposes) with no special plugins etc. added.

    http://test.uniqueprofitsystems.com

    I disabled the visual editor in the profile and pasted in the code as seen below:



    Which still (when viewed in page source) has added in extra </p> tags and such...so it does seem Wordpress is still changing the code somehow? Or am I missing something?
    {{ DiscussionBoard.errors[7901046].message }}
  • Profile picture of the author Dexx
    Okay, so it seems there's an issue in the CSS code (not sure where), but I tried CSS code from a different site: Pure CSS3 box-shadow page curl effect by Matt Hamm

    and it worked properly as seen here:
    2nd Test of CSS | Test Site


    Not sure where the problem is in the original CSS tho...
    {{ DiscussionBoard.errors[7901120].message }}
  • Profile picture of the author Andrew H
    Your z-index of -2 is causing the shadow to be hidden behind other parent divs. Change it to something like this and adjust your css accordingly.


    HTML Code:
    <div class="box">
    <div class="effect">
    //content here
    </div>
    </div>
    To see what is happening you can go to your test page and add a background color to <section> and you will see the shadows are hidden.
    Signature
    "You shouldn't come here and set yourself up as the resident wizard of oz."
    {{ DiscussionBoard.errors[7901132].message }}
  • Profile picture of the author Dexx
    Okay so on the test site: Test CSS Post | Test Site

    I changed the z-index of the "effect" CSS's from -1 to 0...

    This made the shadow finally visible as you had expected (yay!) except the problem is they are infront of the boxes which they were to be behind now!

    I tried to add a z-index to the .box class to try and bring it ahead of the .effect class without any luck...did I do something wrong in adding it in?

    For the Effect 6 box I left the code as is to see if it made a difference, and either way it still shows the same (whether I nest the CSS classes as suggested with the height:100% or not)
    {{ DiscussionBoard.errors[7903417].message }}
  • Profile picture of the author Andrew H
    Change the .box z-index to 2 and the .effect z-index to 1 (.box will be in front of .effect). Make sure to assign a position to both divs.

    CSS z-index property
    Signature
    "You shouldn't come here and set yourself up as the resident wizard of oz."
    {{ DiscussionBoard.errors[7903455].message }}

Trending Topics