PDA

View Full Version : 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/dynamicindex3/tabdocviewer.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 (http://www.w3schools.com/CSS/pr_outline-style.asp)

Try adding this to your CSS 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?


http://my-basement-remodel.com/Tab_DocumentViewer.gif

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:


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? :confused:

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
error_reporting(E_ALL);
session_start(); // Session starten
.
.
if(!isset($_SESSION['loggedin'])){
.
.
?>
<!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
// nicht eingeloggt ?
if(!isset($_SESSION['loggedin'])){
?>
<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
}
// ansonsten: wenn eingeloggt:
else
{
?>
<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 } ?>
</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:

#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!

hugen
03-16-2009, 09:53 PM
Sorry, nothing changed. Also when I put
outline-style: none; in
#tablist li a as you told me. It still shows the dotted line.
Do you have another idea?

Thanks.

Snookerman
03-17-2009, 04:06 PM
Hmm.. could you post a link to the page where you are testing this?