CSS list-based navigation bar (Wordpress menu) doesn't render.

This website is powered by Wordpress with a custom HTML5/CSS3 theme. However, even after various attempts to debug and recode, the navigation menu (based on WP3's built-in menu feature) fails to render in Firefox, where it renders normally in Safari & Chrome.
Screenshots
Correct rendering (safari): http://cl.ly/CsSi
Firefox: http://cl.ly/CsuP

Looks like a missing ')' in one of the style rules that causes Firefxo to skip all subsequnt rules in that file.<br />
<br />
<pre><nowiki>-moz-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab);</nowiki></pre>
instead of:
<pre><nowiki>-moz-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));</nowiki></pre>
You can see that in the Error Console.
<pre><nowiki>
Warning: Expected declaration but found '-moz-gradient'. Skipped to next declaration.
Source File: http://portfoliography.com/2.0/wp-content/themes/portfolio/style.css
Line: 1165
Warning: Unexpected end of file while searching for closing } of declaration block.
Source File: http://portfoliography.com/2.0/wp-content/themes/portfolio/style.css
Line: 2329</nowiki></pre>
http://portfoliography.com/2.0/wp-content/themes/portfolio/style.css
<pre><nowiki>.welcomebox {
padding: 1.5em;
background-image: -webkit-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));
-khtml-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));-moz-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab);-ms-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));-o-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));-o-gradient(linear,10% 0,10% 100%,from(#d9d9d9),to(#ababab));border-radius: .25em;
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.2);
box-shadow: 0 3px 20px rgba(0,0,0,0.2);
text-shadow: 1px 1px 1px #bfbfbf;
margin-bottom: 10px
</nowiki></pre>

Similar Messages

  • CSS or JS Navigation Bar with inline Styled Search Field

    Does anyone know of a good tutorial on how to create a CSS or
    JS navigation bar that would contain a matching styled search field
    box?
    I have tried creating something like this a couple of times
    using the old JS Navigation Bar wizard in DW, but can't get the
    results I need. I can never seem to add a column that would include
    a search box and have it look right and inline with the rest of the
    navigation.
    For reference, I am trying to do a nav that is somewhat
    similiar to Apple's Nav bar, where the search field is styled to
    match the rest of the Nav and inline with the rest of the buttons.
    Any thoughts?
    Thanks.

    You don't need to use PMM. You can set your menu container to
    position:
    relative and then absolutely position the search box inside.
    Al Sparber - PVII
    http://www.projectseven.com
    Extending Dreamweaver - Nav Systems | Galleries | Widgets
    Authors: "42nd Street: Mastering the Art of CSS Design"
    "destind4film" <[email protected]> wrote in
    message
    news:fkukir$8l4$[email protected]..
    > Hi Al,
    >
    > Thanks for the quick reply. I had actually checked your
    site earlier
    > today,
    > since I have had such an awesome experience with your
    accordion menus.
    >
    > That example is almost exactly what I am trying to do,
    minus the dropdown
    > menu
    > buttons. The buttons currently are just simple rollovers
    that go directly
    > to
    > other pages, but I am trying to place a styled search
    box to the right
    > like
    > your example has.
    >
    > Here is the current page (also using the PVII Accordion
    Menu) that does
    > not
    > have the search added yet, but you can see that I have
    plenty of real
    > estate to
    > include one:
    >
    >
    http://www.dvdflashbacks.com/mrhubcap/
    >
    > Questions:
    > Can the pop menu be used with my current roll over
    images for basic Nav
    > bars
    > like this?
    > How easy is it to add the search field to this menu?
    (This is a PHP/MySql
    > backend for the site using Cartweaver3. I have a php
    search snippet from
    > CW3
    > that I was trying to stick into a table cell next to
    this nav but the cell
    > would never align properly for some reason.)
    >
    > Thank you very much and Merry 'Belated' Christmas!
    >

  • After downloading firefox to a new computer and using sync I no longer have any navigation bar or menu button.

    This is on a windows computer at work. It actually happened on 2 new computers. Before the sync, both the navigation bar and menu button were there. After the sync - Gone! I have tried uninstalling firefox and then reinstalling, but when I reinstall, the problem is already there, and the bookmarks from the sync reappear automatically on the reinstalled version. Is there any way to uninstall the sync?

    Currently UI customizations do not sync. However you can add this about:config.
    services.sync.prefs.sync.browser.uiCustomization.state = true

  • How to remove the tabs based navigation bar?

    I am trying out my hand in portal and i have successfully deployed a sample portal(
    Hot deploy didnt work by the way!). I have a few pages say home, account, messages
    in the portal. Now, what I want is when I click a link on account page, the top
    tab based navigation bar should disappear until I complete certain steps on the
    account page( say, create an account which spans over 2 pages). Only after creation
    of account should i see the tabs again.. is it possible?

    The files you are looking for to change are located under the framework directory
    in your application. The file hportal.inc or vportal.inc has a link to the hnav_bar
    or vnav_bar file. So, you can check if certain criteria has happened and then
    show the links or not show them. Whichever navbar url you included in the EBCC
    tells you which file you should look in
    "Ranjith" <[email protected]> wrote:
    >
    I am trying out my hand in portal and i have successfully deployed a
    sample portal(
    Hot deploy didnt work by the way!). I have a few pages say home, account,
    messages
    in the portal. Now, what I want is when I click a link on account page,
    the top
    tab based navigation bar should disappear until I complete certain steps
    on the
    account page( say, create an account which spans over 2 pages). Only
    after creation
    of account should i see the tabs again.. is it possible?

  • How do set up image based navigation bar in DW CC?

    How do you set up images as the list members that form a navigation bar?

    Spry is gone, true, but CSS most definitely is part of DWCC...
    http://tv.adobe.com/watch/learn-dreamweaver-cc/using-the-css-designer-panel/
    You should be able to follow a css tutorial after familiarizing yourself with the CSS Designer.
    If you don't understand html and css in and of themselves, and you have a budget, you may want to get the Menu Magic DW Extension from Project VII. That would allow you to use the DW Design View interface to make a menu.
    If you have a fair understanding of the basics though, any "jquery menu" or "pure css menu" available freely on the web would do the trick. The vast majority of them come with a quick how to that includes mostly copy/paste instructions.

  • I want to clear the down arrow list on navigation bar, how?

    Most browsers have a down arrow to look for past entries of url's. Alot of those are no use to me now, and some embarrassing. The history is fine, but how to clear that list?
    Tomg

    You can prevent history from appearing in that bar. It will still appear in your history lists.
    Edit: [https://support.mozilla.com/en-US/kb/Location%20bar%20autocomplete#w_how-can-i-control-what-results-the-location-bar-shows-me Location bar autocomplete | How to | Firefox Help]
    Does that fix it?

  • In navigation bar the drop down menu is not holding open when trying to select item - ONLY in Firefox.

    When trying to select item from any drop down in navigation bar the menu shrinks. I seem to not be able to navigate further than 1st item on the drop down list.
    However, it seems to be working in other browsers but not in Firefox.
    The website affected by this behavior is in the following link: http://www.coubroughandco.com
    I am wondering what could possibly be the cause of it.

    Hello,
    I get the same issue. To make sure we are talking about the same thing I have uploaded a screenshot. See below.
    When I hover over 'Buying' the menu pops up. I then move my mouse down over 'Your Budget' nothing happens. I then move the mouse down again over 'Leasehold or Freehold?' the menu disappears. It is not possible to click on the 'Leasehold or Freehold?' link.
    I don't believe Firefox is at fault here. I think the website has not been properly tested to work with Firefox. I am not an expert in web design but other forum contributors here will be able to identify the piece of code in the site that is causing the problem.
    I think the best thing you can do is to make contact with the business to let them know that their website navigation doesn't work for Firefox users.
    I hope that helps.

  • Top Navigation Bar drop down menu's do not work

    Top Navigation Bar drop down menu's do not work. It is only happening on a couple of my site collections and is affecting on the main page of those collections. There is only one web part on the main page, it is the Picture Library Slideshow web part. When
    I remove that web part, the menu's come back and work with no problem. I re-add the web part and the menu's stop working. Not finding any error's in the server logs, there are no visual error's thrown.  Any advice on what might be happening? I've checked
    the Java update on our computers and it has the latest version.  Open to any advice at this point.
    DA
    ~~~~~~~~~ DAnderson

    Hi,
    How does the Top Navigation Bar dropdown menu issue look like?
    Could you please provide a screenshot about the issue, also may detecte the problematic elements by using IE browser developer tool (keyboard F12)?
    Please also check if it is related IE compatibility issue.
    Thanks
    Daniel Yang
    TechNet Community Support

  • How do i bring back my navigation bar after i hid it?

    I accidentally hid my navigation bar and menu bar, now i don't know how to bring it back.
    == This happened ==
    Just once or twice
    == June 30, 2010

    Hit the '''Alt''' key to show the Menu bar, then open View > Toolbars and select Menu bar, so it has a check-mark.

  • Since using windows 8.1, the menu bars and navigation bars as well a the bookmark list ar in very small letters with poor contrast.

    File, edit View etc are in very small light letters as is the navigation bar and when I look through my bookmarks, they too are in small light letters. I need to enlarge them in order to see them. Incidentally the same thing happens on Microsoft Explorer since I downloaded 8.1. It was not so in Windows 8.

    You can set the layout.css.devPixelsPerPx pref on the <b>about:config</b> page to 1.0 or on Windows 8 to 1.25 and if necessary adjust layout.css.devPixelsPerPx starting from 1.0 in 0.1 or 0.05 steps (1.1 or 0.9) to make icons show correctly.
    *http://kb.mozillazine.org/about:config
    See also:
    *https://support.mozilla.org/kb/forum-response-Zoom-feature-on-Firefox-22
    Use an extension to adjust the text size in the user interface and the page zoom in the browser window.
    You can look at this extension to adjust the font size for the user interface.
    *Theme Font & Size Changer: https://addons.mozilla.org/firefox/addon/theme-font-size-changer/
    You can look at the Default FullZoom Level or NoScript extension if web pages need to be adjusted after changing layout.css.devPixelsPerPx.
    *Default FullZoom Level: https://addons.mozilla.org/firefox/addon/default-fullzoom-level/
    *NoSquint: https://addons.mozilla.org/firefox/addon/nosquint/

  • After upgrading to 4.0 my navigation bar no longer appears, it is checked as show in the menu but it doesn't. I downgraded and it still is missing.

    I no longer have a navigation bar.
    It IS checked to show up, it isn't there with it checked or unchecked.

    Try they option to reset toolbars and controls as shown in this link - https://support.mozilla.com/kb/Back+and+forward+or+other+toolbar+items+are+missing

  • Centering a Horizontal CSS only, jQuery, or Spry navigation bar within a Div

    Hello all.  I need a solution for centering a horizontal style nav bar whether it be css only, jQuery or Spry based.  I've been trying to use widgets from the adobe widget browser or other ones I've been able to find online.  I have been able to get the graphic that goes behind the links to span the entire width of the Div, but I can't move the actual links to the center of the screen and get it to stay in the middle like the rest of the elements do when you resize the page.  The links always stay anchored to the left side of the page.  I've been able to move them all the way to the right side of the page through a certain css change, but that is not what I'm looking for.  Do I need to resize the Div, or add a div within the div?  Do I need to split the horizontal width of the single div into three div's and put the nav bar into the middle one?  If that is the solution, how do I add the div's next to each other, I tried  adding a div within the div, but nothing really appears to show up, so that must essentially be a wrong way of going about it.
    Well anyways, I need some advice, somebody please lead me in the right direction on how to get this right.  In the div above the one I'm trying to make this happen in, I have a flash object and it just centers itself perfectly with the div and moves with the rest of the page fluidly when you resize.  And the same goes for a div right above that which contains the company logo.
    Thanks for help in advance.

    This is what I mean by the dotted lines not lining up evenly at the ends.
    Here is the source code for the page, followed by the css:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="description" content="Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultant, Community Engagement" />
    <meta name="keywords" content="Common,Wealth,Web,Solution,Design,Graphic,Development,Interactivity,services,fla sh,php,javascript,ajax,professional,Caleb Wright, Peter Wallis,artist,video,multimedia,production,search engine optimization,SEO,video production design" />
    <meta http-equiv="Content-Type" content="text
    /html; charset=UTF-8" />
    <title>Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultation, Community Engagement</title>
    <link href="stylesMain.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="PNGfix.css" />
    <![endif]-->
    <!--[if lte IE 7]>
    <style type="text/css">
    #hornav ul li { padding: 0 0 0 10px; }
    </style>
    <![endif]-->
    <!--[if lte IE 6]>
    <style type="text/css">
    #wrapper-body, #wrapper-1, #wrapper-2, #wrapper-3 { height: 1%; }
    </style>
    <![endif]-->
    <script type="text/javascript" src="scripts.js"></script>
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <style type="text/css">
    #apDiv1 {
        position:absolute;
        width:1844px;
        height:43px;
        z-index:1;
        left: 64px;
        top: 253px;
    body {
        background-color: #FFF;
    </style>
    <link href="SpryAssets/SpryAccordion_flexible.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    a:link {
        color: #00F;
    </style>
    <style type="text/css">
    #menu {
    width: 700px;
    margin: 0 auto;
    #menu ul {
    padding: 0;
    margin: 0;
    text-align:center;
    list-style:none
    #menu li{
    padding: 0;
    margin: 0;
    display:inline;
    margin-right: -2px;
    #menu a {
    background-color:#66F;
    padding: 6px 15px;
    color: #fff;
    text-decoration: none;
    #menu a:hover {
    background-color:#39C;
    </style>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-3119473-5']);
      _gaq.push(['_setDomainName', 'none']);
      _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>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-3119473-6']);
      _gaq.push(['_setDomainName', 'none']);
      _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>
    <link href="CSSOnlyMenu4/css/menu4.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /* BeginOAWidget_Instance_2141545: #OAWidget */
    #menu4 ul {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 30px;
        letter-spacing: -3px;
        border-top:5px dotted #003399;
        border-bottom:5px dotted #003399;
        margin:20px;
    #menu4 ul li a{
        color: #003399;
        padding: 10px 5px 10px 10px;
        width: 170px;
    #menu4 ul li a:hover span.title{
        color:#00adef;
    #menu4 ul li a span.text{
        font-family: Georgia, serif;
        font-size: 13px;
        color:#c7e7f3;
    /* EndOAWidget_Instance_2141545 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2141545" binding="#OAWidget" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body>
    <div id="wrapper-body">
      <div id="wrapper-1">
        <div id="branding">
          <h1>
          <div>
            <p><img src="images/lorentzpaintinglogo_cropped2.png" width="317" height="110" alt="Lorenz Painting Co." longdesc="http://www.lorenzpainting.com" /></p></div>
          <div id="flash">
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="250" id="FlashID" title="Lorenz Painting Co Flash Widget">
            <param name="movie" value="LorentzBanner.swf" />
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="6.0.65.0" />
            <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="LorentzBanner.swf" width="700" height="250">
              <!--<![endif]-->
              <param name="quality" value="high" />
              <param name="wmode" value="opaque" />
              <param name="swfversion" value="6.0.65.0" />
              <param name="expressinstall" value="Scripts/expressInstall.swf" />
              <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
              <div>
                <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
                </div>
              </div>
              <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
          </object>
          </h1>
    <div>
      <div id="menu4">
        <ul>
          <li><a href=""> <span class="title">Home</span> <span class="text">Why us?</span> </a> </li>
          <li><a href="">Services<span class="text">What we do</span> </a> </li>
          <li><a href=""> <span class="title">Testimonials</span> <span class="text">What they say</span> </a> </li>
          <li><a href=""> <span class="title">Contact</span> <span class="text">How to get in touch</span> </a> </li>
        </ul>
    </div>
    <p> </p>
      <p> </p>
      <p> </p>
    </div>
          <div></div>
        </div>
        <div id="wrapper-2">
          <div id="content-top" class="png"></div>
          <div id="wrapper-3">
            <div id="content-1">
              <div class="content-wrap">
                <p>Home</p>
                <p>Contact</p>
              </div>
            </div>
            <div id="content-2">
              <div class="content-wrap">
    stuff
    <p> </p>
              </div>
            </div>
            <div id="content-bottom"></div>
          </div>
          <div id="footer">
            <p><strong>Lorentz Painting Co., 2011</strong><strong></strong></p>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    swfobject.registerObject("FlashID");
    jQuery("#jQueryUIAccordion").accordion({
            event: "click",
            collapsible: false,
            autoHeight: true
    </script>
    </body>
    </html>
    Be forewarned, there are a bunch of rules in here that don't apply to anything anymore, as it's from a recycled rules from another site I built.  Sorry.
    I will first put the CSS for the main style sheet, and I will put the CSS for the Horizontal Nav Bar in after.
    CSS:
    Main style sheet:
    @charset "UTF-8";
    body
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 1.2em;
        color: #6B6B6B;
        background: #8D927C url(images/bg_body.jpg) repeat-x;
        margin: 0;
        padding: 0;
        min-width: 800px;
        text-align: center;
        background-color: #000;
    h2, h3, h4
        font-size: 16pt;
        font-weight: normal;
        margin: 15px 0 0 0;
    #wrapper-3 p
        padding: 0;
        line-height: 1.35em;
        margin-top: 8px;
        margin-right: 0;
        margin-bottom: 8px;
        margin-left: 0;
    #wrapper-3 ul
        list-style-type: none;
        margin: 8px 0;
        padding: 0;
    #branding
        margin: 0 0 0 0;
    @Generic anchor (link) styles
    a:link, a:visited
        color: #4f4f3f;
    a:hover, a:active
        color: #000000;
    @Inline image styles
    img.float-left
        float: left;
        margin: 0 6px 6px 0;
    img.float-right
        float: right;
        margin: 0 0 6px 6px;
    img.border
        background: #FFF;
        padding: 2px;
        border: 1px solid #999;
    @Tab navbar styles
    #hornav ul
        margin: 0;
        list-style-type: none;
        line-height: normal;
        padding: 0;
        text-align: center;
        margin-bottom: 60px;
        font-size: 0.8em;
        text-transform: uppercase;
    #hornav ul li
        display: inline;
        margin: 0 2px 0 0;
        padding: 3px 0 3px 10px;
    #wrapper-body #wrapper-1 #hornav ul li a br {
        height: 400px;
    #hornav ul li a
        text-decoration: none;
        margin: 0;
        background-repeat: inherit;
        background-position: center center;
        padding-top: 50%;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
    #hornav ul li a:link, #hornav ul li a:visited
        color: #3e3f2f;
    #hornav ul li a:hover, #hornav ul li a:active
        color: #000000;
    @Secondary navigation styles
    #navcontainer
        background: transparent url(images/bg_navlist-top.jpg) no-repeat top center;
        margin: 0;
        padding: 12px 0 0 0;
    #navcontainer ul
        margin: 0;
        list-style-type: none;
        line-height: normal;
        padding: 0 0 12px 0;
        border-top: 1px solid #FFF;
        background: transparent url(images/bg_navlist-bottom.jpg) no-repeat bottom center;
    #navcontainer a
        display: block;
        padding: 3px 6px;
        width: 168px;
        margin: 0 10px;
        background-color: #c4bfac;
        border-bottom: 1px solid #FFF;
    #navcontainer a:link, #navlist a:visited
        color: #FFF;
        text-decoration: none;
    #navcontainer a:hover
        background-color: #90937e;
        color: #FFF;
    @Masthead text styles
    #branding
        margin: 0;
        padding: 0;
    #branding h1
        color: #000;
        padding: 10px 0 0px 0;
        border-top: 4px solid #656e5d;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.3em;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 28px;
        font-style: normal;
        line-height: normal;
        font-weight: normal;
        font-variant: normal;
        margin: 0;
    @Layout styles
    #wrapper-body
        background: transparent url(images/bg_wrapper-body.jpg) no-repeat top right;
        width: inherit;
        margin: 0;
        padding: 0;
    #wrapper-1
        width: auto;
        background: transparent url(images/bg_wrapper-1.jpg) no-repeat;
        margin: 0;
        padding: 0;
    #wrapper-2
        width: 45em;
        text-align: center;
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
    #wrapper-3
        background: url(images/bg_wrapper-3.jpg) repeat-y;
        color: #333;
        text-align: left;
    #content-top
        margin: 0;
        height: 1em;
        background: url(images/bg_content-top.jpg) no-repeat;
        font-size: 0;
        line-height: 0;
    #content-1
        float: left;
        width: 12em;
        font-size: 0.9em;
        padding: 0;
        margin-top: 2em;
        margin-right: 2em;
        margin-bottom: 0em;
        margin-left: 0em;
    #content-2
        float: left;
        width: 40em;
        padding: 0;
        font-size: 0.8em;
        margin-top: 2em;
        margin-right: 0px;
        margin-bottom: 0em;
        margin-left: 0em;
    #content-3
        float: left;
        width: 250px;
        font-size: 10pt;
        margin: 0;
        padding: 0;
    #content-4 {
        width: 190px;
        padding: 0px;
        line-height: 0px;
    #content-bottom
        clear: both;
        height: 1em;
        background: url(images/bg_content-bottom.jpg) no-repeat;
        font-size: 0;
        line-height: 0;
    .content-wrap
        margin: 0;
        padding-top: 0px;
        padding-right: 2em;
        padding-bottom: 5px;
        padding-left: 0px;
    #footer p
        font-size: .75em;
        margin: 12px 0;
    p.content-wrap {
        font-size: 9pt;
        color: #999;
    @Blog post styles
    .date
        float: left;
        height: 52px;
        width: 52px;
        background: url(images/date.png) no-repeat;
        margin-right: 10px;
        padding-top: 0px;
        line-height: normal;
    .date .month
        display: block;
        text-align: center;
        color: #FFF;
        font-size: 11px;
        padding-top: 4px;
        text-transform: uppercase;
    .date .day
        display: block;
        text-align: center;
        padding-top: 5px;
        color: #222;
        font-size: 18px;
        font-weight: bold;
    .meta
        display: block;
        font-size: 11px;
        color: #666;
        clear: right;
    .blog-entry
        clear: both;
        padding-top: 2px;
    #searchform
        margin: 8px 0;
        padding: 0;
    @Search form styles
    #searchform fieldset
        margin: 0;
        padding: 0;
        border: 0;
    #searchform label
        color: #999;
        display: none;
    #searchform input
        width: 160px;
        color: #222;
    #searchform #submitquery
        display: none;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap p {
        line-height: 1.35em;
        text-align: justify;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-1 .content-wrap #Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent p {
        line-height: 1em;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #sprytextarea1 span .content-wrap {
        font-size: .5em;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
        display: none;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website label {
        display: none;
    #website {
        display: none;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
        font-size: 1.1em;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
        font-size: 1.1em;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
        font-size: 4em;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
        font-size: 1em;
    #wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
        font-size: 3em;
    .fieldname {
        font-size: .9em;
    CSS for Horizontal Nav Bar:
    #menu4 {
        width: 829px;
        margin: 0 auto 0 auto;
    #menu4 ul {
        list-style:none;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 30px;
        letter-spacing: -3px;
        line-height: 1.2em;
        border-top:5px dotted #c7e7f3;
        border-bottom:5px dotted #c7e7f3;
        float:left;
        clear:both;
        margin:20px;
        text-align:center
    #menu4 ul li{
        float:left;
    #menu4 ul li a{
        display:block;
        text-decoration:none;
        padding:10px 10px 5px 10px;
        color:#66b8d8;
        width:170px;
    #menu4 ul li a span{
        display:block;
    #menu4 ul li a span.title{
    #menu4 ul li a:hover span.title{
        color:#00adef;
    #menu4 ul li a span.text{
        padding:0px 5px;
        font-family: Georgia, serif;
        font-size: 13px;
        font-style: italic;
        font-weight: normal;
        letter-spacing: normal;
        line-height: 1.6em;
        color:#c7e7f3;
        visibility:hidden;
    #menu4 ul li a:hover span.text{
        visibility:visible;
    Thanks!

  • How can I use my Html/CSS Navigation bar to control an Edge Stage?

    I have an HTML/CSS navigation bar set up in my EDGE created page. The Navbar is not created in edge. I would like to use these buttons to control the stage. 
    Inside the stage the main timeline has labels and stop actions every 1.5 secs to create a horizontally sliding site.
    The labels are as follows: home, work, blog, profile, and contact. I can easily use a symbol created inside edge for example:
    sym.play("home");
    and animate a 6000px width symbol across my 1000px stage in 1000px increments.
    I do not want to use a symbol inside of edge to do this because I cannot create the effect that the html/css navbar has on mouseover inside of edge.
    So I am interested in knowing if I can use this bar to control my main timeline so I don't have to sacrifice design for functionality.
    currently the link list is setup with the standard hyperlink. What code would I use to play the stage on click of the html navbar?
    Many thanks to anyone who can help with this!
    Here is the code for the navbar:
    <div id="menu"><ul class="block-menu">
                        <li><a href="/home" class="three-d">
                                  Dynamic
                                  <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                        </a></li>
                        <li><a href="/demos" class="three-d">
                                  Work
                                  <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                        </a></li>
                        <li><a href="/deals" class="three-d">
                                  Blog
                                  <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                        </a></li>
                        <li><a href="/about" class="three-d">
                                  Profile
                                  <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                        </a></li>
            <li><a href="/about" class="three-d">
                                  Contact
                                  <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                        </a></li>
              </ul>
    <span class="block-menu"></span></div>
    Full HTML:
    <!DOCTYPE html>
    <html>
    <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
              <title>Untitled</title>
    <!--Adobe Edge Runtime-->
        <script type="text/javascript" charset="utf-8" src="workapp_edgePreload.js"></script>
        <style>
            .edgeLoad-EDGE-57204389 { visibility:hidden; }
                  .block-menu {
                                  display: block;
                                  background: #000;
                        .block-menu li {
                                  display: inline-block;
                        .block-menu li a {
                                  color: #fff;
                                  display: block;
                                  text-decoration: none;
                                  font-family: 'Passion One',Arial,sans-serif;
                                  -webkit-font-smoothing: antialiased;
                                  -moz-font-smoothing: antialiased;
                                  font-smoothing: antialiased;
                                  text-transform: uppercase;
                                  overflow: visible;
                                  line-height: 20px;
                                  font-size: 24px;
                                  padding: 15px 10px;
                        /* animation domination */
                        .three-d {
                                  -webkit-perspective: 200px;
                                  -moz-perspective: 200px;
                                  perspective: 200px;
                                  -webkit-transition: all .07s linear;
                                  -moz-transition: all .07s linear;
                                  transition: all .07s linear;
                                  position: relative;
                                  .three-d:not(.active):hover {
                                            cursor: pointer;
                                  .three-d:not(.active):hover .three-d-box,
                                  .three-d:not(.active):focus .three-d-box {
                                            -moz-transform: translateZ(-25px) rotateX(90deg);
                                            -webkit-transform: translateZ(-25px) rotateX(90deg);
                                            -o-transform: translateZ(-25px) rotateX(90deg);
                                            transform: translateZ(-25px) rotateX(90deg);
                        .three-d-box {
                                  -webkit-transition: all .3s ease-out;
                                  -moz-transition: all .3s ease-out;
                                  -ms-transition: all .3s ease-out;
                                  -o-transition: all .3s ease-out;
                                  transition: all .3s ease-out;
                                  -webkit-transform: translatez(-25px);
                                  -moz-transform: translatez(-25px);
                                  -o-transform: translatez(-25px);
                                  transform: translatez(-25px);
                                  -webkit-transform-style: preserve-3d;
                                  -moz-transform-style: preserve-3d;
                                  -ms-transform-style: preserve-3d;
                                  -o-transform-style: preserve-3d;
                                  transform-style: preserve-3d;
                                  pointer-events: none;
                                  position: absolute;
                                  top: 0;
                                  left: 0;
                                  display: block;
                                  width: 100%;
                                  height: 100%;
                        .front {
                                  -webkit-transform: rotatex(0deg) translatez(25px);
                                  -moz-transform: rotatex(0deg) translatez(25px);
                                  -o-transform: rotatex(0deg) translatez(25px);
                                  transform: rotatex(0deg) translatez(25px);
                        .back {
                                  -webkit-transform: rotatex(-90deg) translatez(25px);
                                  -moz-transform: rotatex(-90deg) translatez(25px);
                                  -o-transform: rotatex(-90deg) translatez(25px);
                                  transform: rotatex(-90deg) translatez(25px);
                                  color: #FFE7C4;
                        .front, .back {
                                  display: block;
                                  width: 100%;
                                  height: 100%;
                                  position: absolute;
                                  top: 0;
                                  left: 0;
                                  background: black;
                                  padding: 15px 10px;
                                  color: white;
                                  pointer-events: none;
                                  -moz-box-sizing: border-box;
                                  box-sizing: border-box;
        </style>
    <!--Adobe Edge Runtime End-->
    </head>
    <body>
    <div id="menu"><ul class="block-menu">
                        <li><a href="/home" class="three-d">
                                  Dynamic
                                  <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                        </a></li>
                        <li><a href="/demos" class="three-d">
                                  Work
                                  <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                        </a></li>
                        <li><a href="/deals" class="three-d">
                                  Blog
                                  <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                        </a></li>
                        <li><a href="/about" class="three-d">
                                  Profile
                                  <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                        </a></li>
            <li><a href="/about" class="three-d">
                                  Contact
                                  <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                        </a></li>
              </ul>
    <span class="block-menu"></span></div>
    <div  id="Stage" class="EDGE-57204389">
    </div>
    </body>
    </html>

    I've come across this from the Edge API:
    Edge.getComposition(compId)
    Anyone having trouble with this same issue should try this:
    var targetComp = AdobeEdge.getComposition('TARGETCOMPID');
       targetComp.getStage().play();
    in their trigger or event handler.
    How I got it to work:
    <li><a href="javascript:var targetComp = AdobeEdge.getComposition('EDGE-57204389');
       targetComp.getStage().play();" class="three-d">
                                  Dynamic
                                  <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                        </a></li>

  • Safari 8. Tab Menu & Navigation Bar

    Safari 8 no longer displays the web address of the page being viewed this is extremely annoying ! Its a pain on an iPhone using iOS but ridiculous on a Mac !
    Also, we now have a silly arrangement for the tabs. In the previous version of safari it was clear if there were more tabs open than displayed as a little list button appeared on the far right of the tab bar, click that & a list of all open tabs not currently displayed would appear. Simple, neat & tidy.
    Now the penultimate 3 tabs reduce in size - not the lat one because that would be too obvious. So it is not clear at a glance what additional tabs, if any, are open. This is made even less obvious by the fonts, font size, colour & fine boarders being employed by Apple in some sort of stealth mission to make applications as difficult to use as possible. Oh, it doesn't end there though, oh no ! If you want to select one of the hidden tabs you have two choices.
    1. Slide the tab bar which exposes the hidden tabs hiding the previously exposed list - making it a real pain for anyone switching between tabs.
    2. Use the gimmicky tab view  (used to be recents - which didn't really have much point).
    So the questions are:
    1. How can I have the web address of the page I'm viewing displayed (at all times) in the navigation bar, as thats what it's for guys !
    2. How can I have a simple drop down list of open tabs as per the previous version of Safari & get rid of the utterly pointless tab view & recents views which only serve to waste space & processor cycles ? I want to actually get some work done, I'm intelligent enough to be able to select what I want from a list of items, I really don't need pretty pictures presented 6 at a time.

    It's not in General, but in Advanced on my computer. Four-finger swipe doesn't work on my MBP. Neither does Fn-F10. I did set it to swap Fn-F10 with F10, but F10 doesn't work either.
    I used the menu you got by clicking the little icon at top, right corner to reveal all hidden tabs. Now I can't figure out how to access the hidden tabs efficiently. What a pain. The only good part about this is that it will encourage me to close tabs I don't actively use.

  • Graphical navigation bar using css

    I am trying to create a navigation bar for a page I am
    designing. Unfortunately, I am new to HTML and CSS and the little
    code I do know is not working for me in this regard. I found a
    tutorial that basically fakes an unordered list and turns it into
    graphical blocks The end result, however, is (1) not centered, and
    (2) messes with the layout. I want to contain the navigation bar
    within the nav_bar div. In a way it is, but with the navigation bar
    present, the div the encloses it moves down the page. Any
    suggestions?

    Inside code view, place the curser where you want the menu.
    Select the spry tab, and choose the fourth button from the
    right. It should be right under the Data button. Then select the
    horizontal menu from the pop up menu.
    Next hover over the new menu and click the blue spry menu tab
    that shows up. The properties menu will allow you to edit what is
    in the menu. If you do not need the drop down children, select them
    and click the "-" above it.
    With the menu item selected in the properties menu, on the
    right side you can name each one and also give it a link, title,
    and target.
    Then play with the css file that dreamweaver generated for
    you and you are in business. One safty thing, make a copy of the
    css file as a back up. So if anything does happen, you do not have
    to start all over. Also if you print out the css code, you can get
    an idea of what everything is doing by reading the comments.

Maybe you are looking for