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/ddtabme...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:

Code:

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

Code:

<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/ddtabme...ddtabmenu.html

**Snookerman** · 04-21-2009, 12:03 PM

IE doesn't support XHTML, try using a HTML doctype:

HTML Code:

<!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? Just remove the selfclosing tag here:

Code:

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

so it looks like this:

HTML Code:

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

and then change this:

Code:

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

to this:

HTML Code:

<html lang="en">

Now it should validate.

Good luck!

Thread: JS does not render CSS

Thread Tools

Search Thread

JS does not render CSS

The Following User Says Thank You to ddadmin For This Useful Post:

The Following User Says Thank You to Snookerman For This Useful Post:

Code invalid

Bookmarks

Bookmarks

Posting Permissions