Javascript over Flash elements?

[kelpie]

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:

• 1 ⁄ 2

© Copyright Ian Forster 2009

[Author]

Posts