Results 1 to 4 of 4

Thread: background image not appearing in Tab Content

  1. #1
    Join Date
    Mar 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

  2. #2
    Join Date
    Feb 2007
    Location
    North Vancouver, BC, CANADA
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Change this, it might work, though I haven't tested it.

    .shadetabs li a{
    text-decoration: none;
    padding: 3px 7px;
    margin-right: 3px;
    border: 1px solid #778;
    color: #2d2b2b;
    background-image: white url(images/shade.gif) top left repeat-x;
    }

  3. #3
    Join Date
    Mar 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you, but that does not work. The other values (white top left repeat-x) are not valid for background-image. Thanks though..

  4. #4
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Can you post a link to your problem page? It may be something such as the image not uploaded or something pointing to the wrong file.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •