[Solved] CSS Conflict in WordPress for Accordion. Can't Find.

[Clare12345]

Hi,

I’m using an accordion and when I have it on a regular html page it works fine, see here: http://enablely.com/new-accordian3/Flat_Accordion/Flat_Horizontal_Accordion/Horizontal_Accordion_Menu_Radio/index.html (I’ve removed the images, but the functionality is still working).

When I put the same code into a page on my WordPress website, it gets all crazy: http://enablely.com/services-accordian.

Any suggestions? It’s only HTML and CSS, so there must be a CSS conflict somewhere.

Thank you!!

[shaneisme]

The markup is also different. Did you build this from scratch, or is there a place with a tutorial or instructions we could take a look at?

[Clare12345]

I bought it from Envato here: http://codecanyon.net/item/css3-flat-accordion/6172033.

[Clare12345]

And what do you mean by the markup is different?

Edit: There is no tutorial that came with the purchase. Just the source files.

[shaneisme]

The HTML portion I mean.

That’s a shame about no docs… lazy devs I tell ya.

Anyway, do you think you could try copying the HTML from the working version over into your WordPress environment as a first step?

If that doesn’t work, I’ll take a deeper dive into it.

[Clare12345]

I had copied it exactly from the working example on my server to WordPress. I don’t know why it’s not working, but it does seem to be something WordPress is causing.

I went in and removed all of the extra spaces in the document, like between tags, because sometimes that does create an extra p element, but it didn’t help.

Any other ideas?

Thank you for offering to help!

[shaneisme]

OK, if you’re adding it into the CMS itself, in other words into the text box of a page or a post this is likely your problem.

Even if you use the HTML tab when copying it in, I’m not sure you’ll get away with anything complex. WordPress does this for security purposes…

The best I think you could do is implement it as a widget or plugin and use shortcode. If you contact the person you purchased it from, they might actually have one that works inside WordPress.

To test my theory, what you could do is actually put it into the code of your theme outside the WordPress loop. If it works there, then I bet WordPress is doing stuff that’s messing up the markup to the point of breaking it.

[Clare12345]

Shane, I tried your suggestion, and it worked! I’m using the Canvas theme so I put the code in a hook with conditional shortcodes and there was no problem after that! It’s all set now.

http://enablely.com/services-accordian/

Thank you!

Clare

[Clare12345]

Actually, any idea why the WordPress version doesn’t have the SVG icons showing up but the server version does?

And I also don’t see how to add an extra 20 or so pixels as a margin under the accordian. Both margin and padding css don’t work.

Thank you,

Clare

[shaneisme]

Cool deal.

As for the margin issues, well if you try to set it on .accordion it’s actually working however that element has a height of zero.

I didn’t go into details to see why, but it might be as simple as setting something as relative instead of absolute or floating issues?

Of course you could just manually set the height as 340px if it’s always going to be that :)

[Clare12345]

Thank you! That fixed it (I did it in my browser, not permanently yet.
I also figured out that I didn’t upload those fonts to the folder they are being looked for in. I’ve got to do that also.

Thank you!!!!

Clare

[shaneisme]

No problem :)

[Author]

Posts