Steven Posted February 24, 2009 Share Posted February 24, 2009 Hi all.I put together a very simple jQuery script so that my navbar will show up with .5 opacity and onmouseover will change to 1.0 and then revert. It works very slick in all browsers except Opera. And even more odd than that, one other element on the site (an image) uses an identical script for the same effect and it works perfectly in Opera. Here's the js code: <script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $(".map").fadeTo("slow", 0.6); // loads page with op set to .6 $(".map").hover(function(){ $(this).fadeTo("slow", 1.0); // on hover sets op to 1 }); $(".map").mouseout(function(){ $(this).fadeTo("slow", 0.6); // on mouseout reverts op to .6 }); $(".op").fadeTo("slow", 0.5); // loads page with op set to .6 $(".op").hover(function(){ $(this).fadeTo("slow", 1.0); // on hover sets op to 1 }); $(".op").mouseout(function(){ $(this).fadeTo("slow", 0.5); // on mouseout reverts op to .6 });});</script> Notice it is doubled for 'map' class and 'op' class. I had to style 'map' in css but leave op alone, so I figured the easiest way to do that would be to copy the script twice with two different classes being flagged. The map class is the image in the left side of the #header and the op class is the small navbar text on the bottom right side. The navbar text acts very strange and goes in and out of visibility, and never transitions in opacity like the image to the left does.There is another issue with CSS that I may as well post here and kill two birds with one stone.This is all on the about page. In firefox, all the divs except #header, are somehow bumped to the right 1px. I already had to make a special iexplorer.css file to bump #top down a ways, so I tried to just modify the main.css file to suit the needs of firefox. Well, when I did that, it messed up Safari (which is already by itself bumped over to the left 1px)!Here's the markup: <body><center><div id="container"><div id="top_nonindex"><div id="header"><a href="index.html"><img class="map" src="images/MAP.gif" /></a> <ul id="navlist"> <li><a class="op" href="about.html">About</a></li> <li><a class="op" href="employers.html">Employers</a></li> <li><a class="op" href="administrators.html">Administrators</a></li> <li><a class="op" href="brokers.html">Brokers</a></li> <li><a class="op" href="contact.html">Contact</a></li> </ul></div></div><div id="brownbox">stuff</div></div></center></body> And finally, here's the CSS: @charset "utf-8";/* CSS Document *//* for MAP */html, ul, body { margin:0; padding:0; }body { background:#616d57 url(../images/page_bg.gif) repeat-y center; }img {border:0}#container { width:775px; text-align:left; } /* grabs all content and forces it to width and center */#header { width:728px; height:125px; margin:22px; background:url(../images/header_bg.gif) repeat-x; }#top_nonindex { width:775px; height:146px; background:url(../images/top_bg.gif) repeat-x bottom; } /* FF requires a 1px bump from the right, Chrome IE Opera are okay. Safar, however, is bumped 1px to the -left- on its own. To compensate for the FF 1px-to-right issue would magnify the Safari 1px-to-left issue. */#navlist li { display:inline; list-style-type:none; padding-right:15px; position:relative; left:60px; top:108px; font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight:500; }#navlist li a { color:#3c5e83; text-decoration:none; }#flash {padding-left:8px; position:relative; bottom:12px;}.map {float:left; position:relative; bottom:3px;}#brownbox { width:775px; height:248px; margin:0; padding:0; background:url(../images/brownbox.gif); } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.