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