locked
Cannot access background images for the TabContainer style RRS feed

  • Question

  • User-1691979634 posted

    Hi!

       I have place a tabcontainer with tabpanels on an aspx page.  I'm using Visual Studio 2017 and installed the latest version of the Ajax Toolkit.

       At the top of the page, I've placed a CSS style to customize the tabs.

       I made sure that the AjaxControlToolkit is a registered assembly on that page.

       I have placed the name of the CSS style in the tabcontainer properties, and the control is recognizing the style to a certain extent.  I'm able to change some aspects of the style such as the font color and a few other things.  However, it isn't using the images I'm referencing as the background.

       I have tried placing these images everywhere I possibly can, but it's just not finding them.  I've put them directly in the same folder as the aspx file I'm calling.  I've created an images folder below that.  I even placed a copy of the images folder above that   The only images being used are the default images for the XP theme.  I have no clue where those images are stored aside from the SampleSite that came with the AjaxToolkit.

       I've tried  .../images        .../.../images    I've tried it with quotation marks  (both double and single) and without, and no matter how I try to reference these images, it just isn't working.  I've even tried referencing the images directly with no relative path at all after placing them in the same folder as the aspx file, and that isn't working either.

       It's as though the control is refusing to use anything but its default images.  I hope someone here can help.

        <style type="text/css">
            .Tab .ajax__tab_header {
                color: #4682b4;
                font-family: Arial;
                font-size: Small;
                font-weight:200;
                background-color: #ffffff;
                margin-left: 0px;
                margin-top:10px;
                margin-bottom: 10px;
                height:35px;
            }
            /*Body*/
            .Tab .ajax__tab_body {
                border: 1px solid #b4cbdf;
                padding-top: 0px;
            }
            /*Tab Active*/
            .Tab .ajax__tab_active .ajax__tab_tab {
                color: #000000;
                font-size: small;
                background: url('images/tab_active.gif') repeat-x;
                height: 25px;
                margin-top:10px;
                margin-bottom: 10px;
            }

            .Tab .ajax__tab_active .ajax__tab_inner {
                color: #666666;
                background: url('images/tab_left_active.gif') no-repeat left;
                padding-left: 10px;
            }

            .Tab .ajax__tab_active .ajax__tab_outer {
                color: #ffffff;
                background: url('images/tab_right_active.gif') no-repeat right;
                padding-right: 6px;
            }
            /*Tab Hover*/
            .Tab .ajax__tab_hover .ajax__tab_tab {
                color: #000000;
                background: url('images/tab_hover.gif') repeat-x;
                height: 25px;
                margin-top:10px;
                margin-bottom: 10px;
            }

            .Tab .ajax__tab_hover .ajax__tab_inner {
                color: #000000;
                background: url('images/tab_left_hover.gif') no-repeat left;
                padding-left: 10px;
            }

            .Tab .ajax__tab_hover .ajax__tab_outer {
                color: #000000;
                background: url('images/tab_right_hover.gif') no-repeat right;
                padding-right: 6px;
            }
            /*Tab Inactive*/
            .Tab .ajax__tab_tab {
                color: #666666;
                font-size: small;
                background: url('images/tab_Inactive.gif') repeat-x;
                height: 25px;
                margin-top:10px;
                margin-bottom: 10px;
            }

            .Tab .ajax__tab_inner {
                color: #666666;
                background: url('images/tab_left_inactive.gif') no-repeat left;
                padding-left: 10px;
            }

            .Tab .ajax__tab_outer {
                color: #666666;
                background: url(images/tab_right_inactive.gif) no-repeat right;
                padding-right: 6px;
                margin-right: 2px;
            }
        </style>

    Thank you!

    Tuesday, April 18, 2017 6:25 PM

All replies

  • User-271186128 posted

    Hi klgrube,

    Base on your code and description, I create a sample using the following code, it seems that everything works well.

    the test page is under the root directory:

             .Tab .ajax__tab_inner {
                 color: #666666;
                 background: url("Images/image1.png") no-repeat left;
                 padding-left: 10px;
             }

    If your page is in the folder, try to add "../".

    Besides, you could also drag the image to your page, then, get the image url via the src property. Then remove the image tag.

    Code as below:

            <style type="text/css">
                #fiv {
                    width: 200px;
                    height: 200px;
                    background-image: url("Images/image36.gif");
                }
            </style>
            <div id="fiv">
                Test
            </div>
        </form>
        <img src="Images/image36.gif" />

    Best regards,
    Dillion

    Wednesday, April 19, 2017 5:50 AM
  • User-1691979634 posted

    Thank you so much!  I'll check that over the weekend. 

    Friday, April 21, 2017 7:58 PM