PDA

View Full Version : JS does not render CSS



dbldee
04-11-2009, 03:01 AM
1) Script Title: DDTab menu
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

3) Describe problem: Attempted to customise the tab memu.
files uploaded to server,but the CSS does not display the tabs

http://freelinksexchange.net/ddtabmenufiles/ddtabmenu.html

ddadmin
04-11-2009, 06:46 AM
The paths to the .js and .css files of the script on your page appears to be broken. Make sure they are correct, that is, correctly references the two files on yours server.

dbldee
04-11-2009, 01:07 PM
All files are in the same directory
ddtabmenufiles/ddtabmenu.css
ddtabmenufiles/ddtabmenu.js

Change from relative to absolute urls reflects no change

ddadmin
04-11-2009, 08:01 PM
Hmm that's strange. What happens if you directly add the CSS to the page in the HEAD section of your page:


<style type="text/css">

.basictab ul{
margin: 4px;
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}

.basictab li a:visited{
color: #2d2b2b;
}

.basictab li a:hover, .basictab li a.current{
background-color: #DBFF6C;
color: black;
}

.basictab li a:active{
color: black;
}

.tabcontainer{
clear: left;
width:95%; /*width of 2nd level sub menus*/
height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
}

.tabcontent{
display:none;
}

</style>

BTW, there's an error in your JavaScript code. The following lines in red should be removed, as you're only showing one menu:


<script type="text/javascript">
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
ddtabmenu.definemenu("ddtabs1", 0) //initialize Tab Menu #1 with 1st tab selected
ddtabmenu.definemenu("ddtabs2", 1) //initialize Tab Menu #2 with 2nd tab selected
ddtabmenu.definemenu("ddtabs3", 1) //initialize Tab Menu #3 with 2nd tab selected
ddtabmenu.definemenu("ddtabs4", 2) //initialize Tab Menu #4 with 3rd tab selected
ddtabmenu.definemenu("ddtabs5", -1) //initialize Tab Menu #5 with NO tabs selected (-1)

</script>

dbldee
04-12-2009, 12:25 AM
With the CSS added to the head section, the style is displayed, however the contents of the 2nd level do not display.
NB since files are in the same directory the script could be called directly
<script type="text/javascript" src="ddtabmenu.js">

dbldee
04-21-2009, 11:53 AM
The page does not show in IE8
http://freelinksexchange.net/ddtabmenufiles/ddtabmenu.html

Snookerman
04-21-2009, 12:03 PM
IE doesn't support XHTML, try using a HTML doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Good luck!

dbldee
04-22-2009, 01:26 PM
The pages now renders in both FF3 and IE8, but for some unknown reason, the html code appears as invalid and cannot be edited in editor?

Suggestions appreciated

Snookerman
04-22-2009, 01:35 PM
Do you mean it doesn't validate (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ffreelinksexchange.net%2Fddtabmenufiles%2Fddtabmenu.html)? Just remove the selfclosing tag here:

<link rel="stylesheet" type="text/css" href= "ddtabmenu.css" />

so it looks like this:

<link rel="stylesheet" type="text/css" href= "ddtabmenu.css">

and then change this:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

to this:

<html lang="en">

Now it should validate.

Good luck!