Image rotator/slideshow affecting dropdown menu

**leehughes** · Sep 1, 2009 12:40

Hi,

Am trying to find a slideshow/image rotator for my header image that will just fade pictures in and out. However, it is affecting the drop down menu..

Am looking for a wordpress plugin but if anyone knows of a work a round that will help display the image rotator and the drop down menu that would be amazing

http://www.attackoftheweb.co.uk/client-area/

**RyanReese** · Sep 1, 2009 12:46

Hi again,
Sorry but what exactly do you mean it's affecting the dropdown? Any particular browser this is happening in?

**leehughes** · Sep 1, 2009 14:42

Hi Ryan,

Am not too sure what the problem is, my friend is working on it. I got told that he has tried several plugins for the image fader which have all conflicted which the drop down.

I am currently waiting for a detailed account of what is wrong.. but if it is a common problem then am guessing the css must change for the drop down.

**leehughes** · Sep 6, 2009 05:52

Hi,

Sorry about the late reply...

I have installed flashfader

http://www.lynk.de/wordpress/flashfader/

Everything works on my mac.. tested it of firefox, opera and safari no problems.. fade works and drop down works.

Now I just borrowed my mums computer and used IE tester while the fader works on all types of I.E the drop down does not.

Even tried windows version of firefox and got the same result.. drop down does not work.

maybe a conflict somewhere?

Thanks

**leehughes** · Sep 8, 2009 03:23

Could it be that the header image is no longer the backround image and the drop down is going behind the image in IE?

www.leehughes.co.uk

**RyanReese** · Sep 8, 2009 06:06

If you mean the dropdown doesn't show..well I tested on FF3 aand IE7 (since yo usaid it was all IE's, I only tested 1) and it shows perfectly.

If only I could see the problem then perhaps I could make an educated guess...I love playing darts

**leehughes** · Sep 8, 2009 06:14

lol

really?

I used IE tester to test it and it didn't show..

I suppose that's good news but am confused as to why it is happening..

**RyanReese** · Sep 8, 2009 06:16

IDK..SS it and post it here...and if you could (becuase I'm lazy

) please post the CSS for the dropdown only.

**leehughes** · Sep 8, 2009 06:24

IDK?

SS= screenshot?

It has been edited so i will try and get the bits you need out..

This was in the header

Code:

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/ie.css" />
<![endif]-->
        
        <!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<style type="text/css">
#outer {
width:1000px; /* Fallback width if javascript is off */
width: expression( 
(document.documentElement.clientWidth > 1152)? "1150px" : 
(document.documentElement.clientWidth < 702) ? "700px" : 
    "auto");}	  
</style>
<![endif]-->
        
<?php wp_head(); ?>

I.e.css

Code:

#header-image {
	float: left;
	width: 100%;
	height: 383px;
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #FFFFFF;
	margin-bottom: 20px;
}

And this was in my main stylesheet:

Code:

#nav li {
    position:relative; /* establish stacking context for the AP'd dropdown sublist */
    float:right;
    padding:0;
    line-height:1.75em;
}
#nav li a {
	float:left;
	padding:0 .5em;
	border-right: 1px solid #333;
	color: #CCCCCC;
	text-decoration: none;
}
#nav li a.first {border:none;}

#nav li:hover, 
#nav li.sfhover{ 
    background:black;/* background for all links on hover */
    visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a, 
#nav li.sfhover a {color:#FFF}/*1st level font color on hover*/

/*=== All Sublist Styles ===*/
#nav ul {
    position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
    width:12em; /*150px*/
    margin-left:-999em;/* hide the sublist */
    padding:0;
    left:0; /* IE6/7 need this to position the sublist correctly on hover*/
    top:1.75em;
    background: url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
}
#nav li li {
    float: none;/*reset the float from #nav li*/
    display:block;
    height:auto;
    line-height:1.5;
    border:none;/*reset borders from #nav li*/
}
#nav li li a {
    float: none;/*reset the float from #nav li*/
    display:block;
    width:11em;/*IE6 needs a width (12em total with padding)*/
    padding:0 .5em;
	border:0;
}
* html #nav li li a {display:inline-block;} /*hide an overflow bug in IE6*/
*+html #nav li li a {display:inline-block;} /*hide same overflow bug in IE7*/

/*=== Hide All Sublists ===*/
#nav li:hover ul,
#nav li.sfhover ul {
    margin-left:-999em;
}
/*=== Sublist Font Colors ===*/
#nav li:hover li a, 
#nav li.sfhover li a  {color:#000;} /*2nd level font color*/

#nav li li:hover a, 
#nav li li.sfhover a  {color:#FFF;} /*2nd level font color on hover*/

/*=== Second Level UL position on hover ===*/
#nav li:hover ul,
#nav li.sfhover ul { 
    margin-left: 0; /* show the sublist (line up with left border on main list items)*/
}

label.screen-reader-text {
display: none;
}
.avatar {
display:none;
}

Hope that is everything

thanks

**RyanReese** · Sep 8, 2009 06:31

Yes it means SS..well at this point all I can tell you to do is validate your HTML.

**leehughes** · Sep 8, 2009 06:38

Can't do screenshot cause am in a house of macs..

I would basically just hoover over the main options ( charity, expeditions etc) and nothing would drop down..

So it looks good to you?

I shall get on the validation

cheers

**RyanReese** · Sep 8, 2009 06:40

Yea it's dropping down as normal..your CSS looks perfect (did I do that CSS? I forget if Idid it in one of your threads)

**leehughes** · Sep 8, 2009 06:44

yeah.. you and another fella

I was just worried because I added the fade and had reports that it wasn't working and i thought that there was a conflict somewhere..

Guess i need to check on more machines and stuff

Thanks again

**RyanReese** · Sep 8, 2009 06:45

No problem-sorry I couldn't be more help

Off Topic:

If anyone does not see hte dropdown please post in this thread and tell us

**leehughes** · Sep 8, 2009 09:58

I have just had three more reports of it not working in IE..

Am gonna look for a new fader..

**leehughes** · Sep 9, 2009 02:54

Hi,

Me again sorry,

Could any one point me to the code that is making the drop down stick to the top of the header image... Am giving up with trying to get it to work in IE and am just going to move the drop down to the bottom of the image instead

Cheers

**RyanReese** · Sep 9, 2009 05:09

Well you owuld have to get the dropdown to be relative to the header wrapper (unless you want to do like top:400px; or w/e the value is there.

**leehughes** · Sep 9, 2009 05:55

well av found the drop down

Code:

#header #navigation {
	float: right;
	width: 100%;
	text-align: left;
}

This shows up in my header so am assuming this is the css for it ..

I can't find any code for a wrapper for the header but am most likely being retarded

User Tag List

Thread: Image rotator/slideshow affecting dropdown menu

Thread Tools

Display

Image rotator/slideshow affecting dropdown menu

Bookmarks

Bookmarks

Posting Permissions