Grow your CSS skills. Land your dream job.

Problem with Flash in Safari

  • # January 25, 2010 at 11:57 am

    Hello again all,

    I need some help from the masters yet again.

    I know that the z-index/flash dilemma has been causing otherwise talented coders to headbutt their keyboards for generations. After looking through several sites and articles on the subject, I thought that I had come to a solution that rendered the Flash both "stackable" and validation compliant.

    It seems that it was successful in almost everything (FF, Opera, Chrome, IE 6-8), but not in Safari. When in Safari, all the JQuery functions used on the dropdown menu work, but they work behind the Flash. Is it something simple that I’ve overlooked, or is it some kind of strict Safari thing? Any and all help is VERY much appreciated. Code samples are below:

    http://mosonline.dnsalias.net

    HTML

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">









    Commercial

    • Today’s popular version of lorem ipsum was first created for Aldus Corporation’s first desktop publishing program Aldus PageMaker in the mid-1980s for the Apple Macintosh. Art director Laura Perry adapted older forms of the lorem text from typography samples – it was, for example, widely used in Letraset catalogs in the 1960s and 1970s. (Anecdotal evidence suggests that the original use of the “Lorem ipsum” text was by Letraset, which was used for print layouts by advertising agencies as early as the 1970s.) The text was frequently used in PageMaker templates.
    • Art director Laura Perry adapted older forms of the lorem text from typography samples – it was, for example, widely used in Letraset catalogs in the 1960s and 1970s. (Anecdotal evidence suggests that the original use of the “Lorem ipsum” text was by Letraset, which was used for print layouts by advertising agencies as early as the 1970s.)

    Holding
    Today’s popular version of lorem ipsum was first created for Aldus Corporation’s first desktop publishing program Aldus PageMaker in the mid-1980s for the Apple Macintosh. Art director Laura Perry adapted older forms of the lorem text from typography samples – it was, for example, widely used in Letraset catalogs in the 1960s and 1970s. (Anecdotal evidence suggests that the original use of the “Lorem ipsum” text was by Letraset, which was used for print layouts by advertising agencies as early as the 1970s.) The text was frequently used in PageMaker templates. Today’s popular version of lorem ipsum was first created for Aldus Corporation’s first desktop publishing program Aldus PageMaker in the mid-1980s for the Apple Macintosh. Art director Laura Perry adapted older forms of the lorem text from typography samples – it was, for example, widely used in Letraset catalogs in the 1960s and 1970s. (Anecdotal evidence suggests that the original use of the “Lorem ipsum” text was by Letraset, which was used for print layouts by advertising agencies as early as the 1970s.) The text was frequently used in PageMaker templates.


    Main CSS

    Code:
    /* Universal */

    div.clear {
    clear: both;
    }

    a, a:visited {
    text-decoration: none;
    }

    a:hover {

    }

    span.column-heading {
    display: block;
    text-align: center;
    width: 100%;
    border-bottom: 1px dotted #ccc;
    margin: -20px auto 10px auto;
    color: #58a5c6;
    font-weight: bold;
    font-size: 18px;
    line-height: 23px;
    letter-spacing: 1px;
    padding: 0 0 3px 0;
    position: relative;
    bottom: 10px;
    text-shadow: 1px 1px 1px #818181;
    }

    span.highlight {

    }

    span.highlight-block {

    }

    html {
    height: 100%;
    overflow: scroll;
    }

    body.home {
    height: 100%;
    background: url(../images/header-nav-bg.png) center top no-repeat #fff;
    }

    div#wrapper {
    height: 100%;
    min-height: 100%;
    height: auto !important;
    position: relative;
    font-family: georgia, serif;
    font-size: 14px;
    line-height: 18px;
    }

    div#header {
    position: relative;
    z-index: 500;
    border-top: 4px solid #be1e2d;
    }

    div#header-content {
    width: 960px;
    margin: 0 auto;
    position: relative;
    z-index: 450;
    }

    object#flash {
    display: block;
    width: 988px;
    margin: 10px auto;
    z-index: 1;
    position: relative;
    }

    div#content-area {
    width: 988px;
    margin: 0 auto;
    position: relative;
    z-index: 100;
    background: url(../images/ca-bg.png) left top repeat-y;
    }

    img#ca-bg-top {
    display: block;
    width: 988px;
    height: 49px;
    float: left;
    }

    div.column {
    position: relative;
    z-index: 150;
    float: left;
    width: 30%;
    left: 30px;
    }

    div.column#center {
    margin: 0 10px;
    padding: 0 10px;
    border-left: 1px dotted #ccc;
    border-right: 1px dotted #ccc;
    }

    ul.column-list {
    list-style: square outside;
    display: block;
    margin: 0px auto;
    width: 80%;
    color: #be1e2d;
    }

    ul.column-list li {
    margin: 10px 0;
    }

    img.column-img {
    display: block;
    position: relative;
    margin: 0 auto;
    border: 1px solid #be1e2d;
    }

    img.column-img#sample-bank {
    width: 250px;
    margin: 15px auto;
    }

    img#ca-bg-bot {
    display: block;
    width: 988px;
    height: 49px;
    float: left;
    }

    div#clearance {
    overflow: hidden;
    clear: both;
    height: 190px;
    }

    div#footer {
    bottom: 0px;
    position: absolute;
    width: 100%;
    height: 140px;
    }

    div#footer-content {
    margin: 0 auto;
    width: 988px;
    position: relative;
    background: url(../images/ca-bg.png) center top repeat-y;
    text-align: center;
    }

    img#ft-bg-top {
    display: block;
    width: 988px;
    height: 49px;
    float: left;
    }

    ul#footer-nav {
    display: block;
    margin: 0 auto;
    position: relative;
    bottom: 10px;
    }

    ul#footer-nav li {
    display: block;
    float: left;
    }

    ul#footer-nav li a {
    display: block;
    float: left;
    position: relative;
    text-align: center;
    width: 160px;
    border-right: 1px dotted #ccc;
    padding: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    line-height: 19px;
    color: #be1e2d;
    }

    ul#footer-nav li a:hover {
    color: #58a5c6;
    }

    ul#footer-nav li a#no-border {
    border: none;
    }

    div#copyright {
    border-top: 1px dotted #ccc;
    clear: left;
    padding: 12px 0 0 0;
    color: #be1e2d;
    width: 85%;
    margin: 0 auto;
    top: 5px;
    position: relative;
    }

    img#ft-bg-bot {
    display: block;
    width: 988px;
    height: 49px;
    float: left;
    }

    /* Home */

    img#main-background {
    display: block;
    width: 822px;
    height: 297px;
    margin: 0 auto;
    position: relative;
    z-index: 200;
    }

    Dropdown CSS

    Code:
    /* Level One */

    ul.dropdown {
    display: block;
    position: relative;
    font-size: 12px;
    line-height: 14px;
    padding: 3px 0 0 0;
    height: 35px;
    width: 960px;
    margin: 0 auto;
    z-index: 500;
    }

    ul.dropdown li {
    float: left;
    display: block;
    position: relative;
    width: 159px;
    z-index: 500;
    border-right: 1px dotted #ccc;
    letter-spacing: 1px;
    padding: 2px 0 0 0;
    text-transform: uppercase;
    text-align: center;
    }

    ul.dropdown li.hover, ul.dropdown li:hover {
    position: relative;
    color: #58a5c6;
    }

    ul.dropdown li#hnnb {
    border-right: none;
    }

    ul.dropdown li.header-btn1, ul.dropdown li.header-btn2,
    ul.dropdown li.header-btn3, ul.dropdown li.header-btn4 {
    background: url(../images/dd-arrow.png) no-repeat 142px 4px;
    }

    ul.dropdown li a {
    position: relative;
    color: #be1e2d;
    }

    ul.dropdown li a:hover{
    color: #58a5c6;
    }

    /* Level Two */

    ul.dropdown ul {
    width: 150%;
    position: absolute;
    display: none;
    top: 23px;
    height: auto;
    z-index: 500;
    padding: 5px 0;
    background: #fff url(../images/dropdown-bg.png) left -35px repeat-x;
    border-right: 2px solid #be1e2d;
    border-left: 2px solid #be1e2d;
    border-bottom: 2px solid #be1e2d;
    }

    ul.dropdown ul li {
    font-weight: normal;
    display: block;
    float: none;
    width: 99%;
    z-index: 500;
    border-right: none;
    padding: 0 0 0 1px;
    }

    ul.dropdown li.dd-arrow-up {
    background: url(../images/dd-arrow-up.png) center center no-repeat;
    position: relative;
    margin: 10px 0;
    }

    ul.dropdown li.dd-arrow-up:hover {
    background: url(../images/dd-arrow-up-hover.png) center center no-repeat;
    }

    /* IE 6 & 7 Needs Inline Block */

    ul.dropdown ul li a {
    width: 100%;
    display: inline-block;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    float: none;
    border: none;
    z-index: 500;
    position: relative;
    text-align: center;
    }

    Thanks in advance!

    # January 27, 2010 at 2:58 pm

    Hello again all!

    Anyone have any clue what may be happening? Would this get better results if posted in another part of the forum?

    Thanks again!

    # January 27, 2010 at 3:11 pm

    It works fine in Safari on Mac, too late now, I’ll try it tomorrow on Safari for PC. 8-)

    # January 28, 2010 at 4:59 am

    Just tested in Safari 4.0.2 on PC running XP Home and your drop down menu works fine.

    # January 28, 2010 at 9:31 am

    Hmmm…

    First of all, thank you very much for the response!

    The dropdown still goes behind the Flash for me, though. I’m running Safari 4.0.3(531.9.1)

    Is anyone else having problems with it?

    # January 29, 2010 at 1:38 pm

    Alright, I’ve got the newest version of Safari "4.0.4(531.21.10)", and the dropdown menu is still expanding BEHIND the flash object…

    I promise, I really don’t mean to keep bumping this up, but I’m just at a total loss…

    I realized in my first post, I did not post the jquery code for the menu. I’ll do that below, so maybe that will help to ring a bell.

    Also, because there is jquery involved, would this be better posted under the jquery forum?

    Jquery:

    Code:
    // lowers and raises menus as desired
    // prevents two menus from being open simultaneously

    $(document).ready(function () {
    $(‘li.header-btn1′).click(function () {
    $(‘ul.sub-menu1′).slideToggle(‘slow’);
    $(‘ul.sub-menu2′).fadeOut(‘slow’);
    $(‘ul.sub-menu3′).fadeOut(‘slow’);
    $(‘ul.sub-menu4′).fadeOut(‘slow’);
    });
    });

    $(document).ready(function () {
    $(‘li.header-btn2′).click(function () {
    $(‘ul.sub-menu2′).slideToggle(‘slow’);
    $(‘ul.sub-menu1′).fadeOut(‘slow’);
    $(‘ul.sub-menu3′).fadeOut(‘slow’);
    $(‘ul.sub-menu4′).fadeOut(‘slow’);
    });
    });

    $(document).ready(function () {
    $(‘li.header-btn3′).click(function () {
    $(‘ul.sub-menu3′).slideToggle(‘slow’);
    $(‘ul.sub-menu1′).fadeOut(‘slow’);
    $(‘ul.sub-menu2′).fadeOut(‘slow’);
    $(‘ul.sub-menu4′).fadeOut(‘slow’);
    });
    });

    $(document).ready(function () {
    $(‘li.header-btn4′).click(function () {
    $(‘ul.sub-menu4′).slideToggle(‘slow’);
    $(‘ul.sub-menu1′).fadeOut(‘slow’);
    $(‘ul.sub-menu2′).fadeOut(‘slow’);
    $(‘ul.sub-menu3′).fadeOut(‘slow’);
    });
    });

    // Below makes sure the “Home” and “Contact”
    // will fade out any open menus

    $(document).ready(function () {
    $(‘li.home-btn’).click(function () {
    $(‘ul.sub-menu1′).fadeOut(‘slow’);
    $(‘ul.sub-menu2′).fadeOut(‘slow’);
    $(‘ul.sub-menu3′).fadeOut(‘slow’);
    $(‘ul.sub-menu4′).fadeOut(‘slow’);
    });
    });

    $(document).ready(function () {
    $(‘li.contact-btn’).click(function () {
    $(‘ul.sub-menu1′).fadeOut(‘slow’);
    $(‘ul.sub-menu2′).fadeOut(‘slow’);
    $(‘ul.sub-menu3′).fadeOut(‘slow’);
    $(‘ul.sub-menu4′).fadeOut(‘slow’);
    });
    });

    Anyway, thanks in advance!

    Also, just for convenience, here’s the url again…
    http://mosonline.dnsalias.net

    # January 30, 2010 at 5:38 am

    Try setting wmode to opaque.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".