IE6에서만 간격이 벌어져요..ㅡ.ㅜ

div id=wrap
div id=topWrap
h1img src=images/logo.gif alt= //h1
ul class=mainTop
liimg src=images/top_1.gif alt= //li
liimg src=images/top_2.gif alt= //li
liimg src=images/top_3.gif alt= //li
/ul
/div!-- //topWrap --
ul id=global
ul id=global
liimg onfocus=menuon(this) onblur=menuout(this) onmouseover=menuon(this) onmouseout=menuout(this) src=images/menu1_off.gif alt= //li
liimg onfocus=menuon(this) onblur=menuout(this) onmouseover=menuon(this) onmouseout=menuout(this) src=images/menu2_off.gif alt= //li
liimg onfocus=menuon(this) onblur=menuout(this) onmouseover=menuon(this) onmouseout=menuout(this) src=images/menu3_off.gif alt= //li
li class=end_childimg onfocus=menuon(this) onblur=menuout(this) onmouseover=menuon(this) onmouseout=menuout(this) src=images/menu4_off.gif alt= //li
/ul!-- //global --
/ul!-- //global --
p style=position：absolute;right: 0px;top:76px;img src=images/btn_10news.gif alt= //p
hr /
div id=visual
img src=images/main.jpg alt= /
/div!-- //visual --
hr /
/div!-- //wrap --

body {
background:url(../images/bg_body.gif) repeat-x;
margin: 0 auto;
}
div#wrap {
margin: 0 auto;
width: 967px;
position: relative;
}
div#topWrap {
width:967px;
height:63px;
position: relative;
}
div#topWrap h1{
position： absolute;
left: 333px;
top: 30px;
height:20px;
}
div#topWrap ul.mainTop {
position： absolute;
right: 0px;
top: 40px;
}
div#topWrap ul.mainTop li{
list-style:none;
display:inline;
}
ul#global {
width:px;
height:45px;
padding:0;
margin:0;
}
ul#global li{
display:inline;
background: url(../images/menu_bar.gif) no-repeat right 50%;
padding:0 35px;
}
ul#global li.end_child{
background: none;
}

두가지 질문이 있는데요...
하나는 역사관메뉴와 아래 핑크색 박스사이에 간격이 IE6에서만 생깁니다..ㅜ.ㅠ
3px벌어지는데 이게 왜이런걸까요?ㅜ.ㅜ
그리고 또한가지는 메뉴 li에 준 백그라운드바가 IE8과 FF에서만 아래그림처럼 밑으로 떨어지네요.
이건 또 왜그런걸까요?물론제가 잘못해서겠지만...--;;