nicht angemeldet
Hallo,
ich sitze schon eine Weile über folgendem Problem:
Meine Navigationsleiste funktioniert nicht sauber im IE. Die runden Ecken habe ich untergebracht. Beim "Animieren" musste ich dabei "overflow: hidden" verwenden. Dadurch werden meine Navigationsleisten "eingerahmt".
Diesen border bzw. Rahmen bekomme ich nicht weg...
Weiß jemand fachkundigen Rat?
Schon mal vielen Dank.
Frequent
Online: http://www.franckreich.de/demo/members/test3.html
Quellcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
html
{
overflow:auto;
}
body
{
text-align: center;
margin: 0px;
padding: 0px;
}
ul#settingsbar li .sideburns
{
display: block;
margin: 0px;
padding: 1px;
text-align: left;
height: 65px;
background-color:#dcdcdc;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #c8c8c8;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
border-radius: 10px 0px 0px 10px;
}
ul#settingsbar
{
position: fixed;
margin: 0px;
padding: 0px;
bottom: 2%;
right: 20%;
list-style: none;
z-index:989;
}
ul#settingsbar li
{
width: 320px;
position: relative;
}
#babel
{
width: 192px;
}
#medusa
{
width: 320px;
}
</style>
<!-- rounded corners IE6,7,8 -->
<!--[if IE]>
<style type="text/css">
ul#settingsbar
{
text-align: left;
}
.sideburns
{
width: 100%;
position: relative;
text-decoration: none;
overflow: hidden;
/* -> BORDER bzw. RAHMEN KOMMT NUR WENN overflow:hidden VERWENDET WIRD */
}
.sideburns .tl2
{
position: absolute;
display: block;
height: 20px;
width: 20px;
left: -11px;
top: -11px;
background: url(../IMG/rnd42.gif) no-repeat;
}
.sideburns .bl2
{
position: absolute;
display: block;
left: -11px;
bottom: -11px;
height: 20px;
width: 20px;
background: url(../IMG/rnd42.gif) no-repeat;
}
* html .sideburns .tl2, * html .sideburns .bl2
{
margin: 0 0 0 0;
}
</style>
<script type="text/javascript">
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function')
{
window.onload = func;
} else {
window.onload = function()
{
if (oldonload)
{
oldonload();
}
func();
}
}
}
addLoadEvent( function(){addSideburns("sideburns");} )
addLoadEvent( function(){addCorners("boxer");} )
function addCorners(classname)
{
var a = []; var re = new RegExp('\\b' + classname + '\\b');
var els = document.getElementsByTagName("body")[0].getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
for (var i=0; i<a.length; i++)
{
var tr = document.createElement('span');tr.className="tr";
var tl = document.createElement('span');tl.className="tl";
a[i].insertBefore(tr, a[i].firstChild);
a[i].appendChild(tl);
}
}
function addSideburns(classname)
{
var a2 = []; var re2 = new RegExp('\\b' + classname + '\\b');
var els2 = document.getElementsByTagName("body")[0].getElementsByTagName("*");
for(var i2=0,j2=els2.length; i2<j2; i2++)
if(re2.test(els2[i2].className))a2.push(els2[i2]);
for (var i2=0; i2<a2.length; i2++)
{
var tl2 = document.createElement('span');tl2.className="tl2";
var bl2 = document.createElement('span');bl2.className="bl2";
a2[i2].insertBefore(tl2, a2[i2].firstChild);
a2[i2].appendChild(bl2);
}
}
</script>
<![endif]-->
</head>
<body >
<div class="wrapper">
<div id="fixed">
<ul id="settingsbar">
<li id="li3"><div class="sideburns">1</div></li>
<li id="li4"><div class="sideburns">2</div></li>
<li id="li5"><div class="sideburns">3</div></li>
<li id="li6"><div class="sideburns">4</div></li>
<li id="li7"><div class="sideburns">5</div></li>
<li id="li8"><div class="sideburns">6</div></li>
<li id="li1">
<div class="sideburns" id="babel">7</div>
</li>
<li id="li2">
<div class="sideburns" id="medusa">8</div>
</li>
</ul>
</div>
</div><!-- end wrapper -->
</body>
</html>