views:

769

answers:

5

Hello,

I have a big problem with IE8 where I use the jQuery framework.

What works on Firefox, it doesn't work as well in IE8. I am not even checking IE7 :).

Basically, I have simple animations that show/hide div layers and also that move top/down - left/right some of the div layers. Nothing special, just adding some movement to the page. So when you click on contact, instead of the navigation moving up and showing the contact, the contact moves down and breaks the layout which is not so big problem, but when you press on the client area and than press contact - it totally breaks the layout - BIG problem.

Please help. You can view the site here

+2  A: 

Don't understand what "it totally breaks the layout" means. I only see that in IE the page shocks when you visit the client area. This is due to the height and the "automatic" scrollbar. Having a fixed y-scrollbar is less or more a good workaround.

But clicking the contact link after visiting the client area doesn't show something different as from in FF.

After having a quick glance at the HTML source I can only tell that you really need to get rid of the HTML transitional DTD and to get a HTML strict DTD. It will fix most of the CSS related problems. Learn more here.

BalusC
I agree that this could also be a source of problems and should be the first thing you change. Internet Explorer will render the page differently depending on the doctype.
Daniel Robinson
A: 

Some observations. First, the IE8 behavior on you describe on "#moveContact" is for normal mode only. If you hit "compatibility mode", the broken page icon to the right of the URL box, you get a different (and still wrong) behavior.

Second, the way you include jquery is like this:

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

I would encourage you to supply your own copy of jQuery. You can do that here. I would go for the latest 1.3.2. That may fix your problem. I notice that the release notes for 1.3 show testing against IE7 as the latest IE.

Ewan Todd
+2  A: 

I have noticed that the code relies on the marginTop property to animate elements.

e.g. The handler for the click event of the contact information:

$("#moveContact").click(function(){

Makes use of the marginTop property:

marginTop: "167px",

This is buggy in Internet Explorer, and may result in unexpected behaviour. See this article about margin-top for more information.

This isn't a problem with jQuery, it's to do with the way Internet Explorer interprets the value of margin-Top. I'm not sure if this is the reason why the animation isn't working, but it would be a good place to start looking.

Daniel Robinson
+3  A: 

+1 Daniel: caused by margin-collapsing issues. Margin collapsing is confusing enough even without the IE issues, and is generally best avoided. Changing the animation to use only paddings and positioning will make it more reliable.

Also, you need to return false from your event handlers to stop the # link being followed, causing the browser to jump back to the top of your page.

Finally, give every element that has position (relative or absolute) an explicit z-index property to avoid the bug where IE7 defaults them, causing mis-stacking that makes the contact address invisible.

bobince
A: 

@bobince - thanks for the tip about the event handlers, i'm having that issue in IE8. though i'm not sure where to add the return false, can you take a look at the below code and tell me where? thanks for your help.

jQuery(function( $ ){ /** * Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option. * @see http://flesler.demos.com/jquery/scrollTo/ * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.LocalScroll. */

// The default axis is 'y', but in this demo, I want to scroll both
// You can modify any default like this
$.localScroll.defaults.axis = 'xy';

// Scroll initially if there's a hash (#something) in the url 
$.localScroll.hash({
 target: '#content', // Could be a selector or a jQuery object too.
 queue:true,
 duration:2500
});

/**
 * NOTE: I use $.localScroll instead of $('#navigation').localScroll() so I
 * also affect the >> and << links. I want every link in the page to scroll.
 */
$.localScroll({
 target: '#content', // could be a selector or a jQuery object too.
 queue:true,
 duration:2500,
 hash:true,
 onBefore:function( e, anchor, $target ){
  // The 'this' is the settings object, can be modified
 },
 onAfter:function( anchor, settings ){
  // The 'this' contains the scrolled element (#content)
 }
});

});

$(document).ready(function() {

//Speed of the slideshow
var speed = 5000;

//You have to specify width and height in #slider CSS properties
//After that, the following script will set the width and height accordingly
//$('#mask-gallery, #gallery li').width($('#slider').width()); 
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());

//Assign a timer, so it will run periodically
var run = setInterval('newsscoller(0)', speed); 
clearInterval(run);
$('#gallery li:first, #excerpt li:first').addClass('selected');

//Pause the slidershow with clearInterval
$('#btn-pause').click(function () {
 clearInterval(run);
 return false;
});

//Continue the slideshow with setInterval
$('#btn-play').click(function () {
 run = setInterval('newsscoller(0)', speed);   
 return false;
});

//Next Slide by calling the function
$('#btn-next').click(function () {
 newsscoller(0);   
 return false;
}); 

//Previous slide by passing prev=1
$('#btn-prev').click(function () {
 newsscoller(1); 
 return false;
}); 

//Mouse over, pause it, on mouse out, resume the slider show
$('#slider').hover(

 function() {
  clearInterval(run);

 }, 
 function() {
  run = setInterval('newsscoller(0)', speed); 
  clearInterval(run);
 }
);

});

geebee