Relative position within LI in IE 7

[cohq82]

I have this problem using relative position (or maybe something else). Basically I have a menu with each item is an LI. Within LI there are A element and DIV for the arrow if needed. I have problem lining up the arrow in the middle of each LI for IE7. It works fine in FF or IE8

Can you help me to make the arrow in the middle of each LI in IE7? I don't want to use absolute positioning because the page may change. Thanks

Below is the link
http://innovie.com/csserror/aa.html

This is the code

<div id="container">
  <div id="help-menu">
  	<ul id="help-nav">
    	<li id="help-1">
      	<a href="#"></a>
        <div id="help-arrow"></div>
      </li>
    	<li id="help-2">
      	<a href="#"></a>
      </li>
    	<li id="help-3">
      	<a href="#"></a>
      </li>
    	<li id="help-4">
      	<a href="#"></a>
      </li>
    </ul>
  </div>

#help-menu {
	display:block;
	float:left;
	width:900px;
	height:76px;
	margin-top:0px;
	margin-bottom:20px;
}

#help-nav {
	display:block;
	float:left;
	width:900px;
	height:60px;
}

#help-nav li {
	display:block;
	float:left;
	height:76px;
}

#help-1 {
	display:block;
	float:left;
	height:76px;
	width:236px;
}

#help-1 a, #help-1 a:hover {
	background:url(../aa_files/help_menu.gif) 0 0 no-repeat;
	display:block;
	float:left;
	width:236px;
	height:60px;
	cursor:pointer;
}

#help-1 a:hover {
	background:url(../aa_files/help_menu.gif) 0 -60px no-repeat;
}

#help-2 a, #help-2 a:hover {
	background:url(../aa_files/help_menu.gif) -236px 0 no-repeat;
	display:block;
	float:left;
	width:192px;
	height:60px;
	cursor:pointer;
}

#help-2 a:hover {
	background:url(../aa_files/help_menu.gif) -236px -60px no-repeat;
}

#help-3 a, #help-3 a:hover {
	background:url(../aa_files/help_menu.gif) -428px 0 no-repeat;
	display:block;
	float:left;
	width:241px;
	height:60px;
	cursor:pointer;
}

#help-3 a:hover {
	background:url(../aa_files/help_menu.gif) -428px -60px no-repeat;
}

#help-4 a, #help-4 a:hover {
	background:url(../aa_files/help_menu.gif) -669px 0 no-repeat;
	display:block;
	float:left;
	width:231px;
	height:60px;
	cursor:pointer;
}

#help-4 a:hover {
	background:url(../aa_files/help_menu.gif) -669px -60px no-repeat;
}

#help-wrap {
	display:block;
	float:left;
	width:900px;
	padding-left:20px;
	padding-right:20px;
	margin-bottom:20px;
}

#help-arrow {
	background:transparent url(../aa_files/help_arrow.gif) no-repeat scroll 0 0;
	position:relative;
	height:16px;
	width:26px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:59px;
}

[Andyram2k]

Hi Cohq82,
You can use absolute positioning, especially for menus. All you would do is set your LI tag to have the position relative, and then absolutely position your arrow div, with the left / top values. When this div is put inside the LI, it'll be absolutely positioned to that LI only, so it wont matter if your layout changes.

<LI id=help-1>
<div class="help-arrow"></div>
<A href="http://innovie.com/csserror/aa.html#"></A>
</LI>

Also, don't forget to change your help-arrow to be a class, instead of an ID, as it will be repeated.

Hope this helps

- Andy.