Log in

View Full Version : DD tabs menu in IE


Master Duckling
04-01-2006, 07:45 AM
Script: DD Tab Menu
http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

And here is the error:

http://duckz.nl/redone/

It views well in Firefox. but in IE it gets this at the top of the page:


') function expandcontent(cid, aobject){ if (disabletablinks==1) aobject.onclick=new Function("return false") if (document.getElementById){ highlighttab(aobject) if (turntosingle==0){ if (previoustab!="") document.getElementById(previoustab).style.display="none" document.getElementById(cid).style.display="block" previoustab=cid } } } function highlighttab(aobject){ if (typeof tabobjlinks=="undefined") collecttablinks() for (i=0; i

This is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Duckz.nl :: Creativity&amp;Design</title>
<style type="text/css">
<!--
body {
background-color: #f5f4f3;
margin-top: 0px;
margin-bottom: 10px;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
}
.style2 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
}
a {
font-size: 10px;
color: #999999;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #CCCCCC;
}
a:active {
text-decoration: none;
color: #999999;
}

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

#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.current{
background: lightyellow;
}

#tabcontentcontainer{
width:480px;
height:40px;
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* DD Tab Menu 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
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=1 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes

////////Stop editting////////////////

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById){
highlighttab(aobject)
if (turntosingle==0){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(){
collecttablinks()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

</script>
<body>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0" background="images/mainbg.gif">
<tr>
<td height="67" colspan="3" valign="top" scope="col"><img src="images/header.gif" width="750" height="67"></td>
</tr>
<tr>
<td width="15" valign="top">&nbsp;</td>
<td width="720" valign="top"><table width="720" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col"><img src="images/headerpic.gif" width="720" height="146"></th>
</tr>
<tr>
<td height="23" align="center" valign="middle" background="images/navbar.gif"><ul id="tablist"><table width="80%" valign="middle" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50" scope="col"><div align="center"><a href="index.php" onMouseover="expandcontent('sc1', this)">HOME</a></div></td>
<td scope="col"><div align="center"><a href="forums/index.php" onMouseover="expandcontent('sc2', this)">FORUMS</a></div></td>
<td scope="col"><div align="center"><a href="index.php?p=tutorialsindex" onMouseover="expandcontent('sc3', this)">TUTORIALS</a></div></td>
<td scope="col"><div align="center"><a href="index.php?p=resourceindex" onMouseover="expandcontent('sc4', this)">RESOURCES</a></div></td>
<td scope="col"><div align="center"><a href="index.php?p=affiliates" onMouseover="expandcontent('sc5', this)">AFFILIATES</a></div></td>
<td scope="col"><div align="center"><a href="#" onMouseover="expandcontent('sc6', this)">PORTFOLIOS</a></div></td>
<td scope="col"><div align="center"><a href="#" onMouseover="expandcontent('sc7', this)">WEBDESIGN</a></div></td>
<td scope="col"><div align="center"><a href="#" onMouseover="expandcontent('sc8', this)">CONTACT</a></div></td>
</tr>
</table>
</ul>
</td>
</tr>
<tr>
<td valign="middle" bgcolor="#E4E0DC"><div align="center"><DIV id="tabcontentcontainer">
<div id="sc1" class="tabcontent"></div>
<div id="sc2" class="tabcontent">Forum Index | Log in | Register</div>
<div id="sc3" class="tabcontent">Photoshop | PHP & MySQL | Imageready | Cinema 4D | Macromedia Flash | Photography | Member Tutorials</div>
<div id="sc4" class="tabcontent">Brushes | Wallpapers | PSD's | Other</div>
<div id="sc5" class="tabcontent">View All | Apply For Affiliation</div>
<div id="sc6" class="tabcontent">Master Duckling | Tum | Reignofchaoz</div>
<div id="sc7" class="tabcontent"></div>
<div id="sc8" class="tabcontent"></div>
</DIV></div></td>
</tr>
<tr>
<td valign="middle"><?
$val = $_GET['p']; // Replace id with whatever you want to use, eg ?id=page
$val .= ".php"; // Makes the filename complete so if you called ?id=index, it would be index.php it has to look for
$dirty = array("..");
$clean = array("");
$val = str_replace($dirty, $clean, $val); // Prevent people from viewing root files like your password (should work i just quikly added it without testing)

if (isset($_GET['p'])) { // Replace id with whatever you want to use, eg ?id=page
if (file_exists($val)) { // This checks if the file you are trying to call exists
include "$val";
}
else {
include "404.php"; // If the file doesnt exists it calls your 404 error page
}
}
else {
include "home.php"; // If ?id= is not set it will now go to your news page
}

// Include this script in your content area
// Run ?id=pagename (without .php) to view a page
?></td>
</tr>
</table></td>
<td width="15" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="23" colspan="3" valign="bottom"><table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="15" height="23" scope="col"><img src="images/bcorner1.gif" width="15" height="23"></th>
<th scope="col"><table width="720" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="720" height="17" align="right" background="images/footer.gif" scope="col"><span class="style2"> l Duckz.nl l By Lex Haitsma Mulier l </span></td>
</tr>
<tr>
<td width="720" height="6"><img src="images/bshadow.gif" width="720" height="6"></td>
</tr>
</table></th>
<th width="15" height="23" scope="col"><img src="images/bcorner2.gif" width="15" height="23"></th>
</tr>
</table></td>
</tr>
</table>
<div align="center"><br>
</div>
</body>
</html>


Thx in advance :)

Ducky
jscheuer1
04-02-2006, 04:59 AM
You open an HTML comment block, presumably to 'hide' the style from 'older browsers':


<style type="text/css">
<!--
body {

But, it doesn't get closed above the end of the style section here:


.tabcontent{
display:none;
}

</style>

This type of 'hiding' is useless except to trick the validator, if that is a concern and you need to do that for some reason. In any case, the way you have it, any browser or validation program would be within its rights (if trying to follow the code) to think everything after that on your page is a comment. Try just getting rid of that red part and see what happens.
Master Duckling
04-02-2006, 06:49 AM
YES!! its fixed!!! i love you dude