steffen: Bei hinzufügen von runden Div-Ecken fehler im ie7 durch border

Beitrag lesen

Guten Abend,

habe ein Problem mit dem lieben IE7.

Und zwar benutze ich das jquery plugin - curvycorners
Plugin

alles Funktioniert wunderbar, auch mit border, aber bei meinem Menu geht es nicht.

Hier der HTML-Code

   <div id="navigationDiv">  
    <div class="menuPlaceholder" id="menuPlaceholder1"> </div>  
     <div class="menuPlaceholder"></div>  
    <div class="menuTabs" id="menuTab1"><span><a>Start</a></span></div>  
     <div class="menuPlaceholder"></div>  
    <div class="menuTabs" id="menuTab2"><span id="current"><a>Team</a></span></div>  
     <div class="menuPlaceholder"></div>  
    <div class="menuTabs" id="menuTab3"><span><a>Anfahrt</a></span></div>  
     <div class="menuPlaceholder"></div>  
    <div class="menuTabs" id="menuTab4"><span><a>Angebote</a></span></div>  
     <div class="menuPlaceholder"></div>  
    <div class="menuTabs" id="menuTab5"><span><a>Kontakt</a></span></div>  
    <div class="menuPlaceholder" id="menuPlaceholderLast"></div>  
    <div id="navigationLineDiv1"></div>  
   </div> 

CSS: ~~~css #navigationDiv {
 margin: 0 auto;
 width: 860px;
 background: url(images/mainDivShadow.gif);
 padding-top: 25px;
 }

.menuTabs {
 height: 18px;
 /border: 1px solid #999;/ WENN DIESER BORDER AUSKOMMENTIERT IST GEHTS
 float:left;
 height: 18px;
 font-weight: bold;
 font-size:1.1em;
 color: #777;
 background: url(images/tabBackground.gif) repeat-x;
 }

.menuPlaceholder {
 width: 2px;
 float: left;
 height: 18px;
 background: url(images/menuPlaceholderBackground.gif);
 }

#menuPlaceholder1 {
 width: 3px;
 background: transparent;
 }

#menuPlaceholderLast {
 width: 409px;
 }

.menuTabs span{display: block;}

/* Animation */
.menuTabs span:hover {
 color:#427bd6;
 cursor: default;
 }

#current{
 background: url(images/tabBackgroundActive.gif) repeat-x bottom;
 border-bottom: 2px solid #cfcfcf;
 color: #427bd6;
 }
/* Animation End */

#menuTab1{width:75px;}
#menuTab2{width:75px;}
#menuTab3{width:90px;}
#menuTab4{width:95px;}
#menuTab5{width:90px;}
#menuTab6{width:90px;}

#navigationLineDiv1 {
 margin: auto;
 height: 2px;
 width: 854px;
 background: #cfcfcf;
 clear: left;
 }

  
  
JS:  
~~~java
$(function() {  
  $('#openingHoursDiv').corner(  
   {  
    tl: { radius: 15 },  
    tr: { radius: 15 },  
    bl: { radius: 15 },  
    br: { radius: 15 },  
    antiAlias: true,  
    autoPad: true,  
    validTags: ["div"]  
   });  
  
 $('#borderDiv').corner(  
   {  
    tl: { radius: 0 },  
    tr: { radius: 0 },  
    bl: { radius: 15 },  
    br: { radius: 15 },  
    antiAlias: true,  
    autoPad: true,  
    validTags: ["div"]  
   });  
  
 $('.menuTabs').corner(  
   {  
    tl: { radius: 5 },  
    tr: { radius: 5 },  
    bl: { radius: 0 },  
    br: { radius: 0 },  
    antiAlias: true,  
    autoPad: true,  
    validTags: ["div"]  
   });  
 });  

Hat jemand eine Ahnung woran das liegen kann?

In FF3 und Opera 9 gehts ohne anstand.

Danke im Vorraus
Gruß Steffen