OK, on the temporary/ywco/index.html page, as of this typing there are at least several problems. But to 'just get it working', all you need to do is add:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Athens YWCO Camp | An ACA Accredited Girls Camp in the North Georgia Mountains</title>
<style type="text/css">
#headerbg {
position: relative;
z-index: 10000;
}
</style>
<link href="_includes/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="screen" href="_includes/superfish.css" />
<script type="text/javascript" src="_inclu . . .
Or add it's property/value pairs to this selector in styles.css:
Code:
#headerbg {position: relative; z-index: 10000; margin: auto; height: 155px; background-image: url(../images/headerbg.png); background-repeat: no-repeat; background-position: top center;}
I would suggest the latter.
Now, on to some of the other problems, and only as relates to this menu. This is not being executed and causes an error in IE's status bar:
Code:
<script>
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>
because $ hasn't been defined yet - jQuery isn't added until after this script.
And even if jQuery comes before, the slideshow puts jQuery into noConflict mode and the inner $ won't be defined once the document is ready, and the default superfish arrows will get added. So change this section:
Code:
<link href="_includes/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="screen" href="_includes/superfish.css" />
<script type="text/javascript" src="_includes/rollover.js"></script>
<script type="text/javascript" src="_includes/superfish.js"></script>
<script>
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="_includes/fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
***********************************************/
</script>
to:
Code:
<link href="_includes/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="screen" href="_includes/superfish.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="_includes/rollover.js"></script>
<script type="text/javascript" src="_includes/superfish.js"></script>
<script>
jQuery(document).ready(function($){
$("ul.sf-menu").superfish({autoArrows: false});
});
</script>
<script type="text/javascript" src="_includes/fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
***********************************************/
</script>
There could still be other issues with the page, and there is one minor problem with this menu in IE 7 and 8. That's because the fade in of the superfish now works, and that doesn't work well in IE 7 visa vis losing the anti-aliasing (Clear Type) of the text displayed and in IE 8 for the same reason, except that IE 8 is able to recover from that once the menu fades in completely.
We can work around that if it bothers you. But I thought you would want this much for now.
Ultimate Fade-in slideshow IE7 zIndex issue with SuperFish dropdown navigation.
Reply With Quote
Bookmarks