Question

I have the following code which works fine on IE8:

$("<div class='divButtons'>").appendTo( $(".widget_header") );
$(".divButtons").html( "(close), (min), (max)" );

However, if I add a .hide, instead of just hiding .divButtons, it hides the whole .widget_header.

For example:

$("<div class='divButtons'>").appendTo( $(".widget_header") );
$(".divButtons").html( "(close), (min), (max)" ).hide();

Why is that happening?

Answer 1

You aren’t closing your div tag and so your HTML will be invalid, causing the bounds of all of your divs to become skewed. Try this instead:

$("<div class='divButtons'></div>").appendTo( $(".widget_header") );
$(".divButtons").html( "(close), (min), (max)" ).hide();

This is a documented IE8 issue that you can read about here

Further to this, you can create more concise, optimized code by doing the following:

$("<div class='divButtons'>(close), (min), (max)</div>").appendTo( $(".widget_header"));​

And using css to hide it initially in the form of display: none;

Here’s a fiddle demo of it