The CSS dropdown from the last post works in all browsers except IE6! I’ve made a few minor changes to ensure it displays correctly in IE7 however.


.Navigation li ul {
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #000000;
padding:4px;
position:absolute;
width:720px;
top:30px;
overflow:visible;
height:42px;
left:-135px;
z-index:10;
}


A z-index was applied to keep it above any content that might be below, and a left position was added to move the dropdown over slightly.

Now as for IE6, we can get it to work with some simple javascript. Not the most accessible solution but really, if you’re using IE6 and you have javascript disabled, you deserve it.

Using jQuery we can add the hover event to our list with a few lines

$(function() {
$(".Navigation ul li").hover(
function () {
$(this).css("overflow", "visible");
},
function () {
$(this).css("overflow", "hidden");
});
});


and voila! Simply setting the overflow property when each list element is hovered is enough to make the dropdown work.

Now if you don’t want the extra overhead of the jquery library you can use conditional comments to only grab it if they’re using IE.

<!--[if IE 6]>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".Navigation ul li").hover(
function () {
$(this).css("overflow", "visible");
},
function () {
$(this).css("overflow", "hidden");
});
});
</script>
<![endif]–>


Here’s a quick and dirty pure CSS dropdown that at present only works in Firefox.

.Navigation li {
	position:relative; display:block;
	float:left;
	height:26px;
	overflow:hidden;
	display:inline;
	padding:0px 10px;
}
.Navigation li:hover { color:orange; cursor:pointer; overflow:visible;}

.Navigation li ul {
	background:#FFFFFF none repeat scroll 0 0;
	border:1px solid #000000;
	padding:4px;
	position:absolute;
	width:600px;
	top:30px;
	overflow:visible;
	height:42px;
}
.Navigation li ul li { display:inline; color:#000; }

That’s all the CSS needed, along with this HTML:


<div class="Navigation">
<ul>
<li><a>Home</a></li>
<li>
<a>About Us</a>
<ul>
<li>Sub Link 1</li>
<li>Sub Link 2</li>
<li>Sub Link 3</li>
</ul>
</li>
<li><a>Products</a></li>
<li><a>Contact</a></li>
</ul>
</div>


By floating each list element as a block element, we can hide the sub menu by hiding the overflow content of the div. Hovering over an element sets overflow to visible, and so the sub menu appears.

Now if only it worked in IE..

The latest project at work required me to get a rich text editor (RTE) running inside jquery thickbox. After trying out a few different RTEs I finally settled on the Yahoo YUI editor as it looks the nicest, and is easily customized.

After 5 lines, YUI editor was up and running inside thickbox. Sweet, no problems there. However the insert image and link boxes failed completely, in all browsers.

The boxes were created and inserted alongside thickbox, instead of inside. Thankfully thanks to all of YUI editor’s events this was an easy fix.

editor.on('windowInsertImageRender', function() {
document.getElementById('dd-editor').appendChild(this.get('panel').element);
});


Here, “dd-editor” is the ID of the div surrounding by YUI editor and ‘editor’ is the name of my YUI editor object. We simply set it to listen to the ‘windowInsertImageRender’ event and, when it occurs, attach it to the same div that the editor is in.

That fixed, it seemed to be working very smoothly until, surprise, it fails in IE.

When the thickbox is too small to hold all of the content and scrollbars appear, scrolling down creates all manners of positioning problems with the toolbar. Drilling down with the IE developer toolbar revealed that scrolling works down to the list element with a class of “yui-toolbar-groupitem”. It is the elements inside that bug out.

After an hour of trying various css positionings and styles, I managed to fix the content area and title bar in place with a bit of jquery.

$("#editor_editor").attr("position", "static")


A fix for the buttons was eventually found as well, however it isn’t so much a fix as it is a sluggish, ungainly hack.


$("#TB_ajaxContent").scroll(function () { editor.toolbar.collapse(true); editor.toolbar.collapse(false); } );


Hooking in to the scroll event on the thickbox window, each time it moves we collapse and then redisplay the toolbar. This causes the buttons to jump into the correct place at the cost of a very slow scrolling time.

Note: the above 2 lines need to be called after the editor has fulled rendered and only in IE. This can be done by using the windowRender event and a bit of jquery, like so:

if ($.browser.msie) {
editor.on('windowRender', function() {
$("#editor_editor").attr("position", "static");
$("#TB_ajaxContent").scroll(function () { editor.toolbar.collapse(true); editor.toolbar.collapse(false); } );
});
}