loonyblurb

I had an interesting issue where in ie7, the element that I was displaying using the jQuery slideToggle function, would seem to jump out of place once the animation had finished.

As I was displaying a list, I first assumed that in ie7 the element was adding in the default list margins and ignoring my css. However no amount of fiddling with adding css margins in the slideToggle callback function seemed to sort the problem.

Googling allowed me to find a solution here that worked, although I have no idea why it works.

Basically I needed to add a min-height of 0px on the parent element, and set the height of the ul that I was trying to display to 100%.

Problem sorted!

I recently spent quite a while creating a template for a new site, so was not happy to find that sometimes a large chunk of white space would appear at the top, pushing down my background image and basically distorting the whole look of the page. And it only appeared to be happening in firefox!

Delving into it a little more, I realised it was in some way related to the borders that I would place around div elements during development so that I could easily see their exact positioning (I’m still not quite the CSS whizz, and this really helps me). When I thought I was finished with the layout I removed the borders and lo, the random white space appears!
(more…)