PDA

Click to See Complete Forum and Search --> : Where are my button outlines going?

JMRKER
06-06-2009, 12:15 AM
In the following script, the initial display is nearly as I want it, but ... :confused:

1. When I click on a tab button, I loose the outlines around the buttons.
I'm assuming I'm doing something wrong with the CSS.
Anyone have any idea?

2. There is a gap between the buttons and the tab content.
Is that because I'm using a table for the button layout?
Is it possible to loose the gap with some combination of margin or padding?


<html>
<HEAD>
<title>Tab Buttons</title>

<style type="text/css">
.tabsPos { position:relative; top:50px; left:150px; }
.tabsBtn { font-size:1.2em; }
.tabsDiv { border:1px solid blue;
height:300px;
width:500px;
margin-top:0px;
padding-top:0px;
color:black;
font-size:1.1em;
overflow:auto;
background-color:orange; }
</style>

<script type="text/javaScript">
// Extensively modified from: http://javascript.internet.com/navigation/tab-nav.html

var tabsMenu = ['News','Games','Entertainment'];
var tabsContent = new Array();
tabsContent[0] = 'This is the "News" tab';
tabsContent[1] = 'This would be the "Games" tab';
tabsContent[2] = 'This is the "Entertainment" tab';

function drawTabs() {
var str = "<table border=0><tr>";
for (var x = 0; x < tabsMenu.length; x++) {
str += "<td><input type='button' id='tab"+x+"' onclick='switchTab("+x+")'";
str += " class='tabsBtn' value='"+tabsMenu[x]+"'></td>";
}
str += "</tr></table>";
str += "<div id='currenttab' class='tabsDiv'>"+tabsContent[0]+"</div>";
document.write(str);
}

function switchTab(tab) {
for (var x = 0; x < tabsMenu.length; x++) {
tabx = 'tab'+x;
if (x != tab) { document.getElementById(tabx).style.backgroundColor = "#ffffff"; }
}
tabx = 'tab'+tab;
document.getElementById(tabx).style.backgroundColor = "orange";
document.getElementById('currenttab').innerHTML = tabsContent[tab];
}
</script>
</HEAD>
<BODY>
<div class="tabsPos">
<script>drawTabs();</script>
</div>
</body>
</html>
maneetpuri
06-06-2009, 03:23 AM
Hi

Below is the edited version of your code which you can use to resolve the border problem, I have marked the changes in red.


<html>
<HEAD>
<title>Tab Buttons</title>

<style type="text/css">
.tabsPos { position:relative; top:50px; left:150px; }
.tabsBtn { font-size:1.2em; border:1px solid grey; }
.tabsDiv { border:1px solid blue;
height:300px;
width:500px;
margin-top:0px;
padding-top:0px;
color:black;
font-size:1.1em;
overflow:auto;
background-color:orange; }
</style>

<script type="text/javaScript">
// Extensively modified from: http://javascript.internet.com/navigation/tab-nav.html

var tabsMenu = ['News','Games','Entertainment'];
var tabsContent = new Array();
tabsContent[0] = 'This is the "News" tab';
tabsContent[1] = 'This would be the "Games" tab';
tabsContent[2] = 'This is the "Entertainment" tab';

function drawTabs() {
var str = "<table border=0 cellpadding=0 cellspacing=0><tr>";
for (var x = 0; x < tabsMenu.length; x++) {
str += "<td><input type='button' id='tab"+x+"' onclick='switchTab("+x+")'";
str += " class='tabsBtn' value='"+tabsMenu[x]+"'></td>";
}
str += "</tr></table>";
str += "<div id='currenttab' class='tabsDiv'>"+tabsContent[0]+"</div>";
document.write(str);
}

function switchTab(tab) {
for (var x = 0; x < tabsMenu.length; x++) {
tabx = 'tab'+x;
if (x != tab) { document.getElementById(tabx).style.backgroundColor = "#ffffff"; }
}
tabx = 'tab'+tab;
document.getElementById(tabx).style.backgroundColor = "orange";
document.getElementById('currenttab').innerHTML = tabsContent[tab];
}
</script>
</HEAD>
<BODY>
<div class="tabsPos">
<script>drawTabs();</script>
</div>
</body>
</html>
JMRKER
06-06-2009, 09:28 AM
Thank you Maneet. That did take care of the problem with the button borders disappearing.

I was trying to use the rounded corners of the default button that are originally displayed, but disappeared when the button was clicked.
Now the borders remain but they are sharp points.

Your solution will work, and I appreciate it. It also fixed
the gap between the tab buttons and the tab content displayed

But, just being curious, what in the CSS is changing the original button displayed when clicked?

Again, thank you!