View Full Version : names in list changing position on hover

12-07-2005, 08:50 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
#otherstaff {top:20px;left:50px;margin:0 0 0 5px;}

/* --------------------------------------------------------
Color schemes, especially for links */

#colorscheme_aboutus a:hover {color:#7E1C7E;}

#colorscheme_aboutus_staff a:hover {color:#7E1C7E;}

#colorscheme_aboutus_staff a {
font-family: verdana;
font-size: 12px;
text-decoration: none;
font-weight: bold;

#colorscheme_aboutus_staff li {
list-style-type: none;
margin-top: 10px;
text-indent: 0px;
line-height: 12px;
margin-left: -24px;
color: #FFFFFF;

#compact li {
margin-top: 2px;

/* --------------------------------------------------------
Right-hand menu */

#colorscheme_aboutus_staff #entity_qualifier {
color: #000000;
font-size: 10px;
line-height: 13px;
font-weight: normal;

#colorscheme_aboutus_staff a:hover, #colorscheme_aboutus_staff #highlighted {
background: url("images/menu/menuleft-square-purple.gif");
padding-left: 20px;
margin-left: -20px;
background-position: 7px 3px;
background-repeat: no-repeat;
/* As that _highlighted entry only makes the bullet purple, we also need
to make the text purple */

/* Right-hand menu */

#otherstaff h3 {
font-weight: normal;
font-family: Verdana;
font-size: 10px;
margin-top: 10px;
margin-left: 16px;
line-height: 12px;

#otherstaff ul {
margin-top: -8px; /* Less space between any heading and the list */
padding-top: 0px;


<div id="otherstaff">
<div id='colorscheme_aboutus_staff' >

<li><a href='#' id='danklores' >DAN KLORES<br />
<span id='entity_qualifier' >Chairman, Chief Executive Officer</span></a></li>
<li><a href='#' id='seanfcassidy' >SEAN F. CASSIDY<br />
<span id='entity_qualifier' >Managing Director, President</span></a></li>
<li ><a href='#' id='johnmarino' >JOHN MARINO<br />
<span id='entity_qualifier' >Managing Director, Managing Partner</span></a></li>

<li><a href='#' id='matthewtraub' >MATTHEW TRAUB<br />
<span id='entity_qualifier' >Managing Director, Chief of Staff</span></a></li>

<li><a href='#' id='joedeplasco' >Joe DePLASCO<br />
<span id='entity_qualifier' >Managing Director</span></a></li>

<h3>Executive Vice Presidents</h3>
<ul id='compact' >
<li><a href='#' id='lizanklow' >LIZ ANKLOW</a></li>
<li><a href='#' id='brucebobbins' >BRUCE BOBBINS</a></li>
<li><a href='#' id='dianebriskin' >DIANE BRISKIN</a></li>
<li><a href='#' id='jeffreyklein' >JEFFREY KLEIN</a></li>
<li><a href='#' id='robertleonard' >ROBERT LEONARD</a></li>
<li><a href='#' id='josephscottmiranda' >JOSEPH SCOTT MIRANDA</a></li>


bullet image is here http://www.geocities.com/sugata_bhar2002/html/images/menuleft-square-purple.gif

on rollover the other name entries are shifting below

How to stop them from changing position

12-07-2005, 08:56 AM
please also see http://www.geocities.com/sugata_bhar2002/html/test.html

12-07-2005, 10:34 AM
check, there must be margin-bottom or padding-bottm. in a: hover of that class. just remove that and see.

12-07-2005, 11:20 AM
Edit: Wrong Code