Jumping link in ie6 and 7

Hi, I've created an online instant messenger which works fine in theory ( the programming is spot on ) but the visual is lacking in ie 6 and 7.

basicaly today I've decided to strip it back and start again but still i run into the same problem of the link/button that shows the contacts jumbs 5px when clicked on. I just can't figure it out.

there is a little demo at http://www.actwebdesigns.co.uk/ACT_instant_messenger

the html basically is:

<div id="im_wrapper_fixed">
<div id="im_sub_wrapper">
    <div id="chat_con_wrapper">
    </div>
    <ul id="contacts_box">
        <li id="trigger_details">
            <ul class="trigger" id="trigger_wrapper">
                <li style="height: 1%;">
                    <ul>
                        <li id="contacts_header_bar">
                            <span>Contacts</span>
                        </li>
                        <li id="contacts_details">
                            <ul>
                                <li id="user_name"><strong>e-jackson</strong></li>
                                <li id="user_status">Status: Online</li>
                                <li id="option_buttons"><a id="force_offline" href="#"><img height="15" width="15" alt="Set Offline" src="../IM/images/red-beacon.jpg"></a><a id="force_away" href="#"><img height="15" width="15" alt="Set Away" src="../IM/images/orange-beacon.jpg"></a><a id="force_online" href="#"><img height="15" width="15" alt="Set Online" src="../IM/images/green-beacon.jpg"></a></li>
                            </ul>
                        </li>
                        <li id="contacts_list">
                            <ul>
                                <li class="contact"><em>no contacts online</em></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="contacts_trigger_wrapper">
            <a href="#" id="contacts_trigger">(0) contacts</a>
        </li>
    </ul>
    <div class="clear"></div>
</div>

and the css for the contacts box:

/* CONTACTS LIST BOX */
#contacts_box { font-size:12px; width:200px; display:inline; float:left; text-align:left; height:305px; overflow:hidden; }
#contacts_header_bar { width:198px; height:15px; overflow:hidden; background-color:#39C; margin:0; padding:0;  }
#contacts_details { width:198px; height:55px; overflow:hidden; border:1px solid #404040; border-left:none; border-right:none; background-color:#F90; }
#contacts_list { height:240px; overflow:auto; background-color: #FCC;  }
#contacts_list ul { }
#contacts_list li { }
#contacts_list li a, #contacts_list li a:visited, #contacts_list li a:hover { text-decoration:none; color:#404040; display:block;  }
#contacts_list li a:hover { cursor:pointer; }
#contacts_list li span.con_name { display:block; width:145px; }
#contacts_list li span.con_status {}
#trigger_details { display:block; height:273px; border:1px solid #404040; background-color:#0C3; }
#trigger_wrapper { height:203px; width:198px; overflow:hidden;  }
#contacts_trigger_wrapper { width:198px; height:28px; border:1px solid #404040; background-color:#F4F4F4; }
#contacts_trigger { display:block; }
#contacts_trigger:active, #contacts_trigger:visited, #contacts_trigger:hover { color:#404040;  }
#force_online, #force_offline, #force_away { font-size:10px; text-decoration:none; color:#404040; width:15px; height:15px; display: block; float:left; margin-top:3px; }
#contacts_box #trigger_details .trigger { display:none; }

any help is much appreciated.

regards,

Phil

ansaurus

tags:

views:

answers:

Jumping link in ie6 and 7

related questions