I am working on a website for a recent start-up company in PA and ran into a bizarre issue. The site initially looks fine when loaded on Firefox 3.6.3, Safari and even IE! But once jQuery is activated such as clicking on the next button to switch the pagination, ONLY on Firefox 3.6.3 does the layout of the page shift up 200px. This wasn’t so with Firefox versions earlier than 3.6.3.
The page has a head div which spans the entire page and under it are two columns floating left and right, with position relative. below it is a footer that clears both. the floating columns are adjusted top: -200px to compensate for the menu. This works on all browsers (except opera) and initially looks fine on Firefox 3.6.3. BUT, once the next in the jQuery pagination is clicked to change pages, the two columns shift up 200px! Playing around with the inspector on both safari and Ff 3.6.3 I noticed that only FF 3.6.3 can load the page with the two columns’ top: 0px NOT -200px and that the pagination works fine then.
So my question, (sorry for the long preamble), is what would be the best way to approach this issue? Should I use browser specific CSS? E.g. use javascript and load FF3.6.3 specific css? or is there a better way to approach the layout of the page in general?
Thanks in advance.
[EDIT] Ps. here is the HTML and CSS
HTML:
<!-- html above body left out -->
<body>
<div id="container">
<div id="header">
<!-- more code -->
</div>
<div id="column1">
<div id="scroll">
<div id="scroll1">
<h2>Featured Stores!</h2>
<ul id="shops-carousel" class="stores-carousel jcarousel-skin-tango">
<li style="text-align: center;">Store 1</li>
<li style="text-align: center;">Store 2</li>
<li style="text-align: center;">Store 3</li>
</ul>
</div>
<div id="scroll2">
<h2>Featured Offers!</h2>
<ul id="offers-carousel" class="offers-carousel jcarousel-skin-tango">
<li style="text-align: center;">Offer 1</li>
<li style="text-align: center;">Offer 2</li>
<li style="text-align: center;">Offer 3</li>
</ul>
</div>
</div>
</div>
<div id="column2">
</div>
<div id="footer">
<!-- html above body left out -->
</div>
</div>
</body>
CSS for above HTML
#container { width: 1024px; margin: 0px auto 0px auto; }
#header { clear: both; height: 160px; width: 100%; z-index: 1; }
#column1 { float: left; height: 720px; width: 70%; top: -200px; position: relative; }
div.pts-tag { background: url(../images/pts-tag.png) no-repeat top center; height: 72px; width: 100px; position: relative; left: -3px; }
div.pts-tag p { position: relative; top: 23px; font-size: 1.2em; font-weight: bold; color: #FFF; }
#scroll { background: url(../images/bg-scroll.png) no-repeat top center; height: 521px; width: 100%; }
#scroll1 { height: 140px; width: 100%; top: 45px; left: 55px; position: relative; }
div.store-scroll-left { background: url(../images/arrow-left.png) no-repeat top center; height: 50px; width: 50px; position: relative; top: 50px; }
div.store-scroll-right { background: url(../images/arrow-right.png) no-repeat top center; height: 50px; position: relative; top: 0px; left: 190px; }
#store-scroll-frame { width: 447px; position: relative; top: -110px; left: 60px; height: 180px; overflow: hidden; }
#scroll2 { height: 140px; width: 100%; top: 115px; left: 55px; position: relative; }
div.offer-scroll-left { background: url(../images/arrow-left.png) no-repeat top center; height: 50px; width: 50px; position: relative; top: 50px; }
div.offer-scroll-right { background: url(../images/arrow-right.png) no-repeat top center; height: 50px; position: relative; top: 0px; left: 190px; }
#offer-scroll-frame { width: 447px; position: relative; top: -110px; left: 60px; height: 180px; overflow: hidden; }
#column2 { float: right; height: 720px; width: 29%; top: -180px; position: relative; padding-left: 5px; padding-right: 5px; }
#column2 h1, h2, h3, p { margin: 5px; }
#footer { clear: both; width: 100%; text-align: center; padding-top: 80px; padding-bottom: 50px; background: url(../images/bar1.png) no-repeat top center; }
ul.footerlinks { display: inline; list-style: none; }
ul.footerlinks li { display: inline; padding: 8px;}