BUG: Background Image

Hi,
Here's a annoying bug. I finally found a way to reproduce it, I hope it's reproducible on other pc's. If anybody has a solution (besides not changing the background), I'd very much like to here it.
In LabVIEW 8.2:
Create a new VI, with a property node, and link it to the pane (Link To>Pane).
Select "Background Image".
From "Graphics & Sound>Picture Functions", select "Draw Flattened Pixmap"
Create a Picture control indicator.
Right Click the scroll bar, and select Properties.
Select the "Clouds" background.
Save Close and reopen the vi.
Run the vi. A nice picture of the background appears.
Change the background to "Wood - Oak".
Run the vi. Now the colors are inverted, like a color negative!
Change back to "Clouds", the colors are still inverted!
For some reason, I created an even worse situation, but I don't know how. When I start a vi, I get an inverted background image at first run, without changing my background! I Need this background to draw a semi transparent png file manually (with alpha blending), so this bug is a real show stopper. Copying the code to a new vi results in the same problem...
Regards,
Wiebe.

"Wiebe@CARYA" <[email protected]> wrote in message news:461637ad$[email protected]..
Hi,
Here's a annoying bug. I finally found a way to reproduce it, I hope it's reproducible on other pc's. If anybody has a solution (besides not changing the background), I'd very much like to here it.
In LabVIEW 8.2:
Create a new VI, with a property node, and link it to the pane (Link To>Pane).
Select "Background Image".
From "Graphics & Sound>Picture Functions", select "Draw Flattened Pixmap"
Create a Picture control indicator.
Right Click the scroll bar, and select Properties.
Select the "Clouds" background.
Save Close and reopen the vi.
Run the vi. A nice picture of the background appears.
Change the background to "Wood - Oak".
Run the vi. Now the colors are inverted, like a color negative!
Change back to "Clouds", the colors are still inverted!
For some reason, I created an even worse situation, but I don't know how. When I start a vi, I get an inverted background image at first run, without changing my background! I Need this background to draw a semi transparent png file manually (with alpha blending), so this bug is a real show stopper. Copying the code to a new vi results in the same problem...
Well, at least I found a way to "fix" the last problem. I changed 1 pixel in the right bottom of the bmp, saved it, change the background to it, closed the vi, and then the problem didn't occure... Changing back to the old picture did cause the problem again.
Regards,
Wiebe.
Regards,
Wiebe.

