Alamo25 Posted May 9, 2009 Report Share Posted May 9, 2009 (edited) Hi all Page in question: http://www.victorsfood.com/newsite/index.shtml I know about the issues relating to the display of css ul/li drop down menu navigation in Internet Explorer 6.0. To rectify this I included the 'bug fix' stylesheet specifically for IE6. http://www.victorsfood.com/newsite/common/ie6.css However, this has made no difference. Viewing the page in IE 6, the menu goes horrid, the wrong colour links and the drop downs are staggered across horiztonally rather than vertically. I should note that when this fix css is linked to it removes the browser scrollbar, preventing the page from being scrolled. The absent scrollbar happens across all browsers. Does anyone have any idea how to fix this? Site looks ok in IE 7, 8, Mozilla 2, Safari 4. Location of stylesheet containing ul/li classes is: http://www.victorsfood.com/newsite/common/style.css Any help as always, is much appreciated. Cheers. Edited May 9, 2009 by Alamo25 Quote Link to comment Share on other sites More sharing options...
newseed Posted May 9, 2009 Report Share Posted May 9, 2009 Conditional comments is not enough for IE6 or earlier. You will need a bit of javascript and a bit more of css than what you have now. Son of Suckerfish menu You can search for Suckerfish menu for other possibilities. Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 9, 2009 Report Share Posted May 9, 2009 (edited) Your html file has the IE6 stylesheet in a normal link, so it's affecting all browsers. It needs to be in a conditional comment just for IE6. Place it after the main stylesheet link:- ....................VictorsFood.com ........................<br />[/code] where lt IE 7 means less than IE7. When you have edited the above, the scrollbar returns to IE7. When I tested your page in IE7 I started with ActiveX disabled and the dropdown menus were offset to the right. The same happened in IE6, so you may want to look for a pure CSS drop down menu from cssplay.com which don't need ActiveX. Firefox is unaffected and shows the dropdown menu boxes under the top level box with or without javascript and IE7 and IE6 are OK only if ActiveX is enabled. I tested in IE6 and found that the scrollbar was hidden there too and also the footer didn't show until I edited the overflow and height. I found that the drop down menu boxes were horizontal so I added float: none; as it seems the drop down level was using the float: left from the top level. I found that this worked in IE6 for the ie6.css stylesheet:- [code] html { /*overflow:hidden;*/ } body { /*height:100%;*/ overflow:auto; } #footerwrap { bottom:-1px; } li li { text-align: left; float: none;} Edited May 9, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
Alamo25 Posted May 10, 2009 Author Report Share Posted May 10, 2009 Thanks Wickham, I took your advice and downloaded the standard dropdown menu from cssplay.com and also copied your ie6 code above. http://www.victorsfood.com/newsite/index.shtml I also tried using the width classes that you gave me code for a few weeks ago, to set the width of the menu items. Do I still need to do that for the css play menu or is there someway to get all the menu items to span to 100% to fit the screen? I note that the cssplay menu all have the same widths, which makes it so much easier! .widtha { width: 70px; }.widthb { width: 170px; } .widthc { width: 190px; } .widthd { width: 170px; } .widthe { width: 170px; } .widthf { width: 180px; } Outstanding issues now: - The dropdown widths are doing weird things. See under 'Food Intelligence/Team Building' menu item. They are only as wide as the text for that menu item. Is there any way to get them all the same width? - Is there any way to get the dropdown menus 3rd tier to start at the end of the whole menu's width rather than straight after the last character of the 2nd tier link? See under 'Food Intelligence/Team Building' - A HTML error now on the page showing in IE. These menus are really out of my reach with CSS, so thanks again. Quote Link to comment Share on other sites More sharing options...
Wickham Posted May 10, 2009 Report Share Posted May 10, 2009 I'v edited a lot of things for this page:- http://www.wickham43.com/forumposts/alamoindex090510.html and this stylesheet:- http://www.wickham43.com/forumposts/alamostyle090510.css I've made the top level boxes different widths using classes with widths so that they equal 980px. I also changed some table widths from 950px to 980px to look neater (but the header image is 950px and centers). You had ul tags in the wrong place, but also the text in your drop down boxes is in many cases longer than the text in the top level box, so I had to edit them in Contact which is on the right or the drop down boxes would extend beyond the right side and there would be no scrollbar for the bit cut off. I also edited the text in some other boxes. There are still some validation errors but at least the menu works in IE6, IE7, Firefox. I didn't need to use the conditional comment with the stylesheet for IE6; perhaps the menu from cssplay doesn't need it. Quote Link to comment Share on other sites More sharing options...
Alamo25 Posted June 14, 2009 Author Report Share Posted June 14, 2009 I was just viewing the site I'm working on in Mozilla v2.0 and it is only showing the first drop down item on the css menus. It's also displaying '-->' in the top left hand corner, which makes me think its a bum line of code in the include/menu.htm file that is blowing it up. I can't remember if the menu was originally working in Mozilla 2.0. http://www.victorsfood.com.au/index-new.shtml Quote Link to comment Share on other sites More sharing options...
Wickham Posted June 14, 2009 Report Share Posted June 14, 2009 My IE7 and Firefox show all the dropdown levels perfectly. The --> is the closing tag of a comment so look for an extra --> not matched by an opening tag and you have where the closing tag for endif should be --> perhaps the two problems are related. Quote Link to comment Share on other sites More sharing options...
Alamo25 Posted June 17, 2009 Author Report Share Posted June 17, 2009 ok, found the extra --> and it took away the extra --> on the page. I'm still only getting the first dropdown in the menu. I'm thinking its to do with this code in the menu: specifically the bit About Us specifically the bit is there one too many comment tags there? or not enough? Quote Link to comment Share on other sites More sharing options...
Alamo25 Posted June 19, 2009 Author Report Share Posted June 19, 2009 My above comment about that code has nothing to do with it, because I removed all that code to test and it did the same thing. An accurate description is that it is showing only the last menu item of each dropdown. Eg. For the 'About Us' menu it is only showing the dropdown 'Appearances' even though there are 8 other items that should come before it. This problem only occuring in Mozilla 2.0. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted June 19, 2009 Report Share Posted June 19, 2009 Quote Link to comment Share on other sites More sharing options...
Wickham Posted June 19, 2009 Report Share Posted June 19, 2009 Beedev's post would only be correct for a single conditional statement for IE7 and above but is correct where the statement has to apply to non-IE browsers as Quote Link to comment Share on other sites More sharing options...
Alamo25 Posted June 20, 2009 Author Report Share Posted June 20, 2009 I finally found the problem, it was css related. I went back to the original css file and line by line replaced it with my current version. The offending thing: #menu li.current a.sub {color:#fff;;} I was missing the second ; from that line. Unbelievable. Thanks for everyone chiming in on this. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.