background position not working in internet explorer 6 or 7, but works in Firefox, Opera and Safari

hi,

i am some what inexperienced at making a website and i have an issue with my portfolio site.

i added a background position for a border that will extend from an image i have in the left column. it's not working in internet explorer 6 or 7, but works in Firefox, Opera and Safari.

i validated my css and it came up fine. the url is: www.derdoolb.com/portfolio04.html

also when i view the site in IE 6 and IE 7, my "mainstage" area is extended lower than when viewed in Firefox, Opera and Safari.

i have tried different variations with the background position and still no luck.

the issue is in the "#leftcol" portion of my css.

any feedback would be great.

Thanks!

here is my css:

/* Universal selector */
/* Remove all default margins and padding */
* {
margin: 0;
padding: 0;
}

.clear {
clear: both;
}
html {border:0;}

body {
background-image: url(pics/cork.jpg);

}

#branding {
position: relative;
}

#branding h1{

}

#container {
width:55em;
background-image: url(pics/cork.jpg);
margin: 0 auto;
}

#mainstage {
margin-left: 18em;
margin-right: 5em;
text-align: left;
position: relative;
background-image: url(pics/mainbg.gif);
}

#mainstage p {
padding: 0 1em 1em 1em;
font-family: Times "Times Roman" georgia serif;
font-size: 12pt;
}

#mainstage h1 {
padding-left: .25em;
padding-bottom: 10px;
padding-top: 0;
font-family: Arial, Helvetica, sans-serif;

}

#rightcol {
float: right;
width: 4em;
position: relative;
text-align: left;
height:auto;
}

#leftcol {
float: left;
width: 18em;
position: relative;
text-align: left;
background: url(pics/whitebar.gif) right repeat-y;
height:auto;
}

#leftcol img{
display: block;
}

#leftcol h1{
padding-left: 2em;
padding-bottom: 10px;
padding-top: 0;
font-family: Arial, Helvetica, sans-serif;
}

#leftcol ul{
font-family: sans-serif;
list-style-type: none;
padding-left: 2em;

}

#leftcol li{
line-height: 5em;
display: block;
}

#leftcol a:hover,
#leftcol a:active
#leftcol a,
#leftcol a:link,
#leftcol a:visited{
margin-left: 2em;
outline-style:none;
border: none;
}

#leftcol a,
#leftcol a:link,
#leftcol a:visited{
text-decoration: none;
color: #000;
display:block;
}

#leftcol a{
padding-left: 1em;
}

#leftcol a:hover,
#leftcol a:active,
#leftcol li.current a:link,
#leftcol li.current a:visited{
color: #000;
position: relative;
display: block;

}

#leftcol a:hover,
#leftcol a:active{
color:#000;
}

#footer {
clear: both;
text-align: left;
}

#footer p {
text-align: center;
}

h1 {
font-family: Arial, Helvetica, sans-serif;
}

#head{
width: 55em;
padding: 1em;
text-align: center;
}

#head img{
vertical-align: middle;
text-align: center;
}