Problem

I had a problem with my CuteMenu1 module and tried many times to fix it but just could not find the problem with Internet Explorer.

The fact is that I created dropdowns that are supposed to be full width, but that did not work, somehow.

I wanted each item to have a pre-defined height. So in the style for my DIV I wrote this:

	.cutemenu-subitem {
		...
		height: 20px;
		...
	}

Worked beautifully in SeaMonkey and FireFox but somehow in Internet Explorer it would make the list of items look ragedy (i.e. each item would have a different width, seemingly based on the width of the text, I also had a problem with the text that would wrap, it still does wrap, actually, unless I use a nowrap style...)

So the problem is that whenever you define a height in your DIV tag, Internet Explorer marks both sizes, the width and the height, as defined by the user. This probably sets the width to 1px and enlarge as required to the minimum width necessary for the label.

Solution

To fix the problem, I moved the height declaration inside the anchor tag defined within the DIV tag.

<DIV style="..."><A style="height: 20px;">link</A></DIV>

That works in both set of browsers!

You can see the result in the menus at the top of this page. It is a CuteMenu too.

• 1. This is a drupal module. You happen to have Drupal? Download CuteMenu now then!