Menue pading isue ie 7 and below

[u4wm]

I have a site and I have a menu I rely like however it looks like crap in ie 7 and below do to a padding issue. If I take out the padding my text floats to the top. The padding is 20 in in div.outer a

#menu {
width: 200px;
height: 100px;
margin: 0 0; padding:0 0;
}

div.outer {
float: left;
width: 200px; height: 100px;
margin: 0 0 0 0;
background: url( '/img/msc/tan.jpg' ) 0 0 no-repeat;
}

div.outer a {
display: block;
margin: 0; padding:20px 0 0 0;
width:100%; height:100%;
overflow:hidden;
font: 22px/1 Arial, Helvetica, sans-serif;
color:#000;
text-decoration: none;
text-align: center;
background: url( '/img/msc/tan.jpg' ) top left no-repeat;
}
div.outer span {
display: block;
margin:0; padding: 0 0 0 0;
}
div.outer a:hover {
background-image: none;
font: 23px/1 Arial, Helvetica, sans-serif;
color: #00F;
background: url( '/img/msc/tan-glow.jpg' ) top left no-repeat;
}
div.outer a:active {
color: black;
}

[edited by: incrediBILL at 5:23 pm (utc) on July 7, 2009]
[edit reason] removed URLs, see TOS #13 [/edit]

[andrewsmd]

try padding-left: (or right top or bottom) depending on where you want the padding, I think the default is left, but try specifying it anyways. Also, do you have some html with it?