Tagged: elements, enfold, positioning, tabs
Hi There,
I have enfold 2.4.2 and on this page http://goo.gl/iU9d9Y as you click on the different tab entries, the content is being clipped (on at least FF, Chrome and Safari).
The page loads with the Company Mission Statement tab open, but if you click on the next one down (Company Goals) the element with that content (previously hidden) is misplaced, so the top of it is clipped.
This was working fine and I’ve not updated anything, so I have no idea why this is happening….
I can’t work out how all the interactions between the shown and hidden elements are working with the relative positioning….? Help!
***Quick Update***
I have reduced the problem a bit by making the content of the Company Goals tab bigger (I added a paragraph), It is still clipping a bit, but not as much. At least the top tab label isn’t getting clipped now.
I think that the problem is that if the tab content is not bigger than the depth of all the tabs, the position is miscalculated.
Bah! Another update,
Actually it is still getting clipped badly. It depends whether you re-load the page on a particular tab or not. If you just load the main page and move tab, things are clipped. If you re-load the page with a clipped tab open, then they are not clipped as badly.
Fixed.
I’ve managed to sort the problem out. Here’s the info in case anyone else has the same problem.
It was caused by a CSS clash with a new ID I had added to the tabs to support Google Event Tracking. The updates were done in line with this post
I didn’t follow the post exactly, because the suggestion was to add an ID with # in the front, e.g. ID=’#tab-id-1′ I couldn’t use the # because it clashed with the google events plugin I was using, so I dropped it giving me ID=’tab-id-1′ That caused the problem. I changed the ID I was generating to ID=’eventtab-id-1′ (and changed the event tracking plugin for the new names) and it’s all working fine now.
Rob.