WAD: Background-Image when dropping Web-Item

Hi specialists,
I've got the following issue:
As soon as I drop an WebItem into (let's say) a div-element, the WAD adds the following items to the XHTML-Code of the div-Element:
oheight="423" owidth="714" height="423" width="714" iwidth="714px" iheight="423px" src="file://C:/my documents/myname/local settings/Temp/bw/tmp_mime/gen_prevgenbmp377.png"
and the following into the div's style-attribute:
BACKGROUND-IMAG E: url(file://C:/my documents/myname/local settings/Temp/bw/tmp_mime/gen_prevgenbmp377.png);
Can anybody explain this behaviour ? What are this background-Image (which seems to be a dummy-image) and the non-standard attributes used for ?
So far I always needed to remove this attributes/style-element manually after inserting a new web-item - which is quite inconvenient... - Is there a way to disabble this

You don't convert code from Spry. You eliminate Spry and start over with a better Menu.
If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a good investment and it's mobile & touch screen friendly.
http://www.projectseven.com/products/menusystems/pmm3/index.htm
jQuery Superfish (free)
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MegaMenu 2 (free)
http://www.geektantra.com/2010/05/jquery-megamenu-2/
To answer your first question, you want a persistent indicator.
Making a persistent page indicator on site wide CSS Menus
Nancy O.

Similar Messages

Adding A Separate Background Image For Each Menu Item

I asked this in the Spry forum, and not sure I understand the answer. Plus, I should have been more specific in asking how to do it, as I'm still pretty new to this stuff. Nothing I'd found indicated it could be done, or how.
Org question -
I know you can apply a background image to the menu bar items, but is it possible to add a background image for each individual item? What I'm basically trying to keep are the effects (bevel/emboss, etc.,) that I attached to the text, when I created it in PS CS4.
Answer -
Yes you can. The widget is just normal plain html markup so you can just add other classNames or id attributes to the elements. And style the elements through those classes/ids.
Does this mean I'd have to write a new rule for each menu item? What?
Thank you.

Did an Adobe Tutorial for creating/entering a Spry Menu Bar. This is the HTML, after I took out the submenus.
<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="news.html">Features</a></li>
      <li><a href="news.html">News</a></li>
      <li><a href="news.html">Fashion</a></li>
      <li><a href="news.html">Lifestyle</a></li>
      <li><a href="news.html">Calendar</a></li>
    </ul>
This is from the SpryMenuBarHorizontal.css (It seems like I need to make changes in the Design Info section of this code. But nothing I've tried has worked):
/* 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: auto;
text-transform: uppercase;
/* 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: left;
cursor: pointer;
width: 7em;
float: left;
/* 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: 8.2em;
/* 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: #EEE;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
/* 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;

Background image when recording video on iphone like in photobooth?

Is there an app that places a background image when video recording like in photobooth?

Thanks for your reply . I've removed the cover when doing both tests I mentioned. The earphone I used is at good condition and I don't see any problem with it. I've also reinstalled the iOS as your instruction, but still no luck, the video sound still has noise.
I've decided to export the video file to my PC to see if I can hear sound better or not, as it's hard to hear and sound except noise with the external speaker on my iPhone even at maximum volume. On my PC I had to increased playback volume to 100%, set volume booster to 300% and applied noise reduction plugin (I use Media Player Classic on Windows 7) to get an acceptable sound (still noise but better than the original). If I don't boost the volume, it's hard to hear anything. I don't expect it to be crystal clear like the voice memo (using the bottom mic), but too much noise like this is really bad.
So I think it appears to be a hardware-related problem. I will later consider to send it to a phone repair shop or keep it and accept this bad video sound problem . In Vietnam we just have Apple authorized resellers but don't have any official Apple repair shops, that's why I'm still confused as I don't really trust those phone repair shops to handle my iPhone. Anyway, thanks again for your comment .
P.S: it maybe a little off-topic, but do you know any video recording app that using the bottom mic ?

Spry Menu Bar - Different Background Image Wanted for menu items

Hi, I've looked everywhere for help with this and just haven't found any answers yet ...
I want my Dreamweaver CS5.5 menu to look like this design I've done in PhotoShop ...
It's a simple one level list with no sub-levels.
Everything is good, except I can only set one background image for all the menu items at this level.
I want the first, last, and all the middle, menu items to use different background images.
I have no idea where or how to insert the code to set a different background image for each individual menu item ...
I know I could use images set one on top another in a column with rollover image swop, but the spry menu opens the door for dynamic content so I'm keen to get it working.
Manchester city council has a great example of this style of menu design working at - http://www.manchester.gov.uk/
They've got funky indenting of the text as well.
~~~~~~
This is the code for my menu list ...
<div class="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Groups</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
         <li><a href="#">Help</a></li>
    </ul>
</div>
This is how I set the background image (but I can only define one image) ...
I set the image background to "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg" through ...
CSS Styles
SpryMenuBarVertical.css
ul.MenuBarVertical a
I then select the background category
and browse to the image file.
doing this changes my CSS code as follows ...
ul.MenuBarVertical li
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 170px;
    margin-top: 4px;
    margin-bottom: 4px;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical ul
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 170px;
    left: -1000em;
    top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
    background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #0000;
    text-decoration: none;
    font: normal 12px Verdana, Geneva, sans-serif;
    background: #EEE url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
~~~~~~
These are the three images I want to apply to the top middle and bottom menu items :
Top menu item background image - "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg"
Middle menu items background image - "Menu-Nav-Bar-Pic-Mid-v1-w170px-h32px.jpg"
Bottom menu item background image - "Menu-Nav-Bar-Pic-Bot-v1-w170px-h32px.jpg"
~~~~~~
As I am unable to set the menu items individually, this is how the menu looks like on my website at the moment ...
~~~~~~
So near yet so far ! I'm hapy with the verdana font, the image size and spacing, but the background images I just can't set them right.
I'd really appreciate any help on this as I'm out of ideas.
Thank you.

The easiest way is to use pseudo elements.
To style the first and last menu items ifferently to the rest, merely add :first-child and :last-child respectivly as follows
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarVertical li:first-child a {
    background-color: red;
    color: white;
ul.MenuBarVertical li:last-child a {
    background-color: green;
    color: yellow;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
In your case, in liue of the background colour, you would have an image.
Gramps

Background image for BPF web page

Hi all,
I'm building a web page that shows a BPF. I would like to set an image as backgroung for this web page.
In the BPC help I have read that the image should be located in /webfolders/<appset>AppSetPublications\BPFBackground folder on the server.
Does anyone know how to upload there the image? The only way I see is using BPC for excel, but it only allows to upload excel files, no images.
Thanks and regards,
Ana

Hi Ana,
You will have to add a new webpage in BPC Web content library.
Using the BPF object in the webpage, you can select your BPF and can also add the respective background image to it.
Hope this helps you.
Regards,
Nithya

Safari doens't show background Image when sliding page left

I display a web page with a large-width photo (say 2000 pixels jpg file) & a repeat small background image in mobile Safari & the right part of photo is beyond the screen.
I touch & slide the page left to see right part but found there's no background image below the right part but only white blank background.
Does anyone know how to make Safari display the background image below the right part?

I display a web page with a large-width photo (say 2000 pixels jpg file) & a repeat small background image
Does this mean that the large photo IS the background and set to repeat via CSS or HTML? In this case Safari might cut off the image that is not within the viewable bounds of the web page for memory reasons. Just a thought.
Jason

WAD 7.0 Checkbox Group web item - ability to select/deselect all

Hello. I am currently using within the Web Application Designer 7.0 the web item Checkbox Group. I would like the ability to add a "select all" and "deselect all" button(s) to select all values and deselect all values respectively.
Has anyone in the community been able to accomplish this? Our user base has asked about this frequently.
Kind regards,
Lynn Peter

Hi,
This can be solved by using a Container layout item and a button group item.
1 Put the Checkbox item and a button group item in the Container layout item.
2 Configure a button in the button group item with the command CLEAR_SELECTION_STATE and connect it to the criteria/key figures you wish to use it on.
3 Configure another button similarely with the command SET_SELECTION STATE. (In our user case this button was not necessary)
4 Configure the Container layout item to display your checkbox and button group as desired.
This should solve your problem, we had exactly the same problem with the before "unfriendly" user interface.
BR,
Niclas

Why won't FCP X burn the menu background image when sharing directly to DVD?

At one point recently I was able to drop in a jpg file so that FCP X would display this image in the menu background when a disc is burned directly out of FCP X when sharing directly to DVD. It worked at first, and then I decided I needed a higher quality image, but this one won't burn. My DVD now just has a black menu background. I can't figure out why this is happening. Please help! I'm using a late 2008 MacBook Pro 2.4Ghz 15" with OS 10.8.4. FCP X is up to date as well. My harddrive is fairly full in case that might cause some errors. Are there any specs on what type and size an image FCP wants for this function? Thanks for any help!
Gregg

Thank you, reducing the image size worked! I had used a low res file before, and with success decided to increase the resolution/size, and then it didn't work. the image did appear in small preview in the export panel, but wouldn't burn when all was said and done. the dimensions you gave worked fine. unfortunately, it makes the image a little bit fuzzy, but i dont think i can do anything about this. at least it burned it in there. thanks!

Loading larger image when dropped

Hey. I am working on this image scroller, where thumbnails of images are displayed. I get each image by
function urlLoaded(event:Event):void {
     urlLoader.removeEventListener(Event.COMPLETE,urlLoaded);
     xml=XML(event.target.data);
     xmlList=xml.children();
     for (var i:int=0; i<xmlList.length(); i++) {
          var thumb:Thumbnail=new Thumbnail(xmlList[i].url);
          arrayThumb.push(thumb);
          arrayThumb[i].y=150.5;
          arrayThumb[i].x=i*110+280;
          photoContainer.addChild(thumb);
          arrayThumb[i].addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
          arrayThumb[i].addEventListener(MouseEvent.MOUSE_UP, dropIt);
And I pick up and drop the thumbnail image by
function pickUp(event:MouseEvent):void {
     getPosition(event.target);
     stage.addChild(event.target as DisplayObject);
     Sprite(event.target).startDrag(true);
function dropIt(event:MouseEvent):void {
     Sprite(event.target).stopDrag();
     if (event.target.hitTestObject(getChildByName("movie"))) {
          var my_loader:Loader = new Loader();
          my_loader.load(new URLRequest("pics/1.png"));
          movie.addChild(my_loader);
          this.photoContainer.addChild(event.target as DisplayObject);
          event.target.x=xPos;
          event.target.y=yPos;
     } else {
          this.photoContainer.addChild(event.target as DisplayObject);
          event.target.x=xPos;
          event.target.y=yPos;
Now this is perfect, because If the image is not dropped into the movie clip called "movie", it will be placed back into the scroller at its correct position. I just have a coupld of issues currently. I dont want pics/1.png to be displayed on each drop, this was used for a test. What I need is for each image' big image to be displayed, which all have the same name as the smaller image, just in a different folder. The images are in the xml file like
<image>
      <url>pics/img_1.png</url>
</image>
So is there anyway I could use any of the above code to load the big image associated with the small image? If event.target points to the current thumbnail being picked up, could i do something like event.target.url to point to its name or something?
Any advise appreciated

You should be able to store the image file name as a variable of the thumbnail and then use it when it comes time to load the image, such as in...
my_loader.load(new URLRequest("pics/"+event.target.variable));

How to get rid of background image when I scroll up or down in safari?

Since I have downloaded OS Mavericks on my macbook pro I have a problems with Safari. Whenever I scroll up or down on any webpage and ugly background of clipart looking images appears instead of the original grey background. This is the best image I could take of what it looks like when I scroll up.

funwidowlady,
Good afternoon! I'm glad I can be here to help with this error. In the device this application is identified only as 'Talk', so that be more familiar to you. First I recommend opening the 'Market' app on your phone, then Menu>My Apps to see if this application requires an update. It will display a list on top of all applications that need to be updated. If nothing exists, tap 'Home' and go into 'Settings>Applications>Manage Applications>Talk, then tap 'Clear Cache' and 'Clear Data' to remove the history of that application and stop the notifications. The app will remain on your phone for future use, if you desire to take advantage of it. Read more about Google Talk here
Thank you!
AdamE_VZW
Follow us on Twitter @VZWSupport

Pixelated images when dropped into PSE

Images that look great on my desktop become pixelated when I put them into PSE. This has never happened before and I am not sure what the problem is... Any help would be appreciated! Thanks

Try viewing your images at a viewing % (percentage) of 100% (actual pixels), 50% or 25%.
Other viewing %'s will make images look pixelated.
MTSTUNER

Missing Images when Automating Web Gallery in CS3

HI
I'm new so please be kind! I am trying to automate a web gallery in Photoshop CS3 but every time I run it it misses one image. I have renamed the image to no avail.Its a jpeg like all the others - nothing at all outstanding about it. I have purged the folder cache through Bridge. No difference. I have tried to do it through CS3 and through Bridge, no difference. I have even turned the computer off and on again!Of course the one its skipping is one I really want in the gallery!
I am running a Mac OS X 10.5.5 on a 2Ghz Destop
Thanks

You're a genius! I left both the jpeg and the psd in the same folder - it skipped the jpeg again but found the psd file.
Thanks so much
Chris

WAD 7.0 - Navigation Pane Web Item with Old 3.x features

Hi Experts,
Is there a way to get the WAD 3.x version Navigation pane in WAD 7.0.
Navigation pane in WAD 7.0 is missing those "beautiful navigation icons" to add/remove a free char. into rows/columns and also to set filter values.
We are on the latest SP - BW 7.0.
Any suggestions, will be appreciated.
Thanks
CK

Hello,
I struggled with the same issue ...
but here is a sollution. don not select a navigation pane but use the filter pane.
in the filterpane you can define the number of kollums.
and with drag and drop from the filter pane to the report you can use the same functions as wth the navigation pane.
really works
good luck

Proportionaly scaling down background image when restoring down browser window

Hi all, i need some help, i want to minimize(scale or restore down) window to not-fullscreen browser window (and ajusting size of window manually over arrows in the corners of the window) and retain background picture full size (i need to picture proportionally follows screen scaling).
I`m new into flash stuff, so please tell me if it is the code or what, and if you know part of code that will do the job, write me down!
Thanks!

I take it you want a liquid effect. I wrote a site that does that or rather the background of this site does that http://www.droolpigs.com/ . It's fairly simple just tell the backrgound to change width and height on stage resize.
    public class NuPigs2 extends MovieClip
        var holder:btnHolder; // container for nav buttons
        var onStage:*;     // this can be anything
        var ratio:Number;
        var rRatio:Number;
        var newRatio:Number;
        var com:FLVPlayback;
        var bkg:*;
        public function NuPigs2(){
            com = new FLVPlayback();
            setCom("droolPigsWrestling.flv");                     // set the video for player com
            addChildAt(com, 0);
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;    // this is needed for resizing to work
            onStage = com;                                                   // the video player is assigned to onStage
            ratio = onStage.height/onStage.width;
            rRatio = onStage.width/onStage.height;
            addHolder();
            fillBG();
            stage.addEventListener(Event.RESIZE, fillBG);
////////////////////// FILL BG ////////////////////////
// this code makes the video resize with the stage
        function fillBG(evt:Event = null):void {
            newRatio = this.stage.stageHeight/this.stage.stageWidth;
            holder.x = this.stage.stageWidth - (holder.width +25);    // position the buttons on the right
            holder.y = 50;
            if (newRatio > ratio){
                 onStage.height = this.stage.stageHeight;
                 onStage.width = (this.stage.stageHeight * rRatio);
                else {
                  onStage.width = this.stage.stageWidth;
                  onStage.height = this.stage.stageWidth * ratio;

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;

WAD: Background-Image when dropping Web-Item

Similar Messages

Maybe you are looking for