8 Replies Latest reply on Jun 20, 2011 3:08 PM by miralagua

    cell background colors are not showing in preview - help? - DW4

    miralagua

      Hi,

      I created a horizontal table for my menu bar, and gave each cell a different color by creating a separate class for each with background image - image is a block of color created in Photoshop. In design mode they look they way I want, but in preview (Safari) the colors don't show up at all - the whole area is gray, and all I see is the text for each cell. Can someone tell me what I'm doing wrong? Alternatively, is there a better way I can set this up to have different colors for each button?

      Thank you!

        • 1. Re: cell background colors are not showing in preview - help? - DW4
          MurraySummers Level 8

          Seeing your code would sure help, but if the color is a solid one, why use an image at all?  Just give the cell a background color with your CSS.

          • 2. Re: cell background colors are not showing in preview - help? - DW4
            mhollis55 Level 4

            Murray is absolutely correct, seeing your code would help. Pointing us to a web page would be even better.

             

            And I do have to ask, why would you create a table for a menu bar these days?

             

            You can set up a horizontal or vertical menu by using CSS:

             

            http://www.devinrolsen.com/pure-css-horizontal-menu/

             

            http://www.devinrolsen.com/pure-css-vertical-menu/

            • 3. Re: cell background colors are not showing in preview - help? - DW4
              miralagua Level 1

              Thank you. I did it this way because I thought I couldn't set different colors on each button the other way. I just tried using CSS color instead of my background image and now it doesn't show the color at all.

              Here is the code:.cellwbg {     font-family: Arial, Helvetica, sans-serif;     font-size: 16px;     font-style: normal;     line-height: normal;     font-weight: normal;     font-variant: normal;     text-align: center;     vertical-align: middle;     letter-spacing: normal;     padding-top: 20px;     padding-right: 0px;     padding-bottom: 0px;     padding-left: 0px;     background-color: D9C299;     height: 60px;     width: 125px;

              Date: Fri, 17 Jun 2011 11:13:12 -0600

              From: forums@adobe.com

              To: miriseidel@hotmail.com

              Subject: Re: cell background colors are not showing in preview - help? - DW4

               

               

              Murray is absolutely correct, seeing your code would help. Pointing us to a web page would be even better.

               

              And I do have to ask, why would you create a table for a menu bar these days?

               

              You can set up a horizontal or vertical menu by using CSS:

               

              http://www.devinrolsen.com/pure-css-horizontal-menu/

               

              http://www.devinrolsen.com/pure-css-vertical-menu/

              >

              • 4. Re: cell background colors are not showing in preview - help? - DW4
                miralagua Level 1

                I corrected my color by adding # to beginning, but the entire table still shows up gray in the browser.

                • 5. Re: cell background colors are not showing in preview - help? - DW4
                  MurraySummers Level 8

                  We need to see all the code: page and CSS.

                  • 6. Re: cell background colors are not showing in preview - help? - DW4
                    miralagua Level 1

                    Hi, I gave up on making the menu bar with a table, and made a horizontal spry menu bar. I added color and text changes for hover and active. None of this show up on my page.

                    The entire web site is now up. The index page has the new spry menu bar, and as you can see it displays vertically, even though it is coded horizontal, and no colors show up at all. On all other pages, what you see is the links in horizontal format, but you don't see the table with colors that I had made.

                    FYI, I gave up on making each menu item a different color, and just made it all the same, #99CCC. I would really like to have the menu items in different colors, but have to get this up and running.

                    If you need to see any code, let me know.

                    Thanks again.

                     

                    Date: Fri, 17 Jun 2011 11:13:12 -0600

                    From: forums@adobe.com

                    To: miriseidel@hotmail.com

                    Subject: Re: cell background colors are not showing in preview - help? - DW4

                     

                     

                    Murray is absolutely correct, seeing your code would help. Pointing us to a web page would be even better.

                     

                    And I do have to ask, why would you create a table for a menu bar these days?

                     

                    You can set up a horizontal or vertical menu by using CSS:

                     

                    http://www.devinrolsen.com/pure-css-horizontal-menu/

                     

                    http://www.devinrolsen.com/pure-css-vertical-menu/

                    >

                    • 7. Re: cell background colors are not showing in preview - help? - DW4
                      370H55V Level 4

                      NEED to see the code.

                       

                      Otherwise it's like dialing a random phone number, and asking whoever answers, where you left your keys.

                      • 8. Re: cell background colors are not showing in preview - help? - DW4
                        miralagua Level 1
                        Here is the HTML code, and the CSS code for the menu bar follows:

                         

                             ul.MenuBarHorizontal          

                         

                        ></style><style type="text/css"><!body {     background-color: #FFF;     font-family: Arial, Helvetica, sans-serif;}-->



                            h1. Miriam Seidel

                         

                             ul.MenuBarVertical           <!-- end #header ><div id="mainContent"><p> </p><table width="950" border="0" cellspacing="10" cellpadding="12">        <tr>          <td width="106"><p> </p></td>          <td width="766"><p> </p>            <p>Miriam Seidel is a writer, critic and curator whose work is informed by her background in art, music and dance. </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p>          <p> </p></td>        </tr>        <tr>          <td colspan="2" bgcolor="#CCCCCC"><p>c Miriam Seidel 2011 all rights reserved</p></td>        </tr>    </table><script type="text/javascript"><!var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", );var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", );var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", );//></script></body>     <! end #mainContent --></div></html>

                         

                        CSS CODE: @charset "UTF-8"; /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

                         

                        /* The outermost container of the Menu Bar, an auto width box with no margin or padding /ul.MenuBarHorizontal/ 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;     font-family: Arial, Helvetica, sans-serif;     font-size: medium;     color: #FFF;     background-color: #FFCC99;     background-repeat: no-repeat;     left: auto;     top: auto;     right: auto;     bottom: auto;}/ Menu item containers, position children relative to this container and are a fixed width /ul.MenuBarHorizontal li/ 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/ 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/ Menu item containers are same fixed width as parent /ul.MenuBarHorizontal ul li/ Submenus should appear slightly overlapping to the right (95%) and up (-5%) /ul.MenuBarHorizontal ul ul/ 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

                         

                        /* Submenu containers have borders on all sides /ul.MenuBarHorizontal ul/ Menu items are a light gray block with padding and no text decoration /ul.MenuBarHorizontal a/ 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: #6C9;     color: #999;     font-family: Arial, Helvetica, sans-serif;     font-size: medium;     font-style: normal;     line-height: normal;     font-weight: normal;     font-variant: normal;     text-decoration: none;     text-align: center;     vertical-align: middle;     height: 50px;     width: 115px;}/ 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: #FFCC99;     color: #FFF;     font-family: Arial, Helvetica, sans-serif;     text-decoration: none;     font-size: medium;} /******************************************************************************* 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%;     text-align: center;}/ 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/ 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;

                         

                        Date: Mon, 20 Jun 2011 15:30:46 -0600 From: forums@adobe.com To: miriseidel@hotmail.com Subject: Re: cell background colors are not showing in preview - help? - DW4

                         

                         

                        NEED to see the code. Otherwise it's like dialing a random phone number, and asking whoever answers, where you left your keys.
                        >