Forum Moderators: open
Ok, I have been refining a template with a menu system built using an un-ordered list. The menu system goes to two levels, and uses just CSS.
I have tested it in Firefox, Opera, Safari, IE 6, 5.5 and 5.0 and the menu works as it should do.
When testing it in IE 5 I started to notice IE 5 doing some weird stuff at times. When I select menu items, in no particular order, the page itself just drops. There is no particular pattern to this as far as I can see.
When this happens the page is still there but appears 1/4 or 1/2 way down the window.
<SNIP>
I have also included a screenshot to show what IE 5 does to the page, an after shot.
<SNIP>I have never come across this before and I am not sure if its because how I have all the versions of IE running on my system or if IE 5 does not like the css code that I have used.
If you can recreate the problem or know if this type of thing has been discussed before, please let me know.
Many thanks in advance
[edited by: BlobFisk at 2:39 pm (utc) on June 3, 2005]
[edit reason] No URLs please! See TOS [webmasterworld.com] [/edit]
<div id="menu">
<ul>
<li id="navHome"><a href="velebit.htm" title="">home</a></li>
<li id="navStaff"><a href="krka.htm">Staff</a>
<ul>
<li><a href="sljeme.htm" title="">Academic</a></li>
</ul>
</li>
</ul>
</div>
#menu {
width: 160px;
}
#menu ul {
margin: 0;
padding: 0;
text-align: left;
color: #3E0300;
background: #B5CDE3;
}
#menu ul li {
margin: 0px 0px 0px 0px;
padding: 2px 0px 2px 5px;
list-style: none;
border-top: 1px solid #EEEEEE;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
border-width: 1px 1px 1px 1px;
}
#menu ul li ul li{
margin: 0px 0px 0px 0px;
padding: 2px 0px 2px 15px;
list-style: none;
border: 0;
}
#menu ul li a:link, #menu ul li a:visited {
font-weight: normal;
text-decoration: none;
color: #333333;
}
#menu ul li a:hover {
font-weight: normal;
text-decoration: underline;
color: #333333;
background: #EDF2F8;
}
#menu ul li ul {
display: none;
}
#engHome #navHome ul,
#engStaff #navStaff ul {
display: block;
}
Btw, #engHome and #engHome are id's applied to the <Body> tag.
Also, what DTD are you using and most of all, have you validated the mark-up?
W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]
Well the menu does expand, collapse as suggested but it does not use any javascript. It only relies on CSS and id's applied to the body tag on each html page.
I am using the following DTD:
W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
Mark-up has been validated also.
As stated before, I am only having issues with IE 5, as it seems to like putting a lot of whitespace between the top of browser canvas and the top of my page. I just can't figure out what IE 5 is having problems with?
Unfortunately, I can't remember what the cause was, but I think it's something to do with the "hover" rule. I seem to remember that IE5 doesn't like hover too well, or at least not under certain circumstances.
In my case, I was also floating the elements that the hover rule applied to, and I solved the problem by enclosing the elements in a wrapper div. Quite why this solved the problem I can't remember.
Sorry I can't be more precise. But I can confirm that you're not imagining things, and that the problem lies with IE5 and not your code. It's a bit late and I may have a look at my own code in the morning.
