Jump to content
Stef's Coding Community
Sign in to follow this  
Alamo25

CSS Ul Li Menu issue in Internet Explorer 6.0 (IE6).

Recommended Posts

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 by Alamo25

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Wickham

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...