I'm having some problems with how my page menu shows in IE. Lots of overlapping. It's ok in Firefox though. Below is the code I used, hopefully it isn't too messed up. I know the bar color doesn't go all the way to the sides but I've found the solution to that and will change it. I've attached 2 graphics so you can see how it looks on both of them. It's the upper overlap that I'm concerned about.
What do i need to do to correct the problem in IE?
div#menu1 ul.rMenu {
background: transparent;
border: none;
}
div.widget ul li {
padding: 1px 5px 1px 14px !important;
background: url('<?php bloginfo('template_directory'); ?>/images/bullets/gray-arrow.gif') no-repeat 0 4px;
}
div.widget ul li a:hover {
text-decoration: underline;
}
/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 0px;
margin-top:0px;
background: 62250f;
}
/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background: 62250f;
border: 62250f; 5px;
}
/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li a:visited,
ul.rMenu li {
background: 62250f; !important;
color: #df9c32 !important;
}
/* ================================================== */
/* CSS for setting menu padding */
/* ================================================== */
ul.rMenu li {
padding: 0px 12px 0px 12px
}
ul.rMenu-ver li {
padding-top: 0px 12px 0px 12px
margin-top: 0px 0px 0px 0px;
}