Can you provide a link to the page for me to take a look at?
Hello,
Thanks for the awesome support!
The link: http://www.ruudrodermond.nl/tarieven/
Hmm. I’m not seeing any text glitches. I’ve tested it in Safari, Chrome and Firefox. Having a div in the accordion likely won’t cause any issues. It could just be a browser/computer specific issue. You machine might be having trouble rendering the animations fast enough so it’s dropping frames.
Got the latest macbook pro retina. So that won’t be the case :p
Maybe i explain it better:
When the accordion gets opened. At the last millisecond the text in the accordion moves like 10px up.
Maybe thats more clear?
I can’t seem to access the site anymore. But it might have to do with margins on the titles. jQuery does a terrible job of animating those attributes. If there are margins on the titles, try using padding instead. For example:
.accordion-title {
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
}
Alright ill try that! thanks!
Changing certain margins to paddings doesn’t seem to work.
When i open the accordion the text seems to nudge 5/10px up. And when i close the accordion it seems to nudge up even more
Is it possible for me to get access to the site again?
Login with
user:pass
guest:guest
to bypass maintenance screen
There may be a better option.
Is there a way where i can disable the animation? This fixes the whole problem.
You still have margin-bottom: 8px; set on .accordion-title. If you change that to 0px and instead add padding-bottom: 8px; that should solve the issue.
There is no way to disable the animations.
unfortunately doesn’t fix it 🙁
It looks like you still have the margin on the bottom. See this image. When I remove it, and add padding bottom instead it works as expected.
Hello Phil,
Thanks again for the quick response. I first overlooked the 8px margin. It was on the accordion-title.
Although, when changing the margin to padding. It messes up the accordion creating huge gaps. between each accordion. Also the text still nudges up 🙁
You have margins set in a bunch of different places. The huge amount of space you’re seeing is from the other areas in the CSS where it is inheriting another margin-bottom value. Your styles are a little all over the place. I see references to .accordion-title on lines 1903 and 2732 of your style.css file. You’ll notice the various margins set around those areas. Also look for margin-bottom set on .accordion-title.open.
As a test, try adding this (temporarily) to the very bottom of your stylesheet:
.accordion-title {
margin-bottom: 0 !important;
}
.accordion-title.open {
margin-bottom: 0 !important;
}
