jQuery toggle pushing other elements around... bullies!!
- by tony noriega
Ok, so in the left_col of my page, i have a list UL LI that incorporates a jQuery toggle to open a small box, which is "LoginBox".
<ul>
<li class="members"><a href="/members/signon.asp?userType=member">Members</a></li>
<li class="employers"><a href="/employers/signon.asp?userType=employer">Employers</a></li>
<li class="providers"><a href="#LoginBox" class="clicker">Providers</a></li>
<div class="loginbox" id="LoginBox">
<p>Medical</p>
<p>Dental</p>
</div>
<li class="brokers"><a href="/brokers/signon.asp?userType=broker">Brokers</a></li>
</ul>
when the jQuery is invoked, it pushes the elements below it down. As expected.
What i dont get is that i have an H3 tag below this UL LI which has a background image.
The text portion of the H3 gets pushed down, but the background image seems to stay put, and the UL LI that gets pushed down just covers up the background image of the H3.
why would the text move, but not the background image itself?
here is the H3 style:
.sectionmenu h3{
background: url(/_images/h3-triangle.gif) left center no-repeat;
color: #000;
font-size: 12px;
font-weight: bold;
padding: 4px 0px 4px 10px;
margin: 0;
border-bottom:1px dotted #aeaeae;;
}
and the login box style:
.loginbox{
display:none;
width:100px;
height:50px;
margin:0 0 0 77px;
}
