Question

We’re almost ready to take this site live but there is something odd going on that I’d love some help with.

http://sbt.publishpath.com/

If you visit that site, you’ll notice that the links to the left of the phone automatically cycle or you can hover over them to update. But if you quickly move the mouse over more than one link and then immediately move your mouse out of that area with the links, it adds spacing to the dark area beneath. The extra spacing disappears once the autocycle code kicks in.

I’m stumped, any ideas?

Answer 1

Try this:

#content-phone
{
  height: 432px;
}

and get rid of the min-height style.

When you switch from showing #textMessages to #defaultMessage, the #textMessages div has a slight delay after the #defaultMessage box is shown, so both are briefly visible. This causes the #content-phone div to expand downward pushing the footer content farther down the page.

It’s probably a mistake in how you’re hiding the #textMessages div after hovering out of the list, but explicitly setting the height should fix it.