How do I keep this from pushing down?

Question

http://removed.com/jquery/test.html

Playing with jQuery and upon pressing "More" on the top left, it pushes down the "Brown" layer. How can I keep the brown layer steady? It happens in Chrome, but not Firefox.

Answer 1

Try adding some z-indexes and positioning:

#bag_info{
   ...
position:relative;
top: 10px;
left: 10px;
z-index:1;
  }

#more
{
position:absolute;
}

#more_searchbox /*you'll have to name this according to the search box*/
{
z-index:2;
position:relative;
top: 10px;
left; 10px; /*px values that work*/
}

That might fix it :)

Also, you might need to target Chrome on its own as FF is working, use this CSS Browser selector and put .webkit before the CSS you want to use for Chrome.

Answer 2

May be by setting CSS

form {
   margin : 0;
   padding : 0;
}

Hope it helps.

Answer 3

It's being pushed down, because the div#header_link expands with the form, since its in the normal page flow. Use position: absolute for the fieldset to take it out of the flow.

Also, a fieldset is supposed to be inside a form, not the other way around.

Note: Underscore is not a legal character for a CSS-identifier, use the hyphen instead

Answer 4

Personally, I'd put that fieldset into a li thats a child of the one with the more link in it. Then absolutely position that. IMO, is neater code than positioning it absolutely within the page, it also means if you move the nav ul, you won't have to fiddle around moving the fieldset again.