0

I'm working on a microsite for a client, and things are working almost fine, except when I tried viewing it on firefox, I was surprised by how mis-placed things looked like..even though I disabled horizontal scrolling, in firefox u could still do it ( dont see the horizontal scroll but if you scroll horizontally it shows), even the webfont is different, although the webfont displays perfectly on firefox in other pages..and the third problem is the page top-margin, in the page properties I specified the margin to be 0 and in safari it worked, but in firefox it doesn't. could anyone please tell me what to do..I only have a spry menu bar and easing (animate2id) plugin which could be causing the problem maybe? in Safari it looks the way I want it to look..thanks in advance.. maybe I should mention that I'm a novice and I know what I know by self-learning.

here's the code in case..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Annual Report 2012</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href="micro-site.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #39949C;
overflow-x: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>


<link href="muli-fontfacekit/stylesheet.css" rel="stylesheet" type="text/css" />

<body leftmargin="0" topmargin="0">


<div id="rotator-controls" class="panel span2">
<div id="rotator-slides">
<a class="" href="micro-site.html" onclick="Animate2id('.slide-content'); return false" title="Go to 1st content with the default easing">1</a>

<a class="" href="#slide-content2" onclick="Animate2id('#slide-content2','easeInOutExpo'); return false">2</a>

<a class="" href="#slide-content3" onclick="Animate2id('#slide-content3','easeInOutExpo'); return false">3</a>

<a class="" href="#slide-content4" onclick="Animate2id('#slide-content4','easeInOutExpo'); return false">4</a>

<a class="" href="#slide-content5" onclick="Animate2id('#slide-content5','easeInOutExpo'); return false">5</a>
</div>

<div id="rotator-nav">

<a href="#" class="prev">‹</a>
<a href="#" class="next">›</a>
</div>
</div>

</div><!--end of header -->

</div><!--end of slide-container -->
</div><!--end of body -->


<div id="Sitemap"></div>


</div><!--end of container -->

</div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",     {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
function Animate2id(id,ease){ //the id to animate, the easing type
    var animSpeed=2000; //set animation speed
var $container=$("#slide-container"); //define the container to move
if(ease){ //check if ease variable is set
    var easeType=ease;
} else {

    var easeType="easeOutQuart"; //set default easing type
}
//do the animation
$container.stop().animate({"left": -($(id).position().left)}, 2000, easeType);
}
</script>
Bridge
  • 29,818
  • 9
  • 60
  • 82
user1641738
  • 1
  • 1
  • Whoa that's a lot to read. Is it possible to reduce all that code down to a smaller reproducable example? – Bridge Sep 02 '12 at 13:02
  • sure, I'm sorry, I just didn't what to put and what to leave out. thank u =) I posted this question in other forums but no one answers =/ I reduced the code. I left the plugin code at the end. – user1641738 Sep 02 '12 at 13:31
  • have you considered using a more up-to-date version of jQuery? (currently 1.8.1) – Spudley Sep 02 '12 at 16:05
  • I did just now, it's still the same.. – user1641738 Sep 02 '12 at 17:07

0 Answers0