# CSS div positioning ie and chrome conflict

**URL:** <https://forum.kirupa.com/t/css-div-positioning-ie-and-chrome-conflict/288544>\
**Category:** web dev\
**Created:** [May 18, 2009, 2:15am UTC](https://forum.kirupa.com/t/css-div-positioning-ie-and-chrome-conflict/288544 "2009-05-18T02:15:35Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![utsav](https://avatars.discourse-cdn.com/v4/letter/u/e19b73/32.png) [@utsav](https://forum.kirupa.com/u/utsav)\
**Post date:** [May 18, 2009, 2:15am UTC](https://forum.kirupa.com/t/css-div-positioning-ie-and-chrome-conflict/288544/1 "2009-05-18T02:15:35Z")

</div>

Well i made a css for menu that goes like this

```auto

#menus{
	height:33px; background:url(images/menu-bg.gif) 0 0 repeat-x;
	
	left:273px;
	border-top:dotted 1px #FFFFFF;
	position:absolute;
	top:92px;
	right:0px;
	vertical-align:middle;
}
.ul{
 height:25px; position:absolute; top:2px; left:5px;

}
.li{width:100px; height:28px; float:left; display:inline;font:14px Verdana, Arial, Helvetica, sans-serif;border-right:1px dotted #969260; text-align:center; vertical-align:middle;}

.li a{width:99px; height:28px; display:block; background:#fff; color:#2F2A28; border-right:1px dotted #969260; font:14px Verdana, Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; vertical-align:middle;}
.li a:hover{width:99px; height:28px; background:#2F2A28; color:#fff; border:none; text-decoration:none; font:14px Verdana, Arial, Helvetica, sans-serif; vertical-align:;}
.li:hover{

display:inline;
vertical-align:middle;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	border-right:1px dotted #969260;
	text-align:center;
}

```

now this displays the divison in place while viewing from IE7 but probably the \<li\> tag is lower than the main div by some 7-8px in google chrome. What do i do? Any hacks to fix this.