Results 1 to 2 of 2

Thread: CSS for JS Accordion Problems

  1. #1
    Join Date
    Jul 2012

    Question CSS for JS Accordion Problems


    I am having a couple of problems with this accordion. I'm not sure if it's a problem with the js or the css. I suspect it's the css.

    1. When you click on one of the accordion's links, it is supposed to move that section to the top of the page. I have a top hat there, so when it moves it is hidden below the top hat. I can't figure out where to adjust the top margin.

    2. Also, when I click to close whichever accordion link is open, the spacing in between the accordion links gets jacked up. This is especially noticeable on the last one (the resume).

    Any help is hugely appreciated. Thanks!

  2. #2
    Join Date
    Dec 2002
    Manchester, UK
    It seems you're working on the live site, which is a little confusing since every so often there will be a big change and I won't know why. In future perhaps you could make a copy in a separate folder for forum users. In any case, I have my own offline copy to play with now.

    Moving on, I can add the padding you want, but the scrolling bug I don't have a solution to. There is another strange occurance in chrome where when the second link gets closed, it leaves a bigger gap than it started with, but this goes away if you make the text in the <h2> just a bit shorter, deleting 4 letters was enough to fix it.

    I changed a reasonable amount of styles for the padding, and I can explain what I did and why if you like, but here's just a quick summary.

    I deleted the chirp div and removed the styles for it from imip-style.css, then made several alterations to the st-accordian stuff, I've attached style.css as a txt file. Rename it, drop it in and it should have the padding required.
    Attached Files Attached Files
    Every fight is a food fight when you’re a cannibal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center