Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problem with Flash in Safari

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #27722
    takeiteasy04
    Member

    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:







    Commercial Holding Bank, Ltd.




    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!

    #70097
    takeiteasy04
    Member

    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!

    #70144
    takeiteasy04
    Member

    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?

    #70194
    takeiteasy04
    Member

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.