Opera Woes

Posted by topdog 700 days ago Questions| position height index All
Hey everyone, I'm working on a site here for someone I know and it works fine in IE, FF and Safari.
However as the title suggests I've been having issues with Opera.

http://www.chloegregduncan.co.uk/main.html

If you look there the menu, logo, gallery etc. they all work fine in the other browsers, but in Opera
they disappear. I suspect it's something to do with the z-index but I can't figure out how/why.

CODE
@charset "utf-8";
/* Main */

body {background: #fcfbf9;
font-family:Verdana, Geneva, sans-serif; text-align:center;}

a img {
border: 0;
}

a {outline: none;
}

#fixdiv {text-align:center; margin:auto 0; background-image:url(images/mainbg.png); background-repeat: no-repeat;}
.const {
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 1000px;
height: 690px;
margin: auto;
position: fixed;
padding: 10px;
text-align:center;
font-size:large;
}
.contentbg { position: absolute; } /*ALl inner content must have higher z-index*/
.clickenter { position:absolute; right:-170px; bottom:0; padding: 0; margin: 0;}

/* Buttons */
#menuwrap { top: 0;
right: 0;
bottom: 0;
left: 0;
width: 1000px;
height: 690px;
margin: auto;
position: fixed;}

#menu {/*z-index: 1;*/ position:absolute; top: 0; bottom: 0; left: 0; right: 0;}
#namelogo { position:absolute; top: 5%; left:0; padding: 0; margin: 0; border-collapse:collapse; border: 0; width: 165px; height: 195px; z-index:1;}

#aboutbtn { position:absolute; top: 5%; left:20%; padding: 0; margin: 0; border-collapse:collapse; border: 0; width:120px; height: 120px;z-index:1;}
#workbtn { position:absolute; top: 8%; left:30%; padding: 0; margin: 0; border-collapse:collapse; border: 0; width: 110px; height: 89px;z-index:1;}
#eventbtn{position:absolute; top: 8%; left:45%; padding: 0; margin: 0; border-collapse:collapse; border: 0; width: 120px; height: 80px;z-index:1;}
#contactbtn {position:absolute; top: 8%; left:60%; padding: 0; margin: 0; border-collapse:collapse; border: 0; width: 130px; height: 72px;z-index:1;}
#linkbtn {position:absolute; top: 7%; left:75%; padding: 0; margin: 0; border-collapse:collapse; border: 0; width: 150px; height: 70px;z-index:1;}

/* Main content */

#inner_content {width: 60%; height: 60%; position:absolute;/*z-index:2;*/} /*must have higher z-index with contentbg*/
.content { width: 60%; height: 60%; position: absolute; bottom: 4em; left: 23%; }
.content ul {text-decoration:none; list-style-type:none; margin: 0; padding:0;}
#introimage { left: 0; right: 0; top: -100%; bottom: 0;}

/* Links page styling */

/* The group of people */

#linksmap {display:block; width:400px; height:260px; background: url(images/links%20written%20info.jpg); position:relative; margin:0 auto 2em auto;}
#linksmap a {color:#000; font-size:1.2em; font-weight:bold; text-transform:uppercase;}

a#sarahhome {display:block; width:55px; height:0; padding-top:120px; overflow:hidden; position:absolute; left:120px; top:85px;}
* html a#sarahhome {height:120px; he\ight:0;}
a#sarahhome:hover {background:transparent url(images/links_sarah.png) no-repeat 0 0; overflow:visible;}

a#freddierobins {display:block; width:30px; height:0; padding-top:130px; overflow:hidden; position:absolute; left:155px; top:70px;}
* html a#freddierobins {height:130px; he\ight:0;}
a#freddierobins:hover {background:transparent uurl(../images/links_lorna.png) no-repeat 0 0; overflow:visible;}

a#pondedge {display:block; width:105px; height:0; padding-top:55px; overflow:hidden; position:absolute; left:130px; top:165px;}
* html a#pondedge {height:55px; he\ight:0;}
a#pondedge:hover {background:transparent url(irl(../images/links_freddie.png) no-repeat 0 0; overflow:visible;}

a#lornasystontextiles {display:block; width:45px; height:0; padding-top:105px; overflow:hidden; position:absolute; left:170px; top:80px;}
* html a#lornasystontextiles {height:105px; he\ight:0;}
a#lornasystontextiles:hover {background:transparent mages/links_pondedge.png) no-repeat 0 0; overflow:visible;}

.contact {position:absolute; float:left; z-index: 1;}
.email {position:absolute; left: auto; right: auto; bottom: 30%; z-index: 2;}

.galmenu { list-style-type: none; display:inline;
}
.galmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.galmenu ul li{
position: relative;
display: inline;
float: left;
}

.galmenu ul li a{display:block; padding: 1px 5px;z-index:4;}

.imgbox {[position: absolute; width: 80%; height: 80%; left: 5%; right:auto; top: 5%; z-index: 3;}

.galform {width: 80% height: 80%;}
.descText { width: 100%; text-align: center; font:Verdana, Geneva, sans-serif;}

.clothesbtn {z-index:2;}
.intbtn {z-index:2;}
.jewelbtn {z-index:2;}
.paperbtn {z-index:2;}

#imgText { border: none; background: none; overflow:auto;
overflow-y: hidden;
white-space:nowrap;
font-family: Verdana, Geneva, sans-serif; text-align: center;}

.gallerywrap {text-align:center; padding: 1em;}


I know the code and layout isn't really that good at the moment, it still needs refining and tidying up
but I wanted to get this issue with Opera out of the way first. If anyone can shed some light on this
it would be dandy. smile.gif

Thanks in advance.

-Kingy
Discuss Bury


Who Voted for this Question