
Additional border added in IE7
Hi,
Having a slightly strange problem with creating curved corners for a set of list items using PIE and IE7. You'll see the navigation elements at
http://cabotfinancial.ib3.co.uk/. You'll notice the first and last items in the navigation bar have a 1px white border around them in addition to the rounded corners. The actually size of these elements has also been reduced by 1px. The CSS used to generate the bar is as follows:
Code:
#menuBar { clear: both; margin: 0 0 25px 0; height: 46px; }
#menuBar, #menuBar ul { padding: 0; margin: 0; list-style: none; line-height: 45px; }
#menuBar a { display: block; color: #fff; font-size: 1.3em; font-weight: bold; }
#menuBar li { float: left; width: 153px; text-align: center; background: transparent url(/images/nav-button-off.png) no-repeat top center; }
#menuBar li ul { position: absolute; background: orange; width: 10em; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ }
#menuBar li ul li { background: orange; }
#menuBar li ul ul { margin: -1em 0 0 10em; }
#menuBar li:hover ul ul, #menuBar li:hover ul ul ul, #menuBar li.sfhover ul ul, #menuBar li.sfhover ul ul ul { left: -999em; }
#menuBar li:hover ul, #menuBar li li:hover ul, #menuBar li li li:hover ul, #menuBar li.sfhover ul, #menuBar li li.sfhover ul, #menuBar li li li.sfhover ul { /* lists nested under hovered list items */ left: auto; }
#menuBar ul li.first { -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0px 0px 5px; behavior: url(/compat/PIE.php); position: relative; }
#menuBar ul li.last { -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; behavior: url(/compat/PIE.php); position: relative; }
Trying me slightly potty this one. I can find an alternative solution using different background images but as PIE is used/going to be used in other elements it would be nice to use that here as well.
Any pointers would be gratefully received.
Thanks