Dotted line around tab

**hugen** · 03-13-2009, 08:54 PM

1) Script Title: Tabbed Document Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...bdocviewer.htm

3) Describe problem: The whole script works fine (thank you) but when I klick a tab it shows a dotted line around the tab about 1 mm displaced. Did you hear about the problem before? I use intern links to move from one tabbed page to the other. I checked it with IE6 and 7.

Thanks.

**Snookerman** · 03-13-2009, 09:01 PM

I believe you are referring to the outline:
http://www.w3schools.com/CSS/pr_outline-style.asp

Try adding this to your CSS code:

Code:

a { 
outline-style: none;
}

However, I would not recommend this since the outline is important for people that browse using tabs.

Good luck!

**hugen** · 03-14-2009, 06:47 PM

Thank you for your help.
I prefer to send the image below to explain my problem once again because I am not sure if the dotted line is the 'outline' you were talking about. When I open the page with the iframes and the taps the dotted line is still not to see but when I klick a tab it appears and then it jumps from tab to tab.
Why does this happen and what can I do to get rid of it?

**ddadmin** · 03-15-2009, 03:27 AM

Yep that's the border (or dotted line) Snookerman was addressing. You can also try using this CSS to remove it:

Code:

a:active{
  outline: none;
}

FYI that dotted line basically appears in Firefox when you set focus to links on the page, via the keyword or mouse.

**hugen** · 03-15-2009, 08:46 AM

I tried both in the CSS code but it did not work. It shows still the border (dotted line).
When I use the original code from dynamic drive without any change it works.
Some more suggestion?

**Snookerman** · 03-15-2009, 10:34 AM

Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out and help you.

**hugen** · 03-15-2009, 11:51 AM

Thank you for you help.
The code starts with a login-script (php) that I have shorten. If you need the rest I can post it, too.

PHP Code:


<?php

error_reporting(E_ALL);

session_start(); // Session starten

.

.

if(!isset($_SESSION['loggedin'])){

.

.

?>

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>...</title>

<style type="text/css">

body{
background-image: url('images/wall.jpg');
margin-right: auto;
}

iframe{
background-color:#fff;
}

/*Eric Meyer's based CSS tab*/

#tablist{
	padding: 3px 0;
	margin-left: 0px;
	margin-bottom: 0;
	margin-top: 0.1em;
	font: bold 12px Verdana;
	margin-right: 0;
	text-align: center;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a:hover{
color: #000000;
background: #C1C1FF;
border-color: #227;
}

#tablist li a.current{
background: lightyellow;
}

</style>

<script type="text/javascript">

/***********************************************
* Tabbed Document Viewer script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var selectedtablink=""
var tcischecked=false

function handlelink(aobject){
selectedtablink=aobject.href
tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false
if (document.getElementById && !tcischecked){
var tabobj=document.getElementById("tablist")
var tabobjlinks=tabobj.getElementsByTagName("A")
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
document.getElementById("tabiframe").src=selectedtablink
return false
}
else
return true
}

function handleview(){
tcischecked=document.tabcontrol.tabcheck.checked
if (document.getElementById && tcischecked){
if (selectedtablink!="")
window.location=selectedtablink
}
}

</script>
</head>


<body>

<div align="center">


[PHP]<?php
// nicht eingeloggt ?
if(!isset($_SESSION['loggedin'])){
?>[/PHP]
<br >
<br >
<br >
<br >
<div align="center">
<form action="index.php" method="POST">
<table bgcolor="#C8CFB4">
<tr>
	<td colspan="2" align="center" bgcolor="#C8CFB4"><br><br>Login:</td>
</tr>
<tr>
	<td width="50%" bgcolor="#C8CFB4" style="height: 30px">Email:</td>
	<td width="50%" style="height: 30px"><input name="email" size="18" type="text" >
</tr>
<tr>
	<td width="50%" bgcolor="#C8CFB4">Password:</td><td width="50%"><input name="password" size="18" type="text" >
</tr>
<tr>
	<td colspan="2" align="center"><input type="submit" name="submit" value="submit" ></td>
</tr>
</table>
</form>
</div>
[PHP]<?php
}
// ansonsten: wenn eingeloggt:
else
{
?>[/PHP]
<ul id="tablist">
<li><a class="current" href="home.html" onClick="return handlelink(this)">HOME</a></li>
<li><a href="Seite1.php" onClick="return handlelink(this)">Person1</a></li>
<li><a href="Seite2.php" onClick="return handlelink(this)">Person2</a></li>
<li><a href="Seite3.php" onClick="return handlelink(this)">Person3</a></li>
<li><a href="Seite4.php" onClick="return handlelink(this)">Person4</a></li>
<li><a href="Seite5.php" onClick="return handlelink(this)">Person5</a></li>
<li><a href="index.php?logout=1">Logout</a></li>
</ul>
<iframe id="tabiframe" src="home.html" width="950px" height="550px" align="center"></iframe>
[PHP]<?php } ?>[/PHP]
</div>
</body>
</html>

**hugen** · 03-16-2009, 08:07 PM

Hello Snookerman,

Do you think you can help me or do you need more information?

Thanks.

**Snookerman** · 03-16-2009, 08:26 PM

I don't see the code in there. Add this to your css:

Code:

#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
outline-style: none;
}

Good luck!