Jump to content

Opera Woes


Kingy
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...