The panels with the class="panel" are shifted to the right in FireFox, thought in IE6.0 it's shown right below the tabs (aspx .net page).
How to make them look the same in both browsers?
Thanks a lot
WebForm1
.toggle{background:#e6e7e9; width: 100%; height:17px; border-bottom:1px solid #a5b2bd; }
.toggle ul{float:left; margin:0; padding:0; list-style:none; width:550px; }
.toggle li{float:left; font-family:verdana; display:block; padding-bottom:7px; }
.toggle li a{float:left; display:block; text-decoration:none; color:#003DB8 ; }
.toggle li a:visited{color:#003DB8 ; text-decoration:none;}
.toggle li a:hover{text-decoration:underline; }
.toggle li em{float:left; display:block; padding:0 4px; font:10px verdana; margin:8px 0 0 0; font-style:normal; color:#003DB8 ; border-right:1px solid #666; cursor:pointer; }
.toggle li.on{background:url(images/ptr.gif) bottom center no-repeat; }
.toggle li.on a{color:#fff; background:#a5b1bd url(images/tab_left.gif) no-repeat; padding-left:3px; text-decoration:none; }
.toggle li.on a:visited{color:#fff; text-decoration:none;}
.toggle li.on a:hover{text-decoration:none; }
.toggle li.on em{background:#a5b1bd url(images/tab_right.gif) no-repeat top right; margin:0; padding:8px 7px 5px 4px; border:none; font-weight:bold; color:#fff; }
a.tab { border-collapse: collapse; border-style: solid solid none solid; border-color: black; border-width: 1px 1px 0px 1px; background-color: silver; padding: 2px 0.5em 0px 0.5em; margin-top: 4px; font-family: arial; text-decoration: none; }
a.tab:hover { border-color: black; background-color: white; }
.panel { border: solid 1px LightSteelBlue; background-color: white; padding: 2px; height: 250px; width:100%; overflow: auto;}
var panels = new Array('panel1', 'panel2');
var lis = new Array('li1', 'li2');
var selectedTab = null;
function showPanel(tab, name, li)
{
selectedTab = tab;
for(j = 0; j < lis.length; j++)
{
document.getElementById(lis[j]).className = (li == lis[j]) ? 'on':'';
}
for(i = 0; i < panels.length; i++)
{
document.getElementById(panels[i]).style.display = (name == panels[i]) ? 'block':'none';
}
return false;
}
tab1
tab2
panel2
I've edited your post to add
I've edited your post to add in code tags, but please please PLEASE read the forum rules (the pinky topics at the top of EVERY forum) before we continue
I'm sorry. I see the tags
I'm sorry. I see the /code/ tags you've added are necessary.
No solution for my problem yet, right?
Thanks
Have you tried the complete
Have you tried the complete doctype one? That's one of my faves.
Hi Apart from the fact that
Hi
Apart from the fact that you have coding errors, the quick fix is to add clear:both to the .panel class
thepineapplehead wrote:Have
Have you tried the complete doctype one? That's one of my faves.
w00t - i've always been a fan of this quick fix!
thanks a million. clear:both
thanks a million. clear:both works fine.
vikavika wrote:thanks a
thanks a million. clear:both works fine.
Glad you got it sorted, but you really could do with a complete doctype