CSS3 not displaying properly in Wordpress? Why?

by 9 replies
11
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
#programming #css3 #displaying #properly #wordpress
  • First of all, Wordpress has no issue.

    Check the "surrounding" CSS or your "effect"...
    • [1] reply
    • 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?
      • [1] reply
  • 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.
  • 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?
  • 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...
  • 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.
    • [ 1 ] Thanks
  • 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)
  • 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
Join the discussion

Next Topics on Trending Feed