Grow your CSS skills. Land your dream job.

Javascript over Flash elements?

  • # October 16, 2009 at 12:29 pm

    My portfolio page has some DIVs containing Flash surrounding a jQuery photo gallery component.
    Everything seems to work well when viewed on a Mac running Firefox or Safari. However, when you view it on a PC using those or any browser, the javascript gallery and the Flash collide and certain parts of the gallery images are cut off.

    I’ve tried using z-index to correct this and changing the order of flow within the html markup but nothing seems to work.

    Is there any reason why this problem should only occur on a browser used on a PC and not a mac?

    I’d really appreciate some help with this one because I’ve run out of ideas as to what to do.

    Many thanks…

    Ian.

    My portfolio page is:
    http://www.graphicalchemy.co.uk/portfolio.html

    My css is:

    Code:
    /* portfoliostyles */

    * {
    margin:0px;
    padding:0px;
    }
    #flashcontainertop {
    height: 189px;
    width: 700px;
    position: absolute;
    left: 87px;
    top: 0px;
    }

    body {
    background-color: #FFFFFF;
    background-image: url(images/portfoliobodybg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    margin:0px;
    padding:0;
    color: #7681A6;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.88em;
    }

    a {
    color: #7681A6;
    text-decoration: underline;
    }

    a:hover {
    color: #1ABFBB;
    text-decoration: underline;
    }

    :focus {
    outline: 0;
    }

    a:focus, a:hover, a:active {
    outline: none
    }

    image {
    padding: 0;
    outline:none;
    border: none;
    }

    a img {
    padding: 0;
    outline:none;
    border: none;
    margin: 0;
    }

    #portfoliowrapper {
    width:1024px;
    height:575px;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    position: relative;
    }

    #flashcontainerleft {
    height: 575px;
    width: 87px;
    position: absolute;
    left: 0px;
    top: 0px;
    }

    #portfoliocontainer {
    height: 259px;
    position: absolute;
    left: 87px;
    top: 189px;
    width: 680px;
    overflow: visible;
    padding-left: 20px;
    padding-top: 20px;
    }

    #flashcontainerright {
    height: 565px;
    width: 237px;
    position: absolute;
    left: 787px;
    top: 0px;
    }

    /* nav icons */

    #iconscontainer {
    height: 43px;
    width: 288px;
    padding-left: 19px;
    position: absolute;
    left: 87px;
    top: 468px;
    }

    li {
    list-style: none;
    display: inline;
    float: left;
    }

    ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display:inline;
    float: left;
    }

    #homeicon{
    height: 33px;
    width: 33px;
    overflow: hidden;
    display: block;
    background-image: url(images/homeicon2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    }

    #homeicon:hover{
    background-position: center bottom;
    }

    #portfolioicon{
    height: 33px;
    width: 33px;
    overflow: hidden;
    display: block;
    background-image: url(images/portfolioicon2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    }

    #portfolioicon:hover{
    background-position: center bottom;
    }

    #profileicon{
    height: 33px;
    width: 33px;
    overflow: hidden;
    display: block;
    background-image: url(images/profileicon2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    }

    #profileicon:hover{
    background-position: center bottom;
    }

    #contacticon{
    height: 33px;
    width: 33px;
    overflow: hidden;
    display: block;
    background-image: url(images/contacticon2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    }

    #contacticon:hover{
    background-position: center bottom;
    }

    #iconsrightcontainer {
    height: 43px;
    width: 393px;
    position: absolute;
    left: 394px;
    top: 468px;
    }

    #pagenumbers1 {
    height: 20px;
    width: 55px;
    position: absolute;
    left: 250px;
    top: 0px;
    color: #1ABFBB;
    text-align: right;
    padding-top: 13px;
    }
    #backicon {
    height: 33px;
    width: 33px;
    background-image: url(images/backiconblank.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0px;
    left: 305px;
    }

    #backicon:hover{
    }
    #nexticon {
    height: 33px;
    width: 33px;
    background-image: url(images/nexticon.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0px;
    left: 338px;
    }
    #nexticon:hover{
    background-position: center bottom;
    }

    #bottomcontainer {
    height: 64px;
    width: 700px;
    position: absolute;
    left: 87px;
    top: 511px;
    }

    #copyrightnotice {
    font-size: 50%;
    color: #B5B7B9;
    height: 10px;
    width: 145px;
    position: absolute;
    left: 787px;
    top: 565px;
    text-align: right;
    padding-right: 92px;
    }

    ________________________________________________________________
    ________________________________________________________________

    and my html page looks like this:

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


    © Copyright Ian Forster 2009




Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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