IE Issue with Website

HTML & CSS
1

Hello Guys,

I’m having issues with this Rollover effect I’m doing, it works fine in other Browsers but IE, when you rollover the project section you want to view then leave it, it disappears instead of rolling back up.

Any reason why, here is the website…

http://keatinginc.ca/category/projects/

Thanks,

Mike

2

Hi,

Don’t know if its related to your issue but you have a JS error as you are referencing jquery before it has loaded.


<script type="text/javascript">
$(function(){
       $("a").each(function(){
               if ($(this).attr("href") == window.location.pathname){
                       $(this).addClass("selected");
               }
       });
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Move the jquery script above any functions that call it.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
       $("a").each(function(){
               if ($(this).attr("href") == window.location.pathname){
                       $(this).addClass("selected");
               }
       });
});
</script>
3

Ok, tracked the issue down to this script:


	<!--[if IE]>
		<script src="http://keatinginc.ca/wp-content/themes/keating/js/ie.js"></script>
	<![endif]-->

In this script you are setting the height of the element to 112px on mosueover and then 8pxhigh on mouseout.


$(document).ready(function(){
			$('.desc-drop').mouseover(function(){
				$(this).stop(false,false).animate({height:"112px"}, 'fast');
			});  

			$('.desc-drop').mouseout(function(){
				$(this).stop(false,false).animate({height:"8px"}, 'fast');
			}); 
		});

It looks like you should be using the same height as the css:


$(document).ready(function(){
			$('.desc-drop').mouseover(function(){
				$(this).stop(false,false).animate({height:"530px"}, 'fast');
			});  

			$('.desc-drop').mouseout(function(){
				$(this).stop(false,false).animate({height:"190px"}, 'fast');
			}); 
		});

Of course animating by pixel height means it won;t work properly if there is more content or if the text is enlarged. However css needs a height to animate and jquery is very jumpy with auto height.

4

Thanks Paul,

Seems to work now nicely, any reason why this is not working on iPad, do you know why it could be?

5

Also, noticed couple other things on IE7, the Navigation is incorrectly situated, Navigation items spread beyond the body and the footer headings are not centered between borders. Is there anyway that I can fix these so it appears the same in IE7 as well as all other browsers. As well someone mentioned in IE7, the white text on the orange banner in the slider is behind the banner even though it has a larger z-index, anyway I can solve this issue as well.

Thanks

6

The ipad doesn’t do hover - it’s a touch device.:slight_smile:

These type of effects are not really a good idea if you are going for ipad or mobile support. The ipad will actually open flyout menus on touch as long as the element “touched” is a clickable element such as a link. It will not however close them until another link is touched.

You could add a link as the trigger on the top level menus here:


<li class="desc-drop">
 <div class="project-title">
  <h1><a href="#">Pikangikum First Nations Schools</a></h1>
</div>

and here....

<li class="desc-drop">
  <div class="project-title">
	<h1><a href="#">Court House</a></h1>
</div>


and so on....

That will allow the menu to open when you tap the heading (BTW you should only have one h1 per page outside of html5).

You may want to add plus symbols or something to the heading to show that more can be revealed otherwise ipad users won’t know what to click.

Or you could detect the ipad and give separate rules to have the content displayed in full by default. Or use the mobile first approach and have the basic no frills site by default and then enhance for more capable devices.

7

That’s because you have not taking into account the default margins on elements. In some browsers the p element gets a top margin by default and in others it doesn’t so you need to set it explcitly yourself.


p{margin:1em 0}/* or whatever you need for default */

BTW you still have that IE JS error mentioned in post #2.

8

You failed to set a top position for the absolute nav so it gets placed at auto which may differ between browsers. Add top:0 to #nav and remove the float as it is redundant.

As well someone mentioned in IE7, the white text on the orange banner in the slider is behind the banner even though it has a larger z-index, anyway I can solve this issue as well.

I don’t think that issue can’t be solved in IE7 with your current structure as it looks like you are trying to insert a positioned element between a positioned parent and its child. In Ie7 positioned parents are “atomic” and you can’t place an element outside of the current context between the parent and child. Only unrelated positioned elements can be interleaved like that.