- This topic is empty.
May 12, 2014 at 7:06 am #169866
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!!May 12, 2014 at 9:50 am #169894
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?May 12, 2014 at 11:43 am #169917
I bought it from Envato here: http://codecanyon.net/item/css3-flat-accordion/6172033.May 12, 2014 at 11:44 am #169918
And what do you mean by the markup is different?
Edit: There is no tutorial that came with the purchase. Just the source files.May 12, 2014 at 2:16 pm #169935
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.May 12, 2014 at 4:26 pm #169941
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!May 12, 2014 at 4:47 pm #169943
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.May 12, 2014 at 7:43 pm #169956
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.
ClareMay 12, 2014 at 7:47 pm #169957
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.
ClareMay 12, 2014 at 8:56 pm #169962
As for the margin issues, well if you try to set it on
.accordionit’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 :)May 13, 2014 at 4:54 am #170007
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.
ClareMay 13, 2014 at 6:28 am #170013
No problem :)
- The forum ‘CSS’ is closed to new topics and replies.