Essentially I wanted an ordered list, then within each <li> element a couple of <div>s which I could float to layout how I wanted. Everything was working fine in Firefox, but not in IE(6), the images below show the output given in Firefox and IE:

IE (6):

Firefox:

HTML code which generated the above images.

The items numbered 1-3 show how I want the output to appear, but my first stab at the code resulted in items numbered 4-6. As you can see, in Firefox it appears fine, but in IE the ‘float:left’ is being ignored, making the div containing the text appear below the checkbox. [Aside: you might ask why I'm using divs and floats for something as simple as just some text next to a checkbox, well, this is just my starting point, my final page will be more complicated than this example!]

The only difference between the working and non-working examples is that the div containing text has width property defined (set to 100%) in the working version. I’m not sure why this should be necessary – my example shows that it’s not needed if the wrapper div isn’t part of an ordered list.

My only explanation is that this is another (frustrating) little IE CSS bug – unless anyone can give me another explanation? Alternatively if there are better ways to do what I’m trying to achieve?

I’m really hoping to get this fixed very soon, but haven’t yet found the root cause, I can reliable recreate the issue, so just need to find why it’s happening.

Plus I need to get my presentation for next weeks OpenLearn conference written sometime soon!

Update (29th Oct)… I have now got the problem resolved, though still don’t know the real root cause. I fixed it by going back through the changes I’ve made recently and seeing at what point the error started occuring.
The change which appears to have been causing the error was when I switched from using <a href=”javascript:….”> to using (what I thought was the proper way!) of adding/removing event listeners. The actual problem occured with the call to detach event, although it didn’t fail everytime – it would work for the first few times and then randomly cause the browser to crash. I did notice that the carsh would only happen if I had the MSG client and the referring site (the one with the users presence icon) open at the same time, if only one was open the crash wouldn’t occur.

For info this was the code that was causing problems:

var oldImg = presenceNode.firstChild;
//remove any current listeners
if(oldImg.removeEventListener){ // Mozilla, Netscape, Firefox
oldImg.removeEventListener('click', launchClick, false);
oldImg.removeEventListener('click', readMessageClick, false);
} else { // IE
oldImg.detachEvent('onclick', launchClick);
oldImg.detachEvent('onclick', readMessageClick);
}


So I replaced this with the code below that just alters the location and title of the link (also a bit of adjusting to add the <a> in):

var oldAnchor = presenceNode.firstChild;
var newAnchor = oldAnchor.cloneNode(true);
newAnchor.href = "javascript:readMessageClick();";
newAnchor.title = MSGAPIconf.str_oneMessageUnread;

So, glad to have got it fixed, but would be even better to know why this was really happening at all!

Update Number 2 (1st Nov) – The fix has now been made live on the MSG-OpenLearn servers.

IE:

Firefox:

And here’s a snippet of the CSS I was using:

ul.menu {
margin: 0;
padding: 0;
left: 20px;
width: 90%;
border-bottom: solid 1px #d09800;
}

ul.menu li {
display: inline;
margin: 0;
}

ul.menu,
ul.menu li a {
padding: 5px 15px 6px;
}

ul.menu li a {
font-size: 1em;
color: #d09800;
margin: 0;
border: solid 1px ;

}

ul.menu li a:hover {
background: #fdfaf3;
color: black !important;
text-decoration: none;
border: solid 1px #d09800;
}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
color: #333 !important;
background: white;
text-decoration: none;
broder: 1px;
border-top: solid 1px #d09800;
border-left: solid 1px #d09800;
border-right: solid 1px #d09800;
border-bottom: solid 1px white;
}

When I changed this snippet to be:

ul.menu {
margin: 9px;
padding-left: 10px;
border-bottom: 1px solid #d09800;
padding-bottom: 6px;
padding-top: 5px;
}

ul.menu li {
display: inline;
margin: 0px;
}

ul.menu li a {
padding: 5px 15px 6px;
border: 1px solid #d09800;
text-decoration: none;
font-size: 1em;
color: #d09800;
margin: 0;
}

ul.menu li a:hover {
background: #fdfaf3;
color: black;
text-decoration: none;
}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
border-top: 1px solid #d09800;
border-bottom: 1px solid #fff;
list-style: none;
display: inline;
color: #333;
background: white;
text-decoration: none;
}

Everything worked as I wanted it to! For info the original CSS was taken from the K2 WordPress template which I adapted for the tabbed menu that we wanted for the MSG site.

Anyway, turned out to be easy enough to fix by just putting the name on the img tag rather than span.