background image not appearing in Tab Content
1) Script Title:
Tab Content
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...tabcontent.htm
3) Describe problem:
This works fine on the DD site in Firefox, IE etc, but when I use this simplified version, I cannot get the background image to appear. I have the images in an images folder, and just for reference I am copying the tabcontent.css as well. The whole tab works just fine, I just can't get the background image to appear...any thoughts?
Code:
/*div.row {
clear: both;
padding-top: 1px;
}
div.row span.label {
float: left;
width: 140px;
padding: 2px;
padding-right:5px;
text-align: right;
}
div.row span.formw {
float: left;
width: 335px;
padding: 2px;
padding-left:5px;
text-align: left;
}
div.row span.formw2 {
float: left;
width: 600px;
padding: 2px;
text-align: left;
}
*/
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.shadetabs li{
display: inline;
margin: 0;
}
.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(images/shade.gif) top left repeat-x;
}
.shadetabs li a:visited{
color: #2d2b2b;
}
.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}
.shadetabs li.selected{
position: relative;
top: 1px;
}
.shadetabs li.selected a{ /*selected main tab style */
background-image: url(images/shadeactive.gif);
border-bottom-color: white;
}
.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}
.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 600px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block!important;
}
}
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>
<script language="JavaScript" src="scripts/AnchorPosition.js"></script>
<script language="JavaScript" src="scripts/date.js"></script>
<script language="JavaScript" src="scripts/PopupWindow.js"></script>
<script language="JavaScript" src="scripts/CalendarPopup.js"></script>
<script language="javascript" src="scripts/general.js"></script>
<!--
Milonic DHTML Website Navigation Menu Version 5.0+
Copyright 2006 (c) Milonic Solutions Limited (UK). All Rights Reserved.
Please visit http://www.milonic.com/ for more information.
Although this software may have been freely downloaded, you must obtain a license before using it in any production environment.
The free use of this menu is only available for Non-Profit, Educational & Personal Web Sites who have obtained a license to use.
Free, Commercial and Corporate Licenses are available from our website.
You also need to include a link back to http://www.milonic.com/ if you use the free license.
All Copyright notices MUST remain in place at ALL times.
This includes the first three lines of this notice on every page that uses the menu.
If you cannot comply with all of the above requirements, please contact us to arrange a license waiver.
-->
<!-- ***** This is the section of code you need to paste into your web pages ***** -->
<script type="text/javascript" src="scripts/milonic_src.js"></script>
<script type="text/javascript" src="scripts/mmenudom.js"></script>
<script language="javascript" src="scripts/tabcontent.js"></script>
<link rel="stylesheet" type="text/css" href="styles/tabcontent.css" /><title>
Untitled Page
</title></head>
<body>
<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjhkZEoAt0NrUNVwHpV828lGWbKuprBZ" />
</div>
<table width="800" border="1">
<tr>
<td>
</td>
<td>
<table align="center" cellspacing="0" style="border-color: Gray; border-style: solid;
border-width: 1px;" cellpadding="0" width="765">
<tr>
<td valign="top">
<!-- The next file contains your menu data, links and menu structure etc -->
<script type="text/javascript" src="scripts/menu_data.js"></script>
<!-- **** JavaScript Menu HTML Code -->
<br>
<br>
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td valign="top">
</td>
<td>
<ul id="maintab" class="shadetabs">
<li><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
</ul>
<div class="tabcontentstyle">
<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />
Tab content 1 here<br />
<p>
<b><a href="javascript: expandtab('maintab', 2)">Click here to select 3rd tab</a></b></p>
</div>
<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />
Tab content 2 here<br />
</div>
<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />
Tab content 3 here<br />
</div>
</div>
<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>
</td>
<td>
</td>
</tr>
</table>
</form>
</body>
</html>
