after_link problems on wp_list_pages

im having a problem when putting a bar after the menu link…it shows perfectly on ff and ie7, but when the mouse is over the link, on ie7 looks terrible, could be css or any extra code inside de wp_list_pages, i cant figure it out!
heres my code:

<ul id="menu">
   <li><div class="barra"></div></li>
   <li><a href="<?php echo get_option('home'); ?>/">HOME</a></li>
   <li><div class="barra"></div></li>
   <?php  wp_list_pages('depth=1&title_li=&link_after=<li><div class="barra"></div></li>');?>
</ul>

and here is the css

.barra {
	background-image:url(images/menu_barra.jpg);
	width:2px;
	height:38px;
}
ul#menu {
	list-style: none;
	float: left;
	position: relative;
	margin: 0px;
	padding: 0px;
	width:auto;
}
ul#menu li {
	margin: 0 auto 0 auto;
	float: left;
	width:auto;
}

ul#menu li a:link{
	color: #1F80A2;
	text-decoration: none;
	padding: 15px 15px 11px 15px;
	font: 12px/100% Tahoma, Arial;
	display: block;
}
ul#menu li a:visited{
	color: #1F80A2;
	text-decoration: none;
	padding: 15px 15px 11px 15px;
	font: 12px/100% Tahoma, Arial;
	display: block;
}
ul#menu .current_page_item {
	color: #034463;
	background:url(images/active.png) no-repeat;
	background-position: bottom;
}
ul#menu a:active {
	color: #034463;
	background:url(images/active.png) no-repeat;
	background-position: bottom;

}
ul#menu a:hover {
	color: #034463;
	background:url(images/active.png) no-repeat;
	background-position: bottom;
}

here is the site link
https://www.assessortec.com/wp

what could it be?
(terrible english mine is! lol)