Any idea as to why my top navigation doesnt show in IE7 ? Well im actually viewing it in IE8 with IE7 compatibility (IE7 doesnt work in windows 7) so if someone could confirm it not showing in IE7... Theres also problems in IE6, im not so bothered about that just yet but would be great if someone could point me to what the problem is.

http://transatlantickillers.co.cc/joomla/

The menu doesn't show in my IE7.

 

I downloaded your files and loaded the css files one by one, expecting the menu to disappear at some stage, but the menu shows properly after loading all your stylesheets (why so many?).

 

I haven't loaded the js files yet.

 

One strange thing I've not seen before is that the source code from IE7 is different from the source code in Firefox. The source code in Firefox is missing two links to css files, one in the main list of stylesheets for rokbox-style-ie7.css (is this supposed to be here or should it be in a conditional comment?) and template_ie7.css in the conditional comments. I realise that Firefox doesn't process the conditional comment css files but it normally shows them in the source code and it should definitely show the css file link in the main css file list. Anyway, I don't think that's relevant as all the files are in my version and the menu shows in my IE7 version locally.

Thanks for looking into this Wickham, this is actaully a joomla site and ive re-designed the affinity theme here. Figured it would be easier since it had alot of the elements i wanted already, the reason for all the stylesheets is so you can change the theme in joomla's ACP although im only interested in the one (style3). Im not sure how the code works, like i say i just re-designed certain elements, the guys at Rockettheme did all the coding. Anyway i guess if it works locally this could be a javascript issue, so im gonna attempt to remove all the things i dont need. Im really not interested in the javascript, so that can go and ill probably get rid of the styesheets i dont need too. Ill let you know how i get on.

 

Really appreciate your help in this, thanks again

Well you were right Wickham the IE condition comment was causing the navigation not to display, as soon as i removed it the navigation showed in ie7. my only problem now is the blocks directly below the navigation arent floating properly so im gonna have a look at that now.

Ok all is working in IE7, IE8, Firefox, opera, safari. Only issue now is with IE6, which im really not too bothered about but it would be a bonus if i could get the navigation working properly in IE6. Why cant we all use a single browser, i vote firefox

My IE6 code:

#horiz-menu {background: transparent url(http://transatlantickillers.co.cc/leaguev3/theme/default/images/new2/nav.gif) repeat-x scroll 0 0;margin-top:-2px;}
#horiz-menu2 {background: url(../images/style3/horizmenu-l.png) 0 0 no-repeat;}
#horiz-menu3 {background: url(../images/style3/horizmenu-r.png) 100% 0 no-repeat;}
#horiz-menu .link span {background: transparent url(../images/style3/drop-arrow.png) no-repeat scroll 4px 18px; color:#AAAAAA;}
#horiz-menu li.active .link span, #horiz-menu li:hover .link span, #horiz-menu li.sfHover .link span {background: url(../images/style3/drop-arrow.png) 4px -98px no-repeat;color: #DF0000;}
#horiz-menu li:hover li .link span, #horiz-menu li:hover li:hover li .link span, #horiz-menu li.sfHover li .link span, #horiz-menu li.sfHover li.sfHover li .link span {color: #fff;}
#horiz-menu li:hover li:hover .link span, #horiz-menu li:hover li:hover li:hover .link span, #horiz-menu li.sfHover li.sfHover .link span, #horiz-menu li.sfHover li.sfHover li.sfHover .link span {color: #DF0000;}

