How do I stop anchor tags from shifting div content upwards

Question

I'm having a strange problem with anchor tags shifting divs upwards which is causing quite a bit of headache, but because there are so many different pieces in the mix, I don't know which one is causing the issue. I'm attempting to build a UI that uses a modal dialog box from the jQuery UI library to display a horizontal accordion style menu. The basic format of the code is as follows:

<div id="identifier" class="profilePanel">
   <ul>
      <li>
         <div class="card">
             <div class="header"><h1>Header</h1></div>
             <div class="content">
                 <!--Content goes here! -->
             </div>
         </div>
      </li>
      <li>
        ...
      </li>
   </ul>
</div>

Each card is designed so that when you click on it the currently expanded card shrinks in width and the new card grows in width. This is all done in javascript assisted by jQuery. Each cards additional content is hidden via overflow:hidden in the css, and only the header div within the card is visible when shrunk. The relevant css is as follows:

ul {
list-style: none;
margin: 0;
padding: 0;
}

div.profilePanel {
    display: none;
}

div.profilePanel li {
    float: left;
}

div.profilePanel li div.card {
    overflow: hidden;
    height: 375px;
    width: 30px;
    background-color: #e0f3fb;
    padding: 0px 2px 2px 0px;
}

div.profilePanel li p {
margin: 0;
padding: 0;
display: block;
margin-left: 35px;
}

div.header {
    border-width: 1px;
    border-style: solid;
    border-color: red;
    display: block;
    float: left;
    width: 30px;
    height: 100%;
    cursor: pointer;
}

div.content {
    padding: 5px 10px;
    height: 365px;
    overflow: auto;
}
div.content li {
    display: block;
    float: none;
}

h1 {
    float: left;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    direction: rtl;
    font-size: 14pt;
    margin-top: 5px;
    white-space: nowrap;
    width: 30px;
    text-align: center;
    overflow: visible;
}

Now if the content div contains no anchor tags (ie. I could take anchor tags and rename them to spans to get the proper formatting if not functionality) the menu displays as expected. Each header takes up the entire card size, and everything is properly formatted within the cards. However, if the content div contains an anchor tag, both the header and content divs are shifted up on the page. Using firebug, I can tell that the card div has actually not moved, but the header and content ones have. Since this is in a modal dialog box, I thought it had something to do with that but the two divs seem to be shifted in relation to the position of the dialog box no matter where I drag it to.

Answer 1

First off, I am assuming that somewhere in your HTML you have a DIV with a class of profilePanel.

I am also assuming there aren't any CSS rules that affect an anchor's position, i.e. a {margin-top:20px;}

Now I may be mistaken here, but I think you are using the wrong CSS Property. I would think it would be better to use display:none instead of overflow. Display:none literally hides the element while overflow:hidden only hides the content of an element that exceeds its size.

However, without seeing the JavaScript I'm not able to tell you what the real issue is.