nicht angemeldet
IE6 - borders sollen verschwinden...
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>
-
Om nah hoo pez nyeetz, frequent!
den IE6 sollte man nur unterstützen, wenn die Seite anderenfalls unbenutzbar wird. Ein unschöner Rahmen rechtfertigt dafür keinen Aufwand.
Matthias
--
-
Netter Spruch :-)
Dann fällt im IE6 wohl nichts aus dem Rahmen...
Grüße,
Frequent
Om nah hoo pez nyeetz, frequent!
den IE6 sollte man nur unterstützen, wenn die Seite anderenfalls unbenutzbar wird. Ein unschöner Rahmen rechtfertigt dafür keinen Aufwand.
Matthias
-