#horiz-menu .drop1 {background: #282828;}
#horiz-menu .drop2 {background: url(../images/style3/drop-top-l.png) 0 0 no-repeat;}
#horiz-menu .drop3 {background: url(../images/style3/drop-top-r.png) 100% 0 no-repeat;}
#horiz-menu ul ul .drop1 {background: url(../images/style3/drop-top-1.png) 0 100% no-repeat;}
#horiz-menu ul ul .drop2, #horiz-menu ul ul .drop3 {display: none;}
#horiz-menu ul ul .columns-1 .drop1 {background: url(../images/style3/drop-top-1.png) 0 100% no-repeat;}
#horiz-menu ul ul .columns-2 .drop1 {background: url(../images/style3/drop-top-2.png) 3px 100% no-repeat;}
#horiz-menu ul ul .columns-3 .drop1 {background: url(../images/style3/drop-top-3.png) 3px 100% no-repeat;}
#horiz-menu ul ul .columns-4 .drop1 {background: url(../images/style3/drop-top-4.png) 3px 100% no-repeat;}
#horiz-menu ul ul.columns-1 {background: url(../images/style3/drop-bg-1.png) 0 100% no-repeat;}
#horiz-menu ul ul.columns-2 {background: url(../images/style3/drop-bg-2.png) 0 100% no-repeat;}
#horiz-menu ul ul.columns-3 {background: url(../images/style3/drop-bg-3.png) 0 100% no-repeat;}
#horiz-menu ul ul.columns-4 {background: url(../images/style3/drop-bg-4.png) 0 100% no-repeat;}
#horiz-menu ul ul li {background: url(../images/style3/drop-div.png) 0 100% repeat-x;}
#horiz-menu ul ul li .link, #horiz-menu ul ul li:hover li .link, #horiz-menu ul ul li.sfHover li .link {background: url(../images/style3/drop-arrow.png) 4px 6px no-repeat;}
#horiz-menu ul ul li:hover .link, #horiz-menu ul ul li:hover li:hover .link, #horiz-menu ul ul li.sfHover .link, #horiz-menu ul ul li.sfHover li.sfHover .link {background: url(../images/style3/drop-arrow.png) 4px -111px no-repeat;}
#horiz-menu ul ul li .link.daddy span, #horiz-menu ul li.parent.active:hover li .link.daddy span, #horiz-menu ul li.parent.active.sfHover li .link.daddy span, #horiz-menu ul li.parent:hover li .link.daddy span,  #horiz-menu ul li.parent.sfHover li .link.daddy span {background: url(../images/style3/drop-daddy.png) 95% 10px no-repeat;}

p.s. already tried displaying block and floating left, ie6 didnt seem to like it.

Well you were right Wickham the IE condition comment was causing the navigation not to display, as soon as i removed it the navigation showed in ie7.

 

 

Well, I said that the menu showed in IE7 with all the css files but after checking again I was mistaken. I was enabling/disabling so many css files I must have been confused.

 

IE7 works if you delete position: relative in template_ie7.css in the IE7 conditional comment

/* horizmenu */

#horiz-menu {/*position:relative;*/z-index:140;}

 

don't ask me why. This was one of the css files not applicable to Firefox, so the menu showed there.

But it works in IE7 now, right ? In the end i kept the conditional comment and just edited the ie7 stylesheet.

Yes it's working now in IE7 but you've got a different template_ie7 file now!

 

Mine had

/* horizmenu */
#horiz-menu {/*position:relative;makes menu not show*/z-index:140;}
#horiz-menu li .link span, #horiz-menu li, #horiz-menu li.active, #horiz-menu li.sfHover, .menutop .animated-bg {display:inline-block;}
#horiz-menu li.parent-sfHover, .menutop .drop-wrap {z-index:800 !important;}
.menutop .submenu-animation-left {position: relative;}
.menutop .submenu-animation-right {float: left;position:absolute;left:0;top:0;padding-right:8px;}

where I deleted the position: relative, but now you have a file with:-

/* Horizontal Menu */

#horiz-menu {background: transparent url(http://transatlantickillers.co.cc/leaguev3/theme/default/images/new2/nav.gif) repeat-x scroll 0 0;margin-top:-2px;}
#horiz-menu2 {background: url(../images/style3/horizmenu-l.png) 0 0 no-repeat;}
#horiz-menu3 {background: url(../images/style3/horizmenu-r.png) 100% 0 no-repeat;}

Yes it's working now in IE7 but you've got a different template_ie7 file now!

 

Mine had

/* horizmenu */
#horiz-menu {/*position:relative;makes menu not show*/z-index:140;}
#horiz-menu li .link span, #horiz-menu li, #horiz-menu li.active, #horiz-menu li.sfHover, .menutop .animated-bg {display:inline-block;}
#horiz-menu li.parent-sfHover, .menutop .drop-wrap {z-index:800 !important;}
.menutop .submenu-animation-left {position: relative;}
.menutop .submenu-animation-right {float: left;position:absolute;left:0;top:0;padding-right:8px;}

where I deleted the position: relative, but now you have a file with:-

/* Horizontal Menu */

#horiz-menu {background: transparent url(http://transatlantickillers.co.cc/leaguev3/theme/default/images/new2/nav.gif) repeat-x scroll 0 0;margin-top:-2px;}
#horiz-menu2 {background: url(../images/style3/horizmenu-l.png) 0 0 no-repeat;}
#horiz-menu3 {background: url(../images/style3/horizmenu-r.png) 100% 0 no-repeat;}

 

Yes i changed it