LightBox issue

Hi experts,
I have a problem in useing lightbox in iframe.
Please let me how i can use the lightbox in Iframe.
thanks in advance
Monalisha

Hi experts,
I have a problem in useing lightbox in iframe.
Please let me how i can use the lightbox in Iframe.
thanks in advance
Monalisha

Similar Messages

  • Safari 6 lightbox issues

    Please use this page as an example for triggering this error.  I have noticed that the rendering issue happens on multiple other lightboxes and pages:
    http://www.jacklmoore.com/colorbox/example1/
    Resize your browser window so that you have to scroll down to the last example link on this page.  When you click the link, the lightbox should pop up.  While the lightbox is still up, scroll the browser window all the way up.  Now click the black background to close the lightbox.  When you scroll down you should notice fragments of black background still on the screen.  These will disappear if you select text over it or resize your browser.
    Any ideas on why this is happening?  It might be an issue with Mountain Lion specifically as well.

    I can reproduce this issue. I captured movie that my reproducing the problem. You can see it from the following:
      http://www.youtube.com/watch?v=GgNGxbdrkz0
    My environment is:
      MacBook Air 13-inch, Late 2010
      Processor:  2.13 GHz Intel Core 2 Duo
      Memory: 4 GB 1067 MHz DDR3
      Graphics: NVIDIA GeForce 320M 256 MB
      Software: OS X 10.8.1 (12B19)
      Safari: Version 6.0 (8536.25)

  • Lightbox issues with chrome

    I have a lightbox with embbeded youtube html in it...
    I have the default fading to darken the rest of the website underneath...
    Everything works fine in IE on Safari...but in chrome the youtube video appears at about 50% transparency...and the underlying content is not dimmed?
    Any suggestions?
    Thanks
    EDIT
    its screwed up with firefox as well

    issue solved...
    was using the opacity slider by effects for the target, rather then the opacity slider in the fill for the target

  • Why is the viewport markup not scaling my site correctly for mobile device?

    Firstly, thank you in advance for taking the time to look into my comment/question/issue.
    Secondly, I have ran the validation with WC3 but have not had a moment to edit and update the corrections. Hoping that will fix the (other) issue I have with the light box not working correctly.
    O.k. on to the primary issue... simply put, when viewing on my (and checking on other's devices), my site doesn't scale correctly to the viewport. Sometimes it scales correctly, but you can "pinch" the screen to zoom out and the site scales down and justifies left.
    Any thoughts as to what I have missed here?
    url:
    http://www.toddrlewis.com
    thank you again!
    -T

    Aside from the lightbox issues I am having, I was able to get the code cleaned up.
    Issue still exist after some more tinkering. Code responds, and loads to the browser size correctly. However, you can re-size on a mobile device and it backs all the way out to about 50%, and justifies left side of the browser.
    I've never ran into this type of issue before. But this is the first time I've integrated it with a site I've built from the ground up based on the Bootstrap framework.
    All other times, framework and meta tag were already applied and no issues arose.

  • Update - Lightbox Display Centering Issue

    Upon updating my Adobe Muse software, it appears its created an issue that effects my lightbox display composition widgets. They don't seems to be centered in the webpage anylonger? Help?

    Hi Mark,
    Unfortunately you hit a bug that causes the lightbox to be off center. This happens if the Target inside the Container for each Composition widget has different strokes for different states.
    Until we release a fix for the bug, please make sure you use the same stroke for all the states of a Target, or do not use a stroke at all for that Target. In your case, the Normal/Rollover/Mouse Down states all have a red stroke, while the Active state has no stroke. You can easily select each Target using Layers panel, and then from the states panel select the Active state and use the delete button from the lower-right corner to clear that state's customizations, including stroke.
    Sorry about the inconvenience. Let us know if workaround fixes the issue for you.

  • Issues with Video Lightbox Gallery from Muse Exchange...

    I've been trying to customize the Video Lightbox Gallery from the exchange, Video Gallery Lightbox | Exchange | Adobe Muse CC
    I'm using embed codes from Vimeo. My first issue was that when I replace the placeholder embed code with my Vimeo code, the frame size is considerably smaller. From Vimeo it is 500x281 and in the widget it is 700x396. So I changed the frame size in my Vimeo embed and that seemed to work. Now, though, when a preview the page it plays fine in the window, but when I enter full screen and then escape from that while the video is playing to go back the smaller window, it jumps up so far up the screen it is off the page... It doesn't happen with the placeholder video and the only difference I can see is that it's from YouTube and mine is from Vimeo. I haven't change any of the settings except for the embed code. Can anyone help me with this?

    I wanted to add that I am using on one page design and I have multiple video galleries further down the page. What I've noticed is that no matter which thumbnail I play and enter into full screen, when I hit escape, that window jumps all the way to the top instead of staying locked to where is originated. Again, it doesn't do it with the placeholder video, only when I replace it with my embed codes from Vimeo. This is very frustrating because I am so close to finishing and this issue is holding me up. I've searched and searched and cannot find the answer... is there anyone who can help, please?

  • Issue with Lightbox Gallery

    Hello,
    This should hopefully be a minor problem, I just can't figure it out.
    I have a lightbox gallery set up, and it works perfectly except once clicked on, underneath the image it has this large white space area underneath it which contains the 'prev,' and 'next' buttons.
    Could anyone possibly look at my website/coding to see if I've made a newbie mistake here?
    Any help at all would be hugely appreciated!
    Cheers!
    My site:
    http://www.paulricedesign.com/photo.html

    As a newbie you have done very well so keep it up.  Just keep working on it and read widely about web designs and keep visiting people's sites to get new ideas.
    Good luck.

  • Issues validating code with lightbox title customization

    I'm getting some fairly odd validator errors http://validator.w3.org/check?uri=http%3A%2F%2Fwww.strikingsites.com%2F&charset=%28detect+ automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.1
    Here is a snippet of one of the images that are causing the errors:
    Example
    <a href="images/home_work1FULL.jpg;" rel="lightbox[1]" title="Logo design, brand identity and web design for Transplete &lt;a href=&quot;http://www.transplete.com&quot TARGET=&quot;_blank&quot&gt;Visit Site&lt;/a&gt;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('work1','','images/home_work1HOVER.jpg',1)"><img src="images/homeWORK1.jpg" alt="Striking Sites Web Design" name="work1" width="144" height="86" border="0" id="work1" /></a>
    Basically I am trying to have rollover images linked open using lightbox javascript and have links in the caption. Note that I'm just building the site, so none of the links work, but it can be viewed at http://www.strikingsites.com.
    Thanks all

    sorry guys, here is the code that needs help:
    Example
    <a href="images/home_work1FULL.jpg;" rel="lightbox[1]" title="Logo design, brand identity and web design for Transplete &lt;a href=&quot;http://www.transplete.com&quot TARGET=&quot;_blank&quot&gt;Visit Site&lt;/a&gt;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('work1','','images/home_work1HOVER.jpg',1)" ><img src="images/homeWORK1.jpg" alt="Striking Sites Web Design" name="work1" width="144" height="86" border="0" id="work1" /></a>

  • Lightbox Image issue

    Good afternoon,
    I have DL and added to my website a gallery.
    Within the pop up image the Prev, Next and Close.gif images are missing when I click on a image..
    I can see them within DW, but not on the pop up window.
    I do not have a host yet, so everything is on my internal C:/ drive.
    Everything (images) is under e.g: C:users/myname/desktop/ghp1968/images/lightbox/lightbox-prev, next and close.gif    
    In the Jquery and lightbox JS files, the image path is /images/lightbox/lightbox-next, prev and close.gif.
    This is also the path in the page that I have the gallery.
    Are you able to advise where I might be going wrong.
    *** Additionally, the border is white on the image pop up. Is it possible/where is it possible to change the colour.
    Thanks
    Gary Horne

    Here is the feed:
    http://feeds.feedburner.com/RockBlockPodcast
    The Website:
    http://www.rockblock.wordpress.com
    And the iTunes link- The picture comes up here but when I search for it the purple man still comes up
    http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=260388815
    My old podcast I did with libsyn and this is the website:
    http://www.top10countdown.libsyn.com
    I don't have access to the feed on my libsyn one
    Message was edited by: rockblock

  • Lightbox - moving a trigger box issue

    I am trying to create a lightbox that can handle an embedded youtube video.
    Essentially, I place the lightbox within  a tab widget and that works fine. When I try and move the trigger box from right to left it gets to a certain point and then snaps back to the original position I started to move it from, and won't allow me to move it to where I want it.
    I am running Muse 7.2 and the muse file is saved locally on to my desktop. I have saved the assets for the imagery and whatnot on to my companies server.
    Thanks

    Well, buying a new server and keeping it separate would be always be better. you may also want to upgrade your sql 2005 instance to 2012 or higher.
    Whether you can accommodate it on the existing server or not depends on the existing work load on new sqlserver 2012.  if you are already getting metrics for past few days, try to check the cpu and memory peak workloads metrics. if you are already being
    pegged out, then may be migrating  to the server might not be best option.
    Also, what kind of workload does the web-sql server has? are you going to install the files on the same drives?. keep them separate.
    if sql server is clustered with multiple nodes(such as single instance on 2 nodes), you can install sql server instance on the passive node.  also, web-sql server specs are relatively small ,so, it should be okay. does your existing web sql server work
    well with its current configuration? 
    Hope it Helps!!

  • Composition Lightbox editing issues

    I am struggling with Compostion/Lightbox Display/ to embed videos frmo Vimeo.
    When I want to add more thumbnails at the top it is difficult to place the video.
    The first three work, but when I hit the arrow to add a fourth and then embed the fourth target, ... instead it edits the the third target instead.

    I'm unable to reproduce the problem with embedding a video on an additional fourth target in a Composition Lightbox.
    The default three Target Containers have an Image frame within their targets. However, when you add more slides to the Composition, they just have an empty Container where you would be placing the HTML embedding code for the video.
    I would suggest removing the Image frames from the Containers of the first three targets as well (in order to maintain consistency) and place video on each of the Target containers. The default Fill color for the Container is black so you might find it a little inconvenient noticing the placed HTML unless you hover over the container or change the color of the Container (as the Youtube player frame is black in color too, probably the same for Vimeo)
    If the above doesn't help, please try re-inserting the Composition Lightbox and follow the above steps.
    Thanks,
    Vinayak

  • Lightbox gallery issue

    Hi everyone, I have a problem with the thickbox gallery. Im using dreamweaver CS5. My thickbox gallery was working just fine. But since I added a slideshow at the top of my website The thickbox stopped working properly. Now everytime I click on a picture everything turns dark (as it used to until the image pops up) and a little time bar appears in the middle as showing that something is trying to happen.
    I don't know if someone can help me through mail. Or what do you need to be pasted. The problem is that I don't want to break any rule.

    As a newbie you have done very well so keep it up.  Just keep working on it and read widely about web designs and keep visiting people's sites to get new ideas.
    Good luck.

  • Lightbox images not showing when uploaded to my website

    Hello
    I'm creating a new website for my photography business, and have created three 'gallery' pages which are basically just a lightbox gallery on each page with 20 images in.
    I uploaded my first page, gallery1, and the associated images and went to test it and some of the thumbnail images didn't appear. I renamed the images in my 'gallery1 thumbnails' folder (which had originally been the same names as the images in gallery1) by adding 'tb' at the end of each image name and reuploaded them to my host and it resolved the problem. I uploaded gallery2 in the same way and ran into the same problem. I renamed the images again and reuploaded as I had before to fix the problem, but it didn't fix it this time. I changed the names in gallery3 thumbnails first and uploaded them and they uploaded perfectly. I went back to gallery2, and noticed that all the images I was having a problem with had a '_' character in them. I took that out, reuploaded, still not working. I've double checked everything's as it should be, reuploaded everything a couple more times for good measure, and it works on live view and when I open the file on my computer but once they're uploaded to my host it doesn't work. Can anyone shed a bit of light on this for me? Page in question in here: http://www.emmarichards.co.uk/gallery-2.html and code is here:
    <!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>Barnsley wedding photographer - Emma Richards Photography</title>
    <style type="text/css">
    <!--
    body {
              font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
              background-color: #FFFFFF;
              margin: 0;
              padding: 0;
              color: #000;
              background-image: url();
              background-repeat: repeat;
              margin-top: 20px;
              margin-bottom: 10px;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
              padding: 0;
              margin: 0;
    h1, h2, h3, h4, h5, h6, p {
              margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
              padding-right: 15px;
              padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
              border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
              color:#414958;
              text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
              color: #4E5869;
              text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
              text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
              width: 80%;
              max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
              min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
              background-color: #FFF;
              margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    /* ~~the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo~~ */
    .header {
              background-color: #FFFFFF;
    /* ~~ This is the layout information. ~~
    1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    .content {
              padding: 10px 0;
              font-size: 90%;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
              padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The footer ~~ */
    .footer {
              padding: 10px 0;
              background-color: #FFFFFF;
              font-size: xx-small;
              color: #f08080;
    /* ~~ miscellaneous float/clear classes ~~ */
    .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: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
              float: left;
              margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
              clear:both;
              height:0;
              font-size: 1px;
              line-height: 0px;
    -->
    </style>
    <link href="css/lightbox.css" rel="stylesheet" type="text/css" />
    <link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script src="scripts/lightbox.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
    <style type="text/css">
    /* BeginOAWidget_Instance_2127022: #gallery */
                        .lbGallery {
              /*gallery container settings*/
              background-color: #ffffff;
              padding-left: 20px;
              padding-top: 20px;
              padding-right: 20px;
              padding-bottom: 20px;
              width: 100%;
              height: auto;
              text-align: center;
                        .lbGallery ul { list-style: none; margin:0;padding:0; }
                        .lbGallery ul li { display: inline;margin:0;padding:0; }
                        .lbGallery ul li a{text-decoration:none;}
                        .lbGallery ul li a img {
                                  /*border color, width and margin for the images*/
                                  border-color: #ffffff;
                                  border-left-width: 0px;
                                  border-top-width: 0px;
                                  border-right-width: 0px;
                                  border-bottom-width: 0px;
                                  margin-left:5px;
                                  margin-right:5px;
                                  margin-top:5px;
                                  margin-bottom:5px:
                        .lbGallery ul li a:hover img {
                                  /*background color on hover*/
                                  border-color: #ffffff;
                                  border-left-width: 0px;
                                  border-top-width: 0px;
                                  border-right-width: 0px;
                                  border-bottom-width: 0px;
                        #lightbox-container-image-box {
                                  border-top: 0px none #ffffff;
                                  border-right: 0px none #ffffff;
                                  border-bottom: 0px none #ffffff;
                                  border-left: 0px none #ffffff;
                        #lightbox-container-image-data-box {
                                  border-top: 0px;
                                  border-right: 0px none #ffffff;
                                  border-bottom: 0px none #ffffff;
                                  border-left: 0px none #ffffff;
    /* EndOAWidget_Instance_2127022 */
    </style>
    <link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2127022" binding="#gallery" />
      <oa:widget wid="2141544" binding="#MenuBar" />
    </oa:widgets>
    -->
    </script>
    <style type="text/css">
    /* BeginOAWidget_Instance_2141544: #MenuBar */
    /* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
              these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
               These assume the following widget classes for menu layout (set in a preset)
              .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
              .MenuBarVertical - vertical main bar; all submenus are pull-right.
              You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
              They only apply to horizontal menu bars:
                        MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
                        MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
                        MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned. 
                        MenuBarFixedCentered -  - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                                                                and centered in its parent container.
                        MenuBarFullwidth - Grows to fill its parent container width.
              In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
              with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
              there are a few rules where this was not possible. Those rules are so noted in comments.
    #MenuBar  {
              background-color:#ffffff;
              font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                                                                                            MenuItem, and MenuItemLabel
                                                                                                                            at a given level all use same definition for ems.
                                                                                                                            Note that this means the size is also inherited to child submenus,
                                                                                                                            so use caution in using relative sizes other than
                                                                                                                            100% on submenu fonts. */
              font-weight: normal;
              font-size: 16px;
              font-style: normal;
              padding:0;
              border-color: #ffffff #ffffff #ffffff #ffffff;
              border-width:0px;
              border-style: none none none none;
    /* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
    widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
    in this section. These have very low specificity, so be careful not to accidentally override them. */
    .MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
              display:none;
    .MenuBarLeftShrink {
              float: left; /* shrink to content, as well as float the MenuBar */
              width: auto;
    .MenuBarRightShrink {
              float: right; /* shrink to content, as well as float the MenuBar */
              width: auto;
    .MenuBarFixedLeft {
              float: left;
              width: 80em;
    .MenuBarFixedCentered {
              float: none;
              width: 80em;
              margin-left:auto;
              margin-right:auto;
    .MenuBarFixedCentered br {
              clear:both;
              display:block;
    .MenuBarFixedCentered .SubMenu br {
              display:none;
    .MenuBarFullwidth {
              float: left;
              width: 100%;
    /* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
    #MenuBar  .MenuItemContainer {
              padding: 0px 0px 0px 0px;
              margin: 0;           /* Zero out margin  on the item containers. The MenuItem is the active hover area.
                                            For most items, we have to do top or bottom padding or borders only on the MenuItem
                                            or a child so we keep the entire submenu tiled with items.
                                            Setting this to 0 avoids "dead spots" for hovering. */
    #MenuBar  .MenuItem {
              padding: 0px 0px 0px 0px;
              background-color:#ffffff;
              border-width:1px;
              border-color: #cccccc #ffffff #cccccc #ffffff;
              border-style: none solid none solid;
    #MenuBar  .MenuItemFirst {
              border-style: none none none none;
    #MenuBar .MenuItemLast {
              border-style: none solid none none;
    #MenuBar  .MenuItem  .MenuItemLabel{
              text-align:center;
              line-height:1.4em;
              color:#333333;
              background-color:#ffffff;
              padding: 0px 0px 0px 0px;
              width: 10em;
              width:auto;
    .SpryIsIE6 #MenuBar  .MenuItem  .MenuItemLabel{
              width:1em; /* Equivalent to min-width in modern browsers */
    /* First level submenu items */
    #MenuBar .SubMenu  .MenuItem {
              font-family: Arial, Helvetica, sans-serif;
              font-weight: normal;
              font-size: 14px;
              font-style: normal;
              background-color:#ffffff;
              padding:0px 2px 0px 0px;
              border-width:1px;
              border-color: #cccccc #cccccc #cccccc #cccccc;
              /* Border styles are overriden by first and last items */
              border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst {
              border-style: solid solid none solid;
    #MenuBar  .SubMenu .MenuItemFirst .MenuItemLabel{
              padding-top: 6px;
    #MenuBar .SubMenu .MenuItemLast {
              border-style: solid solid solid solid;
    #MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
              padding-bottom: 6px;
    #MenuBar .SubMenu .MenuItem .MenuItemLabel{
              text-align:left;
              line-height:1em;
              background-color:#ffffff;
              color:#333333;
              padding: 6px 12px 6px 5px;
              width: 7em;
    /* Hover states for containers, items and labels */
    #MenuBar .MenuItemHover {
              background-color: #ffffff;
              border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
              background-color: #ffffff; /* consider exposing this prop separately*/
              color: #000000;
    #MenuBar .MenuItemHover .MenuItemLabel{
              background-color: #ffffff;
              color: #000000;
    #MenuBar .SubMenu .MenuItemHover {
              background-color: #ffffff;
              border-color: #cccccc #cccccc #cccccc #cccccc;
    #MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
              background-color: #ffffff;
              color: #333333;
    /* Submenu properties -- First level of submenus */
    #MenuBar .SubMenuVisible {
              background-color: #ffffff;
              min-width:0%;  /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
              border-color: #ffffff #ffffff #ffffff #ffffff;
              border-width:0px;
              border-style: none none none none;
    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
              top: 100%;          /* 100% is at the bottom of parent menuItemContainer */
              left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                                                      and your personal taste.
                                                      0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                                                      on MenuItemContainer and MenuItem on the parent
                                                      menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                                                      the dropdown with the left of the menu item label.*/
              z-index:10;
    #MenuBar.MenuBarVertical .SubMenuVisible {
              top: 0px;
              left:100%;
              min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
    /* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
    #MenuBar .MenuLevel1 .SubMenuVisible {
              background-color: #ffffff;
              min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
              top: 0px;          /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                                            that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                                            vertically 'centered' on its invoking item */
              left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                                            negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                                            to use px or ems to get the offset you want. */
    /* IE6 rules - you can delete these if you do not want to support IE6 */
    /* A note about multiple classes in IE6.
    * Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
    * giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
    * Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
    * all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
    * problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
    * Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
    * syntax for that. Since IE6 both applies rules where
    * it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
    * So, we put the multiple class rule first. IE6 will mistakenly apply this rule.  We follow this with the single-class rule that it would
    * mistakenly override, making sure the  misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
    * We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
    * the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
    * css style block to make it easy to delete if you want to drop IE6 support.
    * If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
    * The 'SpryIsIE6' class is placed on the HTML element by  the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
    .SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector  */{
              background-color: #ffffff; /* consider exposing this prop separately*/
              color: #000000;
    .SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector  */{
              background-color: #ffffff; /* consider exposing this prop separately*/
              color: #333333;
    .SpryIsIE6 #MenuBar .SubMenu .SubMenu  /* IE6 selector  */{
              margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
    /* EndOAWidget_Instance_2141544 */
    </style>
    </head>
    <body>
    <div class="container">
      <div class="header">
        <div align="center">
          <p><a href="index.html"><img src="Layout/watermark-coral-jpeg-200px.jpg" width="200" height="182" alt="wedding photgraphers barnsley" /></a></p>
          <table width="500" border="0">
            <tr>
              <td><a href="about.html"><img src="Layout/about-c.png" width="145" height="28" alt="wedding photography barnsley" /></a></td>
              <td><a href="weddings.html"><img src="Layout/weddings-c.png" width="145" height="28" alt="wedding photographer barnsley" /></a></td>
              <td><a href="gallery.html"><img src="Layout/gallery-c.png" width="145" height="28" alt="wedding photographers barnsley" /></a></td>
              <td><a href="pricing.html"><img src="Layout/pricing-c.png" width="145" height="28" alt="wedding photography barnsley" /></a></td>
              <td><script type="text/javascript">
    // BeginOAWidget_Instance_2141544: #MenuBar
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
          widgetID: "MenuBar",
                widgetClass: "MenuBar  MenuBarLeftShrink",
                insertMenuBarBreak: true,
          mainMenuShowDelay: 100,
          mainMenuHideDelay: 200,
          subMenuShowDelay: 200,
          subMenuHideDelay: 200
    // EndOAWidget_Instance_2141544
                </script>
                <img src="Layout/engagements-c.png" width="145" height="28" alt="barnsley wedding photographer" />
                <script type="text/javascript">
    // BeginOAWidget_Instance_2141544: #MenuBar
    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
          widgetID: "MenuBar",
                widgetClass: "MenuBar  MenuBarLeftShrink",
                insertMenuBarBreak: true,
          mainMenuShowDelay: 100,
          mainMenuHideDelay: 200,
          subMenuShowDelay: 200,
          subMenuHideDelay: 200
    // EndOAWidget_Instance_2141544
                  </script></td>
              <td><a href="http://www.emmarichardsphotography.com"><img src="Layout/blog.png" width="145" height="28" alt="wedding photographer barnsley" /></a></td>
              <td><a href="contact.html"><img src="Layout/contact-c.png" width="145" height="28" alt="wedding photography barnsley" /></a></td>
            </tr>
          </table>
          <p> </p>
        </div>
      <!-- end .header --></div>
      <div class="content">
        <div align="center">
          <table width="80%" border="0">
            <tr>
              <td><div id="gallery" class="lbGallery">
                <ul>
                  <p><li> <a href="Images/Gallery2/Abbie and Ben 0567.jpg" title=""><img src="Images/Gallery2/Thumbnails/Abbie and Ben 0567tb.jpg" alt="wedding photographers barnsley" /></a> </li>
                  <li> <a href="Images/Gallery2/Laura Mal 046.jpg" title=""><img src="Images/Gallery2/Thumbnails/Laura Mal 046tb.jpg" alt="wedding photographer barnsley" /></a> </li>
                  <li> <a href="Images/Gallery2/img0056bw.jpg" title=""><img src="Images/Gallery2/Thumbnails/img0056bwtb.jpg" alt="wedding photographers sheffield" /></a> </li>
                  <li> <a href="Images/Gallery2/ka319.jpg" title=""><img src="Images/Gallery2/Thumbnails/ka319tb.jpg" alt="wedding photography barnsley" /></a> </li>
                 <li> <a href="Images/Gallery2/no crying.jpg" title=""><img src="Images/Gallery2/Thumbnails/no cryingtb.jpg" alt="wedding photographers barnsley" /></a> </li></p>
                 <p><li> <a href="Images/Gallery2/img5549.jpg" title=""><img src="Images/Gallery2/Thumbnails/img5549tb.jpg" alt="wedding photographer barnsley" /></a> </li>
                  <li> <a href="Images/Gallery2/jr89.jpg" title=""><img src="Images/Gallery2/Thumbnails/jr89tb.jpg" alt="wedding photography barnsley" /></a> </li>
                  <li> <a href="Images/Gallery2/img3239.jpg" title=""><img src="Images/Gallery2/Thumbnails/img3239tb.jpg" alt="wedding photographers barnsley" /></a> </li>
                  <li> <a href="Images/Gallery2/jr2.jpg" title=""><img src="Images/Gallery2/Thumbnails/jr2tb.jpg" alt="wedding photographers barnsley" /></a> </li>
                 <li> <a href="Images/Gallery2/sa711.jpg" title=""><img src="Images/Gallery2/Thumbnails/sa711tb.jpg" alt="" /></a> </li></p>
                 <p><li> <a href="Images/Gallery2/JamesRuth0056.jpg" title=""><img src="Images/Gallery2/Thumbnails/JamesRuth0056tb.jpg" alt="wedding photographers barnsley" /></a> </li>
                  <li> <a href="Images/Gallery2/mr mrs.jpg" title=""><img src="Images/Gallery2/Thumbnails/mr mrstb.jpg" alt="wedding photography barnsley" /></a></li>
                  <li><a href="Images/Gallery2/ka5.jpg" title=""><img src="Images/Gallery2/Thumbnails/ka5tb.jpg" alt="wedding photographer barnsley" /></a></li>
                  <li> <a href="Images/Gallery2/run.jpg" title=""><img src="Images/Gallery2/Thumbnails/runtb.jpg" alt="wedding photographers barnsley" /></a> </li>
                 <li> <a href="Images/Gallery2/img3440.jpg" title=""><img src="Images/Gallery2/Thumbnails/img3440tb.jpg" alt="wedding photographers barnsley" /></a> </li></p>
                 <p><li> <a href="Images/Gallery2/img3307.jpg" title=""><img src="Images/Gallery2/Thumbnails/img3307tb.jpg" alt="wedding photographers barnsley" /></a> </li>
                  <li> <a href="Images/Gallery2/centerpiece 2.jpg" title=""><img src="Images/Gallery2/Thumbnails/centerpiece 2tb.jpg" alt="wedding photographer barnsley" /></a> </li>
                  <li> <a href="Images/Gallery2/jr102.jpg" title=""><img src="Images/Gallery2/Thumbnails/jr102tb.jpg" alt="wedding photography barnsley" /></a> </li>
                  <li> <a href="Images/Gallery2/img0523.jpg" title=""><img src="Images/Gallery2/Thumbnails/img0523tb.jpg" alt="wedding photography barnsley" /></a> </li>
                 <li> <a href="Images/Gallery2/hug.jpg" title=""><img src="Images/Gallery2/Thumbnails/hugtb.jpg" alt="wedding photographers barnsley" /></a> </li></p>
                </ul>
              </div>
              <script type="text/javascript">
    // BeginOAWidget_Instance_2127022: #gallery
                        $(function(){
                                  $('#gallery a').lightBox({
                                            imageLoading:                              'Layout/spin.gif',                    // (string) Path and the name of the loading icon
                                            imageBtnPrev:                              'Layout/prev.jpg',                              // (string) Path and the name of the prev button image
                                            imageBtnNext:                              'Layout/next.jpg',                              // (string) Path and the name of the next button image
                                            imageBtnClose:                              'Layout/close.png',                    // (string) Path and the name of the close btn
                                            imageBlank:                                        'images/lightbox/lightbox-blank.gif',                              // (string) Path and the name of a blank image (one pixel)
                                            fixedNavigation:                    false,                    // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
                                            containerResizeSpeed:          400,                               // Specify the resize duration of container image. These number are miliseconds. 400 is default.
                                            overlayBgColor:                     "#ffffff",                    // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
                                            overlayOpacity:                              0,                    // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
                                            txtImage:                                        'Image',                                        //Default text of image
                                            txtOf:                                                  'of'
    // EndOAWidget_Instance_2127022
                </script><div align="center"> </div></td>
            </tr>
            <tr>
              <td><div align="center">
                <table width="100" border="0">
                  <tr>
                    <td width="50"><div align="right"><a href="gallery.html"><img src="Layout/prev2.jpg" alt="wedding photographers barnsley" width="63" height="32" /></a></div></td>
                    <td width="50"><a href="gallery-3.html"><img src="Layout/next2.jpg" alt="wedding photographers sheffield" width="63" height="32" /></a></td>
                    </tr>
                </table>
              </div></td>
            </tr>
          </table>
          <p> </p>
        <!-- end .content --></div>
      </div>
      <div class="footer">
        <p align="right"><strong>07794430229 // [email protected]</strong></p>
        <div align="right">
          <table align="right" cellpadding="0" cellspacing="0">
            <tr>
              <td> </td>
            </tr>
          </table>
          <!-- end .footer -->
        </div>
    <div align="right">
          <table align="right" cellpadding="0" cellspacing="0">
            <tr>
              <td> </td>
            </tr>
          </table>
          <!-- end .footer --></div>
      </div>
      <!-- end .container --></div>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-28715127-1']);
      _gaq.push(['_setDomainName', 'emmarichards.co.uk']);
      _gaq.push(['_setAllowLinker', true]);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    </script>
    </body>
    </html>
    If someone could help me with my issue I'd be very greatful, it's been stumping me for hours now.
    Thank you in advance for any help!!

    When I see code errors, I stop trying to trouble shoot  because code errors account for 98% of browser rendering problems.  When you clear up your orphaned tags: mismatched <p></p> and <li></li> tags, then I'll take a closer look.
    PS. Being able to work with code is essential to using DW and 3rd party plugins.  Without basic coding skills, you're going to be lost most of the time.
    HTML & CSS Tutorials -
    http://www.html.net/
    http://w3schools.com/
    Nancy O.

  • Firefox won't allow some sites to open lightboxes or login popups.

    OS: Windows 8.1 (64 bit) x64 AMD E-300 Processor
    Firefox 25.0.1
    I just got a new laptop and have discovered this issue: When I try to click links on some sites to open a lightbox or popup (usually for login boxes or photo slideshows) nothing happens. Absolutely nothing, no error message, no loading screen, no "busy" or "working" animations, no redirect. I've tried the same pages in the latest versions of Internet Explorer and Chrome and they work correctly. These sites work on my old laptop with the same version of Firefox and Vista SP2 32 bit and my work computer with Windows 7 64 bit.
    I've tried disabling Add-Ons one by one and as a group, didn't make a difference. I've cleared the cache and cookies. I've turned by firewall and antivirus/antispyware/antimalware programs on and off.
    Sites with a known issue: "View larger images" on Zillow.com, Login on Moviepilot.com, Login on doubletakedeals.com. I can't remember any others at the moment.

    If you use extensions (Firefox/Tools > Add-ons > Extensions) that can block content (e.g. Adblock Plus, NoScript, Flash Block, Ghostery) then make sure that such extensions aren't blocking content.
    Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).
    *Do NOT click the Reset button on the Safe Mode start window.
    *https://support.mozilla.org/kb/Safe+Mode
    *https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes
    You can inspect and manage the permissions for all domains on the <b>about:permissions</b> page or for the domain in the currently selected tab by clicking the "Site Identity Button" (globe/padlock) on the location bar and "More Information" to open "Page Info" and go to the Permissions tab.
    *https://support.mozilla.org/kb/how-do-i-manage-website-permissions
    *Tools > Page Info > Permissions
    You can delete the permissions.sqlite file to reset all permissions.
    Boot the computer in Windows Safe mode with network support (press F8 on the boot screen) as a test to see if that helps.

  • An issue with multiple checkboxes displaying correctly.

    My company is converting our website to seam. We obviously have a number of existing pages we must convert and at least try to mimic the previous code. The page I'm currently working on is a catalog request form(see: http://www.perma-bound.com/CatalogRequestForm). I'm totally new to jsf's to an extent. I've done some coding in it while we shift to this but I'm far from an expert. I've been able to get the bean and all the code that interacts with the database to work correctly. My issue is that it's seemingly impossible to style selectManyCheckbox's in a manner similar to that page. When we were using standard html, it wasn't an issue because you could put <input>'s wherever you wanted. In the case of selectManyCheckbox's, they insert a table into the code which seemingly isn't alterable. Here's the snippet in question
    <h:form>
         <h:selectManyCheckbox layout="pageDirection" value="#{ catalogRequestAction.catalogs }">
              <f:selectItem itemLabel="Perma-Picks - Grades PreK-12" itemValue="#{ catalogs[ 455164 ] }"/>
              <f:selectItem itemLabel="Graphic Novels - Grades 2-12" itemValue="#{ catalogs[ 455013 ] }"/>
              <f:selectItem itemLabel="Social Studies - Grades PreK-12" itemValue="#{ catalogs[ 455159 ] }"/>
              <f:selectItem itemLabel="References - Grades PreK-12" itemValue="#{ catalogs[ 455669 ] }"/>
              <f:selectItem itemLabel="High/Low - Grades 2-12" itemValue="#{ catalogs[ 455884 ] }"/>
              <f:selectItem itemLabel="Science & Math" itemValue="#{ catalogs[ 455160 ] }"/>
              <f:selectItem itemLabel="Fiction - Grades PreK-12" itemValue="#{ catalogs[ 455056 ] }"/>
              <f:selectItem itemLabel="Curriculum - Grades PreK-6" itemValue="#{ catalogs[ 455491 ] }"/>
              <f:selectItem itemLabel="English Curriculum - Grades 6-12" itemValue="#{ catalogs[ 455201 ] }"/>
              <f:selectItem itemLabel="Spanish - Grades 7-12" itemValue="#{ catalogs[ 455266 ] }"/>
              <f:selectItem itemLabel="College Prep - Grades 7-12" itemValue="#{ catalogs[ 455018 ] }"/>
              <s:convertEntity/>
         </h:selectManyCheckbox>
         <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
              <h:commandButton styleClass="ui-state-default ui-corner-all ui-priority-primary" value="Submit" action="#{ catalogRequestAction.requestCatalogs }"/>
              <h:commandButton styleClass="ui-state-default ui-corner-all ui-priority-secondary" value="Reset" action="reset"/>
         </div>
    </h:form>That code generates this page(http://img299.imageshack.us/img299/6550/82163381.png). As I said before, the actual selection of the boxes will yield the appropriate catalog in the database. However, I seemingly can't figure out how to stylize this in a manner that will work. From my understanding, jsf has access to 2 sets of check boxes(the ones I used and the booleans). I'm more than willing to try alternate code. However, after hours of searching online I've found few if any examples that are doing something similar to what I'm trying to do. I have to imagine that there is some other way to do this because in normal html it is simple. But, I'm just not having any luck.
    Edit: Oh and if it matters we're using Mojarra
    Edited by: beckdawg on May 18, 2009 2:19 PM

    I believe this is IE 9.  Whatever the latest is.  It basically stacks all the images on top of each other.  And after some changes I attempted last night, bevel effect is still on some images after I attempted to remove that effect.  This is an issue in all the browsers.
    http://http://jclementdesign.businesscatalyst.com/graphic-design1.html
    This is a link to my portfolio page of my website.  This is an issue with all the lightboxes.
    Thanks for the help.

Maybe you are looking for