Opera Woes

[Kingy]

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.htmlIf you look there the menu, logo, gallery etc. they all work fine in the other browsers, but in Operathey disappear. I suspect it's something to do with the z-index but I can't figure out how/why.

@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 thisit would be dandy. :)Thanks in advance.-Kingy

[thescientist]

as I sift through all that, the first thing that comes to mind is that you are not using a Strict DTD, and with what you have it doesn't validate. Unfortunately I don't have Opera, so I might have to spend a little more time looking through the code.

[Kingy]

Thanks for the input so far, it's much appreciated. :]

[Kingy]

No news on what's going on? I haven't figured it out yet.

[ShadowMage]

Have you tried switching to a Strict DTD and validating your code as thescientist hinted at?

[jeffman]

Had a look at the original link. It still uses a transitional DTD. And the absolute positioning is bound to lead to trouble. (The page looks a bit odd on a wide screen, for instance, especially the right border image.I too suggest using that Strict DTD everyone's talking about, and also learning enough CSS that you can position elements with float, clear, and margin, rather than fixed coordinates. The z-index troubles can be eliminated with different approaches to image cropping and compositing.

[Kingy]

Hi I've switched the doctypes to strict now, thanks. =]I don't like absolute positioning + z-index either to be honest.I know it's trouble but the site she wants is so image heavy you know?So you suggest I should go back and change everything to have floats, clears and margins?How am I going to get the images to go on top of each other then? I thought that could only beachieved by z-index to get a layering effect?

[ShadowMage]

z-index is the only way (that I know of) to achieve a layering effect, but you don't have to use absolute positioning. You can use negative margins, or even relative positioning is better than absolute positioning.

[Kingy]

Hmm it looks pretty messed up at the moment...I'll go through and change all the positioning to relative and try to use floats, clears and margins as you've all suggested.

[ShadowMage]

Hmm it looks pretty messed up at the moment...

Yep! That's usually what happens when you get it "working" one way then change it...

[Kingy]

I can't seem to move #menuwrap and #menu in http://www.chloegregduncan.co.uk/main.html.o.OAlso they don't appear to be clickable anymore?

@charset "utf-8";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;position: relative;top: 15%;}.const {width : 1000px;height : 690px;margin : auto;position : relative;padding : 10px;text-align : center;font-size : large;}.contentbg {position : relative; top: 15%;}.clickenter {position : relative;top : -30%;right : -28%;padding : 0;margin : 0;}#menuwrap #menu{position: relative;left : 25%;}#namelogo {position : relative;width : 165px;height : 195px;z-index : 1;float:left;}#aboutbtn {position : relative;padding : 0;margin : 0;border : 0;width : 120px;height : 120px;z-index : 1;float:left;}#workbtn {position : relative;padding : 0;margin : 0;border : 0;width : 110px;height : 89px;z-index : 1;float:left;}#eventbtn {position : relativepadding : 0;margin : 0;border : 0;width : 120px;height : 80px;z-index : 1;float:left;}#contactbtn {position : relative;padding : 0;margin : 0;border : 0;width : 130px;height : 72px;z-index : 1;float:left;}#linkbtn {position : relative;padding : 0;margin : 0;border : 0;width : 150px;height : 70px;z-index : 1;float:left;}#inner_content {width : 60%;height : 60%;position : relative;top: -68%;left: 23%;}.content {width : 60%;height : 60%;position : relative;bottom : 4em;}.content ul {text-decoration : none;list-style-type : none;margin : 0;padding : 0;}#introimage {left : 0;right : 0;top : -100%;bottom : 0;}#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 : relative;left : 120px;top : 85px;}* html a#sarahhome {height : 120px;height : 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 : relative;left : 155px;top : 70px;}* html a#freddierobins {height : 130px;height : 0;}a#freddierobins:hover {overflow : visible;}a#pondedge {display : block;width : 105px;height : 0;padding-top : 55px;overflow : hidden;position : relative;left : 130px;top : 165px;}* html a#pondedge {height : 55px;height : 0;}a#pondedge:hover {overflow : visible;}a#lornasystontextiles {display : block;width : 45px;height : 0;padding-top : 105px;overflow : hidden;position : relative;left : 170px;top : 80px;}* html a#lornasystontextiles {height : 105px;height : 0;}.email {position : relative;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;z-index : 4;}.imgbox {position : relative;width : 80%;height : 80%;left : 5%;right : auto;top : 5%;z-index : 3;}.galform {width : 80%;height : 80%;}.descText {width : 100%;text-align : center;}.clothesbtn {z-index : 2;}.intbtn {z-index : 2;}.jewelbtn {z-index : 2;}.paperbtn {z-index : 2;}#imgText {border : none;background : none;overflow : auto;white-space : nowrap;font-family : Verdana, Geneva, sans-serif;text-align : center;}.gallerywrap {text-align : center;padding : 1em;}