CSS3 not displaying properly in Wordpress? Why?

by Dexx

Posted: 11 years ago 9 replies

PROGRAMMING

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

Michael71 11 years ago

First of all, Wordpress has no issue.

Check the "surrounding" CSS or your "effect"...
- Thanks
- 1 reply
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 }}
- Dexx 11 years ago
  
  Originally Posted by Michael71
  
  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?
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[7901055].message }}
  
  ttkim 11 years ago
  
  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%; }
  
  [ 1 ] Thanks
  
  {{ DiscussionBoard.errors[7901201].message }}
SteveJohnson 11 years ago

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.
- Thanks
Signature

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

Gun control means never having to say, "I missed you."
{{ DiscussionBoard.errors[7900590].message }}
Dexx 11 years ago

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?
- Thanks
{{ DiscussionBoard.errors[7901046].message }}
Dexx 11 years ago

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...
- Thanks
{{ DiscussionBoard.errors[7901120].message }}
Andrew H 11 years ago
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
Signature

"You shouldn't come here and set yourself up as the resident wizard of oz."
{{ DiscussionBoard.errors[7901132].message }}
Dexx 11 years ago

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)
- Thanks
{{ DiscussionBoard.errors[7903417].message }}
Andrew H 11 years ago

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
- Thanks
Signature

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