July 3, 200818 yr Hello all, This is my first post to any webdev/ design forum though I have lurked through many for a long time. I have a bug in Opera that I don't understand. It's a simple photo menu that is having some z-index and/or image loading issues. I've included screen captures in Firefox and Opera to show the problem. Code validates but that doesn't mean I'm not stupid. Thanks for any help you can offer. -T Here is the HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title>Boston Flower Exchange :: Home</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie_style.css" /> <![endif]--> <script type="text/JavaScript" src="rounded_corners.inc.js"></script> <script type="text/JavaScript"> <!--Rounded corner script --> window.onload = function() { settings = { tl: { radius: 20 }, tr: { radius: 20 }, bl: { radius: 20 }, br: { radius: 20 }, antiAlias: true, autoPad: true } var cornersObj = new curvyCorners(settings, "rounded"); cornersObj.applyCornersToAll(); } </script> </head> <body> <p><br/></p> <div id="mainnav" class="rounded"> <div class="navbutton"><a href="info.html" class="navlink">INFORMATION</a><a href="info.html"><img src="carnsmall1.JPG" alt="INFORMATION"/></a></div> <div class="navbutton"><a href="vendors.html" class="navlink">VENDORS</a><a href="vendors.html"><img src="alliumsmall1.jpg" alt="VENDORS"/></a></div> <div class="navbutton"><a href="purchasing.html" class="navlink">PURCHASING</a><a href="purchasing.html"><img src="kalesmall1.jpg" alt="PURCHASING"/></a></div> <div class="navbutton"><a href="#" class="navlink">DIRECTORY</a><a href="#"><img src="nigellasmall1.jpg" alt="DIRECTORY"/></a></div> <div class="navbutton"><a href="notes.php" class="navlink">NOTES</a><a href="notes.php"><img src="orchidsmall2.jpg" alt="NOTES"/></a></div> <div class="navbutton"><a href="community.html" class="navlink">COMMUNITY</a><a href="community.html"><img src="callasmall1.jpg" alt="COMMUNITY"/></a></div> </div> <div id="footer" class="rounded"><p class="centered"><strong>Boston Flower Exchange</strong> | 540 Albany Street | Boston, Massachusetts 02118 <br />P:(617) 426-6700 | F: (617) 426-6709 | <a href="mailto:info@thebostonflowerexchange.com">info@thebostonflowerexchange.com</a><br /><small> © 2008 Boston Flower Exchange </small></p></div> </body></html> And here is the CSS: /* This stylesheet is written for thebostonflowerexchange.com*/ html { scrollbar-base-color: #663366; } body { background: url('bfxbg.jpg') no-repeat fixed left ; font-family: 'Avante Garde', Helvetica, sans-serif ; } h1,h2,h3,hr { color: #003300; } hr { color: #663366; } dl dt { color: #003300; font-weight: bold; } a:link , a:visited { color: #663366; text-decoration: underline; } a:active, a:hover { color: #003300; text-decoration: underline; } .centered { text-align: center;} /* Layout formatting */ #content { border: 1px solid #663366; background-color: #FFFFFF; padding:10px; width: 600px; margin: 10px; float: left; display: block; } /* Menu formatting */ #vmenu { float:left; width:140px; border: 1px solid #663366; background-color: #663366; padding:10px; margin: 10px; margin-right: 0px; color: #FFFFFF; text-align:right; text-indent: -3em; float:left; display: block; } #vmenu ul{ list-style-type: none; list-style-position: inside; line-height: 26px; } #vmenu ul li{ } #vmenu a:link, #vmenu a:visited { color: #FFFFFF; background-color: #663366; border: 1px solid #663366; padding: 3px; text-decoration: none; } #vmenu a:hover, #vmenu a:active { color: #003300; text-decoration: none; border: 1px solid #003300; background-color: #FFFFFF; padding: 3px; width: 100%; } #footer { color: #FFFFFF; border: 1px solid #663366; background-color: #663366; padding-left: 10px; padding-right: 10px; width: 600px; margin: 10px; margin-top: 40px; margin-bottom: 40px; float: left; left: 152px; clear: left; } #footer a:link,#footer a:visited { color: #FFFFFF; text-decoration: none; } #footer a:hover,#footer a:active { color: #FFFFFF; text-decoration: underline; } #map { border: 1px solid #663366; background-color: #FFFFFF; padding:10px; width: 770px; margin: 10px; float: left; } #headernote { color: #003300; } #mainnav { border: 1px solid #663366; background-color: #FFFFFF; padding:10px; width: 960px; margin: 10px; float: left; text-align: center; } .navbutton { margin: 10px; border: 1px solid #663366; width: 290px; height: 220px; overflow: hidden; float: left; clear: none; } .navbutton img{ position:relative; left:0px; top:-30px; z-index:-1; border: 0px; } .navbutton a:link, .navbutton a:visited { color: #FFFFFF; text-decoration: none; position:relative; top:10px; font-size: 20pts; font-weight: bold; } .navbutton a:hover, .navbutton a:active { color: #003300; text-decoration: underline; position:relative; top:10px; font-size: 20pts; font-weight: bold; } .navbutton:hover{ margin: 10px; border: 1px solid #003300; width: 290px; height: 220px; overflow: hidden; } .navlink { color: #FFFFFF; text-decoration: none; position:relative; top:10px; font-size: 20pts; font-weight: bold; z-index: 10; display: block; }
July 9, 200818 yr Author bump. Is this a problem I should be worried about? Who fixes things in Opera when they have bugs? How many hits do you have to get on a website to make it worthwhile? Thanks, -T
July 9, 200818 yr Before I start to look at your code, do you have a link to a live version? It makes debugging a lot easier
July 9, 200818 yr Author Before I start to look at your code, do you have a link to a live version?It makes debugging a lot easier Apologies. I will post back when I do. Thanks. -T
July 11, 200818 yr Author Thanks for the offer gang but I think I worked it out myself. After I applied some fresh eyes to this I figured out the problem and found another one. I think that both opera and IE don't like negative z-index values while Firefox is clever enough to get it. The new problem is that Opera and Firefox have a 1px difference in vertical positioning. I tried some browser hacks which didn't work and I didn't really trust, so i shrunk the container to cover the images with the disparity, which does not effect the design or layout fortunately. Looks good now. It'll be online soon. Cheers, -T
Create an account or sign in to comment