Question

I’m using a grid system as a responsive layout for a single webpage on our corporate site (lexisnexis.stacklaw.com.au) and am having some css issues in IE.

The [+]/[-] links that are inserted by jquery are moving 20-30px above where they are supposed to appear.
If you view the page in FireFox or Chrome, they are exactly right.
How can I fix this?

Another quick question, how can I either make each section’s toggle the changeclass as well or, move the [-] to be up on the same line as the when expanded?

Answer 1

For the 1st part give float:left to the .sectionShort rule.

For the second

var anchor = $("<a href=\"#\" class=\"read more\">[+]</a>").add($(this).find('h3'))
                .click(function(e){
                    //surpress the normal anchor click events
                    e.preventDefault();
                    //fire off our class switching function
                    doSwitch(thisID);
                }).filter('a');