Similar Messages

  • BUG: background image under Linux

    Hi,
    This is actually two bugs...
    1) When you select a background image under Linux (I'm using CentOS, 100% comatable with Red Hed), and set it to Stretch, the image gets mangled. Probably a byte allaignment problem.
    2) When you change the background image with the Position set to Center from the program, LabVIEW often simply disapears. This doesn't happen when the Position is set to Tile, I haven't tried Stretch, because of point 1). It doesn't always happen, it seems to be related to the window origin. The error log says something like "DWarn ... picture Width and Height not matching". I'll try to attach the report, but it's on another system.
    I only tested with 3 similar pictures (png's). It might not happen with all pictures, although the used pictures are not special in any way.
    Regards,
    Wiebe.

    Hi Wiebe,
    Thanks for your post! Would it be possible to post screenshots of what you have pointed out in 1). Would it be possible to post the error log file for point 2) as well as a step-by-step instructions on how to reproduce this? Once I have this, I will be able to submit this to R&D for further investigation. Thanks so much for your help in making LabVIEW a better product!
    Best regards,
    Steven

  • New bug in IE11 -- scrolling position:fixed + background-image elements jitters badly.

    visit the following page in IE10 and IE11, and use your mouse wheel to scroll the page:
    http://www.oussamaharb.com/
    In IE <= 10, Safari, Chrome, and FireFox, the header section of that page stays put when scrolling.  However, only in IE11, when you scroll the page the the header jumps around and jitters.  Essentially IE11 will do this on any div with a fixed
    background image.
    Note the jitter does not happen if you grab the scrollbar with the cursor and move it up and down (which people rarely do).  Some sort of bug when using mouse wheel has been introduced in IE11.

    You are too late to see.  He removed
    background-attachment:fixed with IE11.  His link originally showed the stuttering.  It looked too unsatisfactory.
    You can still see his handsome design with FireFox where it continues to work well.  (And also good with Chrome, Opera, Safari too).  See how the picture on top stays fixed when you scroll the page?  Not with IE anymore.  With IE
    that great effect is removed, sacrificed to cure the ugly wart.  The picture now just scrolls upward with the page to avoid the IE11 bug.  Too bad.
    Since your first reply here 7 months ago.  Have you any special MVP insider-info yet how to make this great CSS3 port-hole feature scroll smoothly with IE11?  Or possibly, you have encouraging news that it will become corrected in IE12?  Your
    name is IECustomizer MVP.  It sounds like you will know.
    Here are more stutter examples for you to examine.  You may click the background to toggle several different ways to see the affliction during scroll.  Please post back and tell your observation that you can see this stutter.
    https://googledrive.com/host/0B8BLd2qPPV7XOGl1Sjk3c29uVlU
    Possibly somebody still hasn't yet noticed in bryanangler's example ("OP"), IE11 needs to be maximized (or large) to observe the problem.  At least,
    somebody has not acknowledged.  Bryanangler's page is Responsive Web Design (RWD).  The menu on top is present when space permits.  That's when the
    background-attachment:fixed applies and makes the horrid stutter.

  • Spry Sliding Panel bugs with Flash SWF, iFrames, CSS background images

    Greetings,
    I'm working on a site right now that is build with Spry 1.6
    Sliding Panels. On the home panel I have integrated a looping SWF,
    and scrolling iFrames on the Overview panel. After extensive
    research on these forums, I'm still scratching my head at a few
    bugs listed below:
    • Firefox (MAC v2.0.0.14)
    - The SWF on the home panel doesn't hide properly when
    sliding to a different panel. I have set 'wmode opaque' parameters
    to the flash file, but this seems to have not resolved the issue.
    - Additionally, I've noticed that sometimes the SWF will not
    finish sliding into the correct position when clicking to the home
    panel (the SWF will stop sliding several pixels left of the
    original positioning).
    - The SWF (which happens to be a loop animation) resets every
    time the home panel is visited. In my testing, this does not happen
    in any other browser.
    - On the Overview panel, scrolling iFrames are used on the
    "Staff Profiles". These iFrames don't hide properly when clicking
    through other panels, as the scroll bars are still viewable.
    - Overall, the sliding animation is a bit choppy compared to
    all other browsers. I can live with this, but I wonder if I have
    improper code somewhere?
    • Opera (MAC v9.27)
    - Same issue as above concerning the fact that the SWF
    appears outside of the sliding panel view port.
    • IE 6
    - CSS background images flash during the sliding panel
    animation.
    * Site page links *
    Main URL
    Home
    Page iFrame
    Overview
    Page iFrame
    * CSS *
    Main
    site-wide CSS
    Sliding
    Panels CSS
    * Scripts *
    Sliding
    Panels Sript
    Any suggestions, pointers would be much appreciated!
    Cheers,
    Chris

    Greetings,
    I'm working on a site right now that is build with Spry 1.6
    Sliding Panels. On the home panel I have integrated a looping SWF,
    and scrolling iFrames on the Overview panel. After extensive
    research on these forums, I'm still scratching my head at a few
    bugs listed below:
    • Firefox (MAC v2.0.0.14)
    - The SWF on the home panel doesn't hide properly when
    sliding to a different panel. I have set 'wmode opaque' parameters
    to the flash file, but this seems to have not resolved the issue.
    - Additionally, I've noticed that sometimes the SWF will not
    finish sliding into the correct position when clicking to the home
    panel (the SWF will stop sliding several pixels left of the
    original positioning).
    - The SWF (which happens to be a loop animation) resets every
    time the home panel is visited. In my testing, this does not happen
    in any other browser.
    - On the Overview panel, scrolling iFrames are used on the
    "Staff Profiles". These iFrames don't hide properly when clicking
    through other panels, as the scroll bars are still viewable.
    - Overall, the sliding animation is a bit choppy compared to
    all other browsers. I can live with this, but I wonder if I have
    improper code somewhere?
    • Opera (MAC v9.27)
    - Same issue as above concerning the fact that the SWF
    appears outside of the sliding panel view port.
    • IE 6
    - CSS background images flash during the sliding panel
    animation.
    * Site page links *
    Main URL
    Home
    Page iFrame
    Overview
    Page iFrame
    * CSS *
    Main
    site-wide CSS
    Sliding
    Panels CSS
    * Scripts *
    Sliding
    Panels Sript
    Any suggestions, pointers would be much appreciated!
    Cheers,
    Chris

  • Bugs in my background image

    I wrote a GUI that display a background image. There are other component like combo box, label etc...that are added to a panel that is superpose to the background. Everthing in my program works except that when my frame appear, the background image contains bugs like lines that aren't suppose to be there or black rectangle. If a minimize the frame and then remaximize it, the image is ok and bugs disappear. Also, the system is particulary slow (for exemple when i want to choose an item in a combo box, the mouse doesn't react instantaneously as it should do).
    Do you have any idea of what could be the source of the problem??
    The code for displaying my panel image is the following:
    import java.awt.*;
    import java.awt.event.*;
    import javax.swing.*;
    public class ImagePanel extends JPanel {
    Image image;
    public ImagePanel(Image image) {
    this.image = image;
    public void paintComponent(Graphics g) {
         ImageIcon img = new ImageIcon(image);
         ImageIcon bigImage = new ImageIcon(img.getImage().getScaledInstance (getWidth(), getHeight(),Image.SCALE_REPLICATE));
         super.paintComponent(g);
         g.drawImage(bigImage.getImage(),0 , 0, this);

    Here's my thought's on what could be the problem.
    First, the incomplete background image could be because it hasn't finished loading before it is painted the first time. You may need to use a mediaTracker to ensure it has fully loaded before you use it. See java.awt.MediaTracker. It's pretty easy to use. Basically, just create the tracker, add the image, then call waitForAll on the tracker. It will block until the image is fully loaded.
    The performance issue you are having is probably a result of all the stuff going on in the paintComponent method. Since this is the background component it gets paint called any time any other component on top of it needs painting. You should reduce the work in the paintComponent method by creating the scaled image in the constructor, not every time paint is called. If the ImagePanel class is resizable, then you could add a componentListener to it which will recreate the scaled image each time the ImagePanel is resized. This will greatly reduce the work needed and should give a big performance boost.

  • Firefox 4.0: Improper handling of Animated Gif background-image

    FF 4.0 is giving erratic and incorrect displays of an animated gif on a project I am working on. I have prepared a very small sample that demonstrates the problem.
    The problem occurs when an animated gif is used as the background-image for a div (it may also be true when used as a background-image for the body, but I have not tested that).
    When a page is first loaded, the animated gif displays properly.
    I would expect that the animation be displayed as animated either:
    # On each page load
    # On a page load with new session or when the image is removed from cache prior to loading the page. Otherwise the last frame of the image would show
    The sample page is designed to test this.
    IE: Behaved as in #1, i.e. the image was animated on each and every page load. (IE 8: 8.0.6001....)
    Google Chrome: Behaved as in #2, i.e. the image is animated only when there is a new session or when the image is no longer in cache. (Version 10.0.648.204)
    FF 3.6.8: Slightly strange, but acceptable.
    * The image is animated on new session and on any reload button.
    * The last frame is displayed if the location is reentered in the URL bar.
    * The last frame is displayed if the back/forward navigation buttons are used.
    * SOMETIMES the image is animated and sometimes the last frame is displayed when the change page button is pressed (i.e. Javascript change page).
    FF 4.0: Just plain NOT acceptable
    * Correctly animates the image on page load for new session
    * Correctly animates the image on reload button following clearing the image from cache.
    * INCORRECTLY shows the FIRST gif frame if the reload button is pressed.
    * INCORRECTLY shows the FIRST gif frame if the URL is reentered from the URL bar.
    * INCORRECTLY shows the FIRST gif frame if the page change button is pressed (i.e. Javascript change page).
    * INCORRECTLY shows the FIRST gif frame if theURL is reentered from the URL bar after clearing the image from cache.
    * INCORRECTLY shows the FIRST gif frame if the page change button is pressed (i.e. Javascript change page) after clearing the item from cache.
    All of these tests were run with Windows XP-Pro (all service packs and updates applied).
    I can find no clear specification as to what ''should'' happen with pages using animated gifs that are already loaded.
    * I can conceive of rationales for always displaying with animation.
    * I can also conceive of rationales for sometimes displaying the last frame, especially if the same page is being reloaded since many sites reload the same page in response to user form submissions.
    # '''I can see no rationale for displaying the first frame of the gif and would suggest that this is a bug. '''

    Can be this bug:
    * [https://bugzilla.mozilla.org/show_bug.cgi?id=641198 Bug 641198] – Rollover animated gif show only one frame.
    You can try these nightly test builds to see if they behave better:
    Fx5.0 ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora
    Fx6.0 ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-central
    Create a new profile exclusively for each Firefox version and create a desktop shortcut with -P "profile" appended to the target to launch each Firefox version with its own profile.
    See these mozillaZine KB articles for information:
    * http://kb.mozillazine.org/Testing_pre-release_versions
    * http://kb.mozillazine.org/Creating_a_new_Firefox_profile_on_Windows
    * http://kb.mozillazine.org/Shortcut_to_a_specific_profile
    * http://kb.mozillazine.org/Using_multiple_profiles_-_Firefox

  • Spry Menu Background image not working in IE

    I have created a website using Dreamweaver CS5 and having trouble with my Spry bar in internet explorer. It looks great in chrome, firefox, etc, but in IE there is a white background instead of my background image and the submenus have moved WAY right.. can someone help me!
    SpryMenuBarHorizontal.CSS is below:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 800px;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 160px;
    float: left;
    background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
    ul.MenuBarHorizontal li a{
    color:#FFF;
    ul.MenuBarHorizontal li li{
    background-image: url(../images/menu_background1.jpg);
    ul.MenuBarHorizontal li li a{
    color:#000;
    ul.MenuBarHorizontal li li li{
    background-image: url(file:///E|/MAIN_website/images/index_06.jpg);
    ul.MenuBarHorizontal li li li a{
    color:#FFF;
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
    ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
    color:#33CCFF;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 160px;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #FFF;
    text-decoration: none;
    font-family: Cambria, Arial, sans-serif;
    font-size: 14px;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    text-decoration: underline;
    /* [disabled]background-image: url(file:///E|/MAIN_website/images/menu_background.jpg); */
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #33C;
    color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;

    Because I can't see your site and code in context, I will make a guess that this style is throwing off your alignment:
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 160px;
    float: left;
    background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
    Remove the text-align:center; from the above style.
    Instead of centering your list element (li), center the link text (a) itself:
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    font-family: Cambria, Arial, sans-serif;
    font-size: 14px;
    If you don't want the submenu text to be centered, do this immediately after the previous style:
    ul.MenuBarHorizontal ul a {text-align: left;}
    The sub-submenus are also set up by default to be jogged a bit to the right. You can adjust this style:
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    that causes sub-submenus to fly out to the right of the submenus to which they attach.
    Submenus themselves (not the sub-submenus) should fall directly under the top menu item by default, once you remove the text-align: center; on the li item (above).
    Beth

  • How do I change the blurred background image on the Select User Screen

    I have changed the desktop image on all of my users, as well as the screen savers.  However, when I logout of one user and the screen where you select another user comes up, there is an image on the background of this particular screen that I cannot figure out how to change.
    This is crucial because I do not want to see my crazy, abusive ex-wife every time I select a different user...even if it is a blurred image.
    This blurred out image does not appear anywhere else on any of the different user accounts as a background/desktop image.
    How do I change this background image?
    Please help.

    This seems to be a bug that goes away w/ 10.10.1
    Yosemite login screen possible bug
    "if I put my Mac in sleep mode, when I wake up it, the password request screen uses the default Yosemite wallpaper in blurred mode instead of the wallpaper I have chosen for my desktop."
    or maybe not:
    "And it still happens after the 10.10.1 update."
    This seems to work.
    "The only way I was able to fix this problem was to go Mission Control and close all extra desktops I was using except Desktop 1 (which you cannot delete if it is the last one). After deleting the extra desktops besides Desktop 1, I went into preferences and set my wallpaper. Once I complete both of these steps I returned to the login screen. The wallpaper I used for Desktop 1 was now my background for the login screen. Hope this helps."

  • How to setup jpeg file as background image for all site pages and resolution stay same?

    I have uploaded my new site to http://wwwtjhtestdec2012.businesscatalyst.com
    I have background image set the same on all site pages  but image is incorrectly zoomed way in on some pages (like Home page for example).
    The Donate Page shows the correct resolution which I want displayed on all site pages.
    How do I set all other site pages to match background image resolution of the Donate Page?
    I am not sure what I am doing wrong that is changing this, or if it's possibly a bug?
    I want the background image to be full screen on all site pages please advise how to resolve.
    I would appreciate the assistance!
    Thank you kindly!
    Tammy

    I have re-uploaded my site to http://wwwtjhtestdec2012.businesscatalyst.com.
    If I set the Master page to Tile vertically that is only way I can get full screen background image of vegetables (without distortion).
    Then however another issue occurs....
    On Home Page of site I set same property to Tile and the background is better (no visible line where tiles meet---above the navigation tool bar--that is what I want for all pages associated to Master.
    So logically, I tried setting a 2nd associated site page to same master, to Tile but on Statement of Faith Page, notice the horizontal line where tiles meet, above my navigation bar on that site page?
    Why does Muse not handle both site pages associated to the same master identically?
    Any of the other options besides Tile or Tile vertically cause the background to not fill entire screen.
    Ideas?

  • FF36: Sites with background image flickers/flashes when going back to tab after 2 minutes.

    Figure I'll mention this here as well.
    When viewing websites with background images, such as twitter.com or my own website at www.markheadrick.com and I change to another tab for 2 minutes (this amount of time is repeatable anyway) I get a flicker of a black background before the page is fully drawn. If I have multiple tabs with the same background image, only the first tab will show the flicker. It's like it's loosing the image in memory or something. It has done this with Firefox in Safe Mode and with a new, clean profile. It has also done this with Hardware Acceleration off.
    Windows 7 Pro 64bit w/ NVidia 550ti and 314.22 drivers. Newer drivers are more problematic which is why I have stayed with these.
    Again, only pages with background images seem to show this flicker. Did not happen with Firefox 35 on my system.
    I created a bug for it here: https://bugzilla.mozilla.org/show_bug.cgi?id=1137082
    Thanks,
    Mark H

    I tried, but could not see and problem.
    Hello,
    In order to better assist you with your issue please provide us with a screenshot. If you need help to create a screenshot, please see [[How do I create a screenshot of my problem?]]
    Once you've done this, attach the saved screenshot file to your forum post by clicking the '''Browse...''' button below the ''Post your reply'' box. This will help us to visualize the problem.
    Thank you!

  • Background images with spry "horizontal menu"

    hi again
    I am trying to work with the spry: "horizontal menu"
    I want to put some background images into the menu bar not into the submenu
    and that is the problem: the background images appears overall
    what can I do ?
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unbenanntes Dokument</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    #container {
         margin-right: auto;
         margin-left: auto;
         width: 400px;
    -->
    </style>
    </head>
    <body>
    <div id="container">Raum für den Inhalt von  id "container"
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Element 1</a>  </li>
    <li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
        <ul>
          <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
          <li><a href="#">soso</a></li>
    </ul>
      </li>
      <li><a href="#">Element 4</a></li>
    </ul>
    <p>  </p>
    <p> </p>
    <p> </p>
    <p> </p>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
    and css
    ul.MenuBarHorizontal
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         cursor: default;
         width: auto;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
         z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         position: relative;
         text-align: center;
         cursor: pointer;
         width: 100px;
         float: left;
         height: 10px;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         z-index: 1020;
         cursor: default;
         width: 100px;
         position: absolute;
         left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
         left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
         width: 100px;
         height: 30px;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
         position: absolute;
         margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
         left: auto;
         top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
         border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
         display: block;
         cursor: pointer;
         background-color: #FEF3E4;
         padding: 0.5em 0.75em;
         color: #FFF;
         text-decoration: none;
         background-repeat: no-repeat;
         background-image: url(../rot.jpg);
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
         color: #FF0;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
         background-color: #FEF3E4;
         color: #FF0;
         background-image: url(../rot.jpg);
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
         background-color: #FEF3E4;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
         background-color: #0F9;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
         background-color: #FEF3E4;
         color: #FF0;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
         background-color: #F99;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
         position: absolute;
         z-index: 1010;
         filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
         ul.MenuBarHorizontal li.MenuBarItemIE
              display: inline;
              f\loat: left;
              background: #FFF;

    Complete page and css code below (scroll down)
    All you should be concerned with at this moment to get the background image to appear in the top level anchor is the css style below:
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-color: #000;
    background-image: url(../rot.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    I've added the background-postion because presumably you want it to appear flush left. This overides the out-of-the-box setting which positions it 95% far left.
    Here is the code and css:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Unbenanntes Dokument</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <head>
    <style type="text/css">
    <!--
    #container {
         margin-right: auto;
         margin-left: auto;
         width: 400px;
    -->
    </style>
    <style>
    ul.MenuBarHorizontal
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         cursor: default;
         width: auto;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
         z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         position: relative;
         text-align: center;
         cursor: pointer;
         width: 100px;
         float: left;
         height: 10px;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
         margin: 0;
         padding: 0;
         list-style-type: none;
         font-size: 100%;
         z-index: 1020;
         cursor: default;
         width: 100px;
         position: absolute;
         left: -1000em;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
         left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
         width: 100px;
         height: 30px;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
         position: absolute;
         margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
         left: auto;
         top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
         border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
         display: block;
         cursor: pointer;
         background-color: #FEF3E4;
         padding: 0.5em 0.75em;
         color: #FFF;
         text-decoration: none;
         background-repeat: no-repeat;
         background-image: url(../rot.jpg);
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
         color: #FF0;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
         background-color: #FEF3E4;
         color: #FF0;
         background-image: url(../rot.jpg);
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-color: #000;
    background-image: url(../rot.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
         background-color: #0F9;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
         background-color: #FEF3E4;
         color: #FF0;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
         background-color: #F99;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
         position: absolute;
         z-index: 1010;
         filter:alpha(opacity:0.1);
    </style>
    </head>
    <body>
    <div id="container">Raum für den Inhalt von  id "container"
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">Element 1</a>  </li>
    <li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
        <ul>
          <li><a href="#" class="MenuBarHorizontal">heija</a>      </li>
          <li><a href="#">soso</a></li>
    </ul>
      </li>
      <li><a href="#">Element 4</a></li>
    </ul>
    <p>  </p>
    <p> </p>
    <p> </p>
    <p> </p>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

  • How to add different background image for submenu items???

    Hi all,
    I'm pretty new to web design and CSS in particular. Here's my problem...
    I've got a Spry horizontal menu bar (untouched as yet), and I want to have a different background image for my submenu items than that of my menu items. From searching the internet I think that I need to apply a class to the submenu item (please correct me if I am wrong).
    How would I go about doing this and how would I assign the class to just the submenu items?
    Also ideally I want to have my first and last menu items to have rounded corners on one side (therefore making a rounded edge menu bar), is it possible to have a different background image for individual menu items? If so, how?
    Really appreciate any help!

    Thanks for the link! I've managed to sort the background issue, and it seems to be working fine!
    Just one little issue left to tackle...
    I want my text to be centered in my top menu items BUT aligned left in my drop down menu items. I have managed this but the text hugs the left hand side. I've tried adding a little margin to the left but that doesn't seem to affect anything???
    Here's my CSS... Any ideas which class I should be targeting or why adding the margin isn't working would save my tearing the rest of my hair out! thanks! (screenshot attached).
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        cursor: default;
        width: auto;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
        z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        margin: 0;
        list-style-type: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 120px;
        float: left;
        height: 24px;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
        background-repeat: repeat-x;
        background-color: #333333;
        background-image: url(../images/navbar_bg.jpg);
        border-right-width: 1px;
        border-left-width: 1px;
        border-right-style: solid;
        border-left-style: solid;
        border-right-color: #000000;
        border-left-color: #666666;
    ul.MenuBarHorizontal li li
        list-style-type: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: auto;
        float: left;
        height: 24px;
        background-color: #333333;
        background-image: none;
        padding: 0;
        margin: 0;
        left: -1px;
    ul.MenuBarHorizontal li li a
        list-style-type: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        float: left;
        height: 24px;
        background-image: none;
        font-size: 12px;
        font-weight: normal;
        border: 0px 0 0;
        width: 120px;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        padding: 0;
        margin: 0;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
        margin: 0;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: 120px;
        position: absolute;
        left: -1000em;
        height: 24px;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
        left: auto;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        height: 24px;
        width: 120px;
        margin-top: -5%;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal li a
        display: block;
        cursor: pointer;
        text-decoration: none;
        font-style: normal;
        text-transform: capitalize;
        text-align: center;
        white-space: normal;
        padding: 0px;
        height: 24px;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 20px;
        margin: 0px;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        background-color: #000000;
        background-image: url(../images/navbar_bg_hover.jpg);
        background-repeat: repeat-x;
        line-height: 22px;
    ul.MenuBarHorizontal li li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        background-color: #000000;
        background-image: none;
        background-repeat: repeat-x;
        width: 120px;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
        background-repeat: repeat-x;
        background-position: 95% 50%;
        background-color: #333333;
        background-image: url(../images/navbar_bg.jpg);
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
        background-repeat: repeat-x;
        background-position: 95% 50%;
        background-color: #000000;
        background-image: url(../images/navbar_bg_hover.jpg);
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
        position: absolute;
        z-index: 1010;
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;

  • Spry tab menu background image is not displaying on remote server

    Hello All,
    I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
    Here is the link
    http://www.geftas.com/temaritestpage/about.html
    Also I am uploading Css and html code below
    Any help would be exteremely appreciated.
    Thanks
    <!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>
    <meta http-equiv="content-type" content="text/html; charset=utf8"/>
    <meta http-equiv="content-type" content="cache" />
    <meta http-equiv="robots" content="INDEX,FOLLOW"  />
    <meta http-equiv="keywords" content="Enter Keywords"/>
    <meta http-equiv="description" content="Description Here" />
    <title>TEMARI&CO. | Business Strategists</title>
    <link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
              <div id="header"></div>
      <div id="navigation">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="index.html">HOME</a></li>
          <li><a href="about.html" class="current">ABOUT</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
            <ul>
              <li><a href="#">Business Plan</a></li>
              <li><a href="#">Marketing Plan</a></li>
              <li><a href="#">Incorporation</a></li>
              <li><a href="#">Accounting System</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#">OUR PROCESS</a></li>
          <li><a href="#">CAREERS</a>      </li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    <div class="shadow" id="content">
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">values</li>
          <li class="TabbedPanelsTab" tabindex="0">people</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
                    <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
            </div>
          </div>
          <div class="TabbedPanelsContent">
                      <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem n, </p>
                                <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, , </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit a, </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet,  </p>   
            </div>
          </div>
        </div>
      </div>
    </div>
      <div id="footer">
    <div id="legal">
                          <ul>
                              <li>Copyright © 2012 Temari&Co</li>
                        <li>| Privacy Policy |</li>
                        <li>Terms of Use</li>
                    </ul>
        </div>
                <div id="socialmedia">
                          <ul>
                              <li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
                        <li><img src="images/gicongri.png" width="20"          height="20" alt="gicon"/></li>
                        <li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
                        <li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
                  </ul>
          </div>   
      </div><!-- end footer-->   
    </div><!-- end wrapper-->
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    .TabbedPanels {
              overflow: hidden;
              margin: 0px;
              padding: 0px;
              clear: none;
              width: 100%;
              height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    .TabbedPanelsTabGroup {
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTab {
              position: relative;
              float: left;
              background-color: #FFF;
              list-style: none;
              -moz-user-select: none;
              -khtml-user-select: none;
              cursor: pointer;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              font-weight: normal;
              color: #666;
              height: 30px;
              width: 116px;
              text-transform: uppercase;
              text-align: center;
              line-height: 30px;
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTabHover {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
    .TabbedPanelsTabSelected {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
              height: 30px;
              width: 116px;
    .TabbedPanelsTab a {
              color: black;
              text-decoration: none;
    .TabbedPanelsContentGroup {
              clear: both;
              background-color: #FFF;
              height: 100%;
              width: 824px;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              color: #666;
              border-top-width: 1px;
              border-right-width: 1px;
              border-bottom-width: 1px;
              border-left-width: 1px;
              border-top-style: dotted;
              border-top-color: #CCC;
              border-right-color: #CCC;
              border-bottom-color: #CCC;
              border-left-color: #CCC;
    .TabbedPanelsContent {
              height: 100%;
              width: 100%;
              overflow:hidden;
    .TabbedPanelsContentVisible {
    .VTabbedPanels {
              overflow: hidden;
              zoom: 1;
    .VTabbedPanels .TabbedPanelsTabGroup {
              float: left;
              background-color: #EEE;
              position: relative;
    .VTabbedPanels .TabbedPanelsTab {
              float: none;
              margin: 0px;
              border-top: none;
              border-left: none;
              border-right: none;
    .VTabbedPanels .TabbedPanelsTabSelected {
              background-color: #EEE;
    .VTabbedPanels .TabbedPanelsContentGroup {
              clear: none;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
              overflow: visible !important;
    .TabbedPanelsContentGroup {
              display: block !important;
              overflow: visible !important;
              height: auto !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
    .TabbedPanelsContent {
              clear:both !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
              width: 744px;
    .TabbedPanelsTab {
               overflow: visible !important;
               display: block !important;
               clear:both !important;

    Assuming these are the images you're trying to display:
    .TabbedPanelsTabHover {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
    .TabbedPanelsTabSelected {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
              height: 30px;
              width: 116px;
    You have 2 root paths in your URL code. I think this is how your file structure looks like on your local computer. However, on a remote server, ../ by itself means you're pointing to the root folder of your website. Your URL linkage should be corrected based on the relativity and your background will work without a problem.

  • Background image not displaying

    I'm developing pages that will each have a different background image. i've defined a div with the bg image in it and put that div in the code, but the bg image doesn't show up. i've also tried adding a bg color to the div and that doesn't show up either, so i'm sure it's not a path or file name issue. css & code below.
    @import url("./whitespace-reset.css");
    @charset "UTF-8";
    body  {
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
        color: #000000;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    #container  {
        width: 761px; /* the auto margins (in conjunction with a width) center the page */
        border: 0;
        text-align: left; /* this overrides the text-align: center on the body element. */
        height: 871px;
        margin: 0;
        padding: 0;
        background: #FFFFFF;
    #header  {
        height: 148px;
        width: 761px;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    #leftside {
        width: 158px;
        float: left;
        margin-top: -38px;
        padding: 0px 0px 0px 0px;
    #leftside .menu img {
        display: block;
        margin: 0;
    #leftside  ul.menu {
        padding: 0px 0px 0px 0px;
        font-style: none;
        margin: 0;
    #leftside ul.menu li {
        display: inline;
        float: left;
        margin: 0;
        padding: 0;
        list-style: none;
    #leftspacer {
        width: 31px;
        float: left;
        height: 723px;
        margin-top: -38px;
        padding-right: 10px;
        background-image: url(images/home_spacer_left.jpg);
        background-repeat: no-repeat;
    #top  {
        margin-top: 0px;
        height: 38px;
        padding: 0px 0px 0px 0px;
    #top ul.menu {
        margin-top: 0px;
        margin-left: 189px;
        float: left;
        padding: 0px 0px 0px 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        list-style: none;
    #top ul.menu li {
        display: inline;
        list-style: none;
        float: left;
        margin: 0;
        padding: 0;
    #bottom {
        height: 22px;
        left: 468px;
    #bottom ul.menu {
        margin-top: 300px;
        margin-right: -23px;
        float: left;
        margin-left: -61px;
        list-style: none;
    #bottom ul.menu li {
        display: inline;
        list-style: none;
        float: left;
    #mainContent  {
        margin: 0px 0px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
        padding: 0 0 0 0;
    #facilitiesContent {
        background: #990000 url(images/facilities_bg.jpg) repeat;
        padding: 0;
        height: 208px;
        margin: 0;
        width: 573px;
    #footer  {
        padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
        background:#c0b7b2;
        height: 22px;
    #threepix {
        margin-left: 189px;
        margin-right: 0px;
        height: 114px;
    #col1 {
        position: relative;
    #col1-a {
        position: absolute;
        width: 275px;
        right: 0px;
        top: 0px;
    #col1-b {
        position: absolute;
        right: 0px;
        width: 275px;
        top: 0px;
    #pixcopyleft {
        margin-left: 189px;
        font-size: 1em;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 10px;
    #pixcopyright {
        font-size: 1em;
        margin-left: 189px;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 10px;
    #footer ul.menu {
        margin-left: 189px;
        margin-right: 0px;
        margin-top: -22px;
        padding: 0px 0px 0px 0px;
        float: left;
    #footer ul.menu li {
        display: inline;
        list-style: none;
        padding: 0px 0px 0px 0px;
        float: left;
    #footer  p  {
        margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
        padding: 10 0;
    img.imageleft {
        float: left;
        margin-left: 0px;
        padding: 5px 5px 5px 5px;
    img.imageright {
        float: right;
        padding: 5px 0px 5px 5px;
        text-align: right;
    .imagecenter {
        text-align: center;
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 0px;
        padding: 5px 5px 5px 5px;
    .fltlft { /* this class can be used to float an element left in your page */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
        clear:both;
        height:0px;
        font-size: 1px;
        line-height: 0px;
    h1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
        font-weight: bold;
        margin-bottom: 3px;
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Core PIlates Studio </title> 
    <link href="core.css" rel="stylesheet" type="text/css" /> 
    <body bgcolor="#c0b7b2" onload="MM_preloadImages('images/nav_main_ourteam_roll.jpg')"> 
    <!--[if IE 5]> 
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */ 
    .thrColFixHdr #sidebar1 { width: 180px; } 
    .thrColFixHdr #sidebar2 { width: 190px; } 
    </style> 
    <![endif]--><!--[if IE]> 
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */ 
    .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; } 
    .thrColFixHdr #mainContent { zoom: 1; } 
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */ 
    </style> 
    <![endif]--> 
    <script type="text/javascript"> 
    <!-- 
    function MM_swapImgRestore() { //v3.0 
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
    function MM_preloadImages() { //v3.0 
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    </script>
    <meta name="description" content="Core Pilates Studio is a classical, fully equipped pilates and Gyrotonic studio convenienly located near Vassar College in Poughkepsie, NY. We offer classical pilates, Gyrotonic and Gyrokinesis in private, semi-private and group sessions." />
    <meta name="keywords" content="core pilates studio, pilates, core, gyrotonic, gryokinesis, joeseph pilates, pilates in poughkeepsie, pilates in ny, pilates in new york" />
    </head>
    <body onload="MM_preloadImages('images/nav_main_home_roll.jpg','images/nav_main_programs_roll.j pg','images/nav_main_schedule_roll.jpg','images/nav_main_rates_roll.jpg','images/nav_main_ ourteam_roll.jpg','images/nav_main_contactus_roll.jpg')">
    <div id="container">
       <div id="header">   
        <img src="images/home_header.jpg" align="left" /><a href="index.html"><img src="images/home_logo_core.jpg"></a>     
      <!-- end #header --></div>
    <div id ="top">
      <ul class="menu">
          <li><a href="facilities.html"><img src="images/subnav_studio_facilities_down.jpg" class="menu"></a></li>
           <li><a href="rates.html"><img src="images/subnav_studio_rates_up.jpg" class="menu"></a></li>
           <li><a href="hours.html"><img src="images/subnav_studio_hours_up.jpg" class="menu"></a></li>
           <li><a href="policies.html"><img src="images/subnav_studio_polocies_up.jpg" class="menu"></a></li>
           <li><a href="directions.html"><img src="images/subnav_studio_directions_up.jpg" class="menu"></a></li>
           <li><a href="contact-us.html"><img src="images/subnav_studio_contactus_up.jpg" class="menu"></a></li>
           <li><img src="images/subnav_studio_back.jpg" class="menu"></li>
      </ul>
      <!-- end #"top" --></div>
      <div id="leftside">
    <ul class="menu">
          <li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/nav_main_home_roll.jpg',1)"><img src="images/nav_main_home_up.jpg" name="home" width="158" height="39" border="0" id="home" /></a></li>
          <li><a href="programs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('programs','','images/nav_main_programs_roll.jpg',1)"><img src="images/nav_main_programs_up.jpg" name="programs" width="158" height="39" border="0" id="programs" /></a></li>
          <li><a href="the-studio.html"><img src="images/nav_main_thestudio_down.jpg"></a></li>
          <li><a href="schedule.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('schedule','','images/nav_main_schedule_roll.jpg',1)"><img src="images/nav_main_schedule_up.jpg" name="schedule" width="158" height="39" border="0" id="schedule" /></a></li>
          <li><a href="rates.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rates','','images/nav_main_rates_roll.jpg',1)"><img src="images/nav_main_rates_up.jpg" name="rates" width="158" height="39" border="0" id="rates" /></a></li>
          <li><a href="contact-us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact us','','images/nav_main_contactus_roll.jpg',1)"><img src="images/nav_main_contactus_up.jpg" name="contact us" width="158" height="39" border="0" id="contact us" /></a><a href="our-team.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our team','','images/nav_main_ourteam_roll.jpg',1)"><img src="images/nav_main_ourteam_up.jpg" name="our team" width="158" height="39" border="0" id="our team" /></a></li>
          <li><img src="images/nav_main_space_below.jpg" /></li>
          <li><a href="mailto:[email protected]"><img src="images/home_email.jpg" /></a></li>
          <li><img src="images/home_address.jpg" /></li>
          <li><a href="special-programs.html"><img src="images/home_logo_special.jpg" /></a></li>
       </ul>
    <!-- end #leftside --></div>
    <div id="leftspacer"></div>
    <div id="facilitesContent">
    <div id="pixcopyright"><img src="images/images/facilaties_page_images_03.jpg" class="imageright">
          <h1 align="right">What is Pilates?</h1>
          <div align="right">Whether you're a world class athlete, a couch potato, recovering from an injury, new to excercising, old, young or in between you can benefit from Pilates.</div></div><br /><br />
        <div id="pixcopyright"><img src="images/images/facilaties_page_images_03.jpg" class="imageright">
        <h1 align="right">What is Pilates?</h1>
           <div align="right">Whether you're a world class athlete, a couch potato, recovering from an injury, new to excercising, old, young or in between you can benefit from Pilates.</div></div><br /><br />
      <!-- end #facilitiesContent --></div>
      <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
    <div id="footer">
       <ul class="menu"> 
           <li><img src="images/nav_bottom_left_space.jpg"></a></li>
           <li><a href="index.html"> <img src="images/nav_bottom_home.jpg"></a></li>
           <li><a href="programs.html"> <img src="images/nav_bottom_program.jpg"></a></li>
           <li><a href="the-studio.html"> <img src="images/nav_bottom_thestudio.jpg"></a></li>
           <li><a href="schedule.html"> <img src="images/nav_bottom_schedule.jpg"></a></li>
           <li><a href="rates.html"> <img src="images/nav_bottom_rates.jpg"></a></li>
           <li><a href="our-team.htm"> <img src="images/nav_bottom_ourteam.jpg"></a></li>
           <li><a href="contact-us.html"> <img src="images/nav_bottom_contactus.jpg"></a></li>
       </ul>
      <!-- end #footer --></div> 
    <!-- end #container --></div>
    </body>
    </html>

    Start by fixing the code errors.
    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.elixir.biz%2Fcore%2Ffacilitie s.html
    http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. elixir.biz%2Fcore%2Ffacilities.html
    Your document type doesn't match your HTML closing tags.  Modify > Page properties > Encoding > choose either HTML or XHTML (transitional) and hit Apply.
    Images require an alt attribute for better web accessibility. If you want to skip this for now and add them later, that's OK.
    but your code won't validate until you add them to each image.
    When you've fixed the code errors, repbulish the page and see if that fixes the problem.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

  • SSRS Report - background image not displaying in MHTML email

    We have a report that has a rectangle with an image as a background (doesn't make any difference whether image is external, embedded, etc). The background image displays fine on the screen and when exporting to PDF, but doesn't show when emailing (via subscription)
    in MHTML format and opening in MS Outlook, gmail, etc.
    It seems to be a legitimate bug with SSRS (have tried in SSRS 2008 R2, 2012, 2014).
    Is there a workaround? Service Pack?

    Hi Corey Gray,
    Per my understanding that the background image in the email subscription not display which format is MHTML, right?
    I have tested on my local environment and can reproduce the issue. I deliver this report to three email amounts: Outlook, Hotmail and 163, below I will share the test results with you.
    Outlook: the backgroudimage disappear in the email body and there is no one attachment being sent in the email.
    Hotmail: the backgroudimage disappear in the email body, however, the backgroundimage being sent as one attachment in the email.
    163: the backgroudimage displays in the email body and the backgroundimage being sent as one attachment in the email.
    Based on previous test results, we can conclude that: these different scenarios caused by the settings of the email rather than Reporting Services.
    If you are using Outlook, I would recommend you submit one thread in this Outlook forum,
    http://social.technet.microsoft.com/Forums/en-us/outlook/threads.
    In this forum, you can get more professional support about how to set the Outlook.
    If you have any other question, please feel free to let me know.
    Regards
    Vicky Liu

Maybe you are looking for