Select tag overlap in IE, Part II

Update: Added conditional comment so that IE 7 is bypassed.

Only ten months late, but here is how to use iehover-fix.js. First a little history. Some have used the Suckerfish dropdowns menu written at A LIST apart way back in November 07, 2003. The dropdowns work great until select elements (dropdown list boxes) are added to a form. The menus go under the select elements when viewed in IE. Several years ago I found a fix for this problem and wrote about it in my Select tag overlap in IE article. Since then things have changed and multi-nested menus are now supported which you can read about in the excellent Son of Suckerfish Dropdowns article written by Patrick Griffiths and Dan Webb.

Using the iframe technique, Ilya I. Gerasimenko wrote the Cascading Menu: Vertical (IE <select> bug fix) solution. The only problem is that it didn't work with the Son of Suckerfish Dropdowns and didn't take IE 5.0 into account. IE 5.0 doesn't support the iframe method.

Taking Ilya's solution, I modified iehover-fix.js to support IE 5.0 and Son of Suckerfish Dropdowns.

First go to the Son of Suckerfish Dropdowns article to learn how to create the CSS for a dropdown menu. Then to use iehover-fix.js, add "nav" as a class name to each top level unordered list.

<ul class="nav">

Include the script element for iehover-fix.js with your directory structure to iehover-fix.js using an IE conditional comment so that it only applies to IE versions less than 7.

<!--[if lt IE 7]><script type="text/javascript" src="js/iehover-fix.js"></script><![endif]-->

And finally add a little bit of CSS to make it work.

/* Support for the "iehover-fix.js" */

* html ul.nav iframe {
	position: absolute;
	/* account for the border */
	left: -0.25em;
	top: -0.25em;
	z-index: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}

/* this is for IE 5.0
select.hide { visibility: hidden; }

/* End Support for the "iehover-fix.js" */

I took the time to copy the Son of Suckerfish Dropdowns example with select elements added so that you can see the problem. You will only see the error in IE. You can see that the iehover fix example in which the dropdowns to go over the select elements in IE.

Download iehover-fix.js.

64 Comments

Gravatar Image1. Posted at 5/9/2006 12:31:16 PM by Birgit

Great workaround! The only little pittfall I discovered was that Opera8 would not display the menu correctly - and that's because your ObjectDetection fails - Opera8 now supports atttach events - however it doesn't really like the iframe - so I added a regular Browser detection to the if statement in your ie-fix.js and now its fully IE/Firefox and Opera (all latest versions) compatible!

Again, great work!

Gravatar Image2. Posted at 5/9/2006 6:32:37 PM by Tanny O'Haley

Hi Birgit,

Actually I now suggest that you use conditional comments.

<!--[if IE lt 7]><script type="text/javascript" src="js/iehover-fix.js"></script><![endif]-->

At first I didn't like conditional comments, but now I find it easier and since the script file is for IE any other browser will treat it as a comment and ignore the line.

Gravatar Image3. Posted at 5/12/2006 2:46:57 PM by Diego

Hello,

I have tried to implement your solution in a website that i am developing for my company; however instead of making the drop down menu be visible over dropdown boxes i want it over a complete iframe that displays the content of external urls. As you may guess the drop down menu is populated with links to those external urls.

The page is sectioned into a header (which contains the menu and a few logos) and a contents section (which only contains the external urls iframe) using divs.

So far i havent achieved the results that i need, in IE the menu does drop and is visible; but it still falls to be displayed behind the iframe using both IE and Firefox and the contents of the external urls for some reason become invisible when using IE.

I will keep on trying to tweak it, but if you could provide any suggestions i will appreciate it.

Gravatar Image4. Posted at 5/13/2006 10:19:45 AM by Tanny O'Haley

Diego,

You might try playing with the x-index of the iframe. In the code, I set the z-index for the iframe that goes below the menu for IE to -1. You might want to try setting the z-index of the iframe that contains external pages to -101. Also, I would suggest first programming your web site in Firefox, then making it work in IE. It goes much faster if you do it in Firefox first then IE than the other way around.

Gravatar Image5. Posted at 5/18/2006 5:24:44 PM by Milo

first of all thanks to you and Ilya for working so hard on this solution!

I have set this up on a dev site to solve the problem. I had to make a few small changes to support the different ID's of my menu. Everything is working except for one very important thing: the offsetWidth and offsetHeight are being returned as 0 so the IFRAME is set to height=0px and width=0px. So ofcourse this isn't working for me... :(

Another point is that I am not using the SoS menus, but my menu works much the same so I think it should still work. In the menu code at { Link } can you see any reason why the values would always return 0? Thanks in advance for your help.

Gravatar Image6. Posted at 5/18/2006 5:32:05 PM by Milo

oops - 2 things.

1 - the url above is wrong, should be { Link }

2 - that site doesn't have the fix applied because it is the production site, however it shows the menu and might be a clue as to why the offset* is always returning 0...

Gravatar Image7. Posted at 5/18/2006 6:11:44 PM by Milo

so sorry for spamming your comments! I have worked out the problem: My menu was using 'display:inline/none' to show/hide the UL menu. I have updated it to use 'left:-999em/0' to show/hide the menu (same as SoS) and now the offsetWidth and offsetHeight is returned properly, which makes sense since if the UL was set to display:none then ofcourse the width/height would be 0/0!

Gravatar Image8. Posted at 6/6/2006 1:04:46 AM by Nils

Hi Tanny,

Thanks for this great script. Just one question:

If I add the conditional comments, it adds "<!--[if IE lt 7]><![endif]-->" at the top of my IE (6) browser despite the comments markups.

(without the linked source)

Of course it's working correctly in Opera & Mozilla.

I placed the lines in between my head tags.

Did I miss something?

best regards,

Nils

Gravatar Image9. Posted at 6/6/2006 7:28:18 AM by OYW

Great work!!!!!!!!!!!!!!!!

I 've been working around this issue several days until I found the light in the darkness.

thank you very much!!!!!!!!!!!

Gravatar Image10. Posted at 6/6/2006 11:13:51 AM by Tanny O'Haley

Hi Nils,

Make sure that you haven't escaped the comment. The &lt; entity should be < (less than symbol) and the &gt; entity should be > (greater than symbol). View your source to make sure that you aren't using entities for the symbols.

This may be because of copy and paste. The symbols are changed to entities so that they can be displayed on the web page. You may want to first paste the code into Notepad or another text editor, then highlight the code in Notepad and copy and paste it into your code.

Tanny...

Gravatar Image11. Posted at 6/8/2006 12:41:59 AM by Nils

Hi Tanny,

Sorry, couldn't reply sooner.

Thanks for your reply!

Your suggestion didn't work for me, doublechecked it.

The funny thing is that a plain conditional comment like

<!--[if IE 6]>

works fine, but as soon as I use a comparison item like gt or lt it comes with the extra line at the top. The condition works though!

I also checked the msdn.microsoft library to check the syntax and so on.

Looking there gave me the idea to try an alternative option:

<!--[if !IE 7]>

For some reason this works well!!!

Shoot me, I don't no.

But... I have a solution!

Thanks again!

Best regards,

Nils

Gravatar Image12. Posted at 7/7/2006 1:18:45 PM by pfulton

This method appears to work great. Thanks so much for your research and work on this troubling problem.

However, I have encountered another issue. The dropdowns appear underneath Flash-based elements. For example, the site I am working on now has specific ad positions where they will be displaying Flash-based ads. Unfortunately, this ad position is directly under the navigation.

Have you encountered this issue before? Is there a workaround for this?

Gravatar Image13. Posted at 7/7/2006 6:04:25 PM by Tanny O'Haley

Yes, I have seen this problem, not in IE but in Firefox. At work I use the menus with Flash (via sIFR) just under the menus and it works fine. I did have a problem with Firefox, but not the with the Flash directly under the menu but in a content div. The site has banner, content, and footer divs. The menu is in a div in the banner div and the flash under the menu is in the banner div. The Flash that has a problem is the the flash in the content div.

Gravatar Image14. Posted at 7/8/2006 9:01:19 PM by pfulton

I posted about this issue on Sitepoint's forums as well (www.sitepoint.com), and someone suggested using the DOM to force Flash content to have a transparent background. They suggested I check out this link: { Link }

I don't know if that would work or not, but I will say that the Macromedia site uses dropdowns directly above their Flash content and it works fine cross-browser.

Gravatar Image15. Posted at 7/11/2006 12:50:07 AM by Satoris

Is it possible to combine this fix (which works great) with whatever:hover by Peter Nederlof? I can't get the two to play nice... has anyone tried this before? IT fails to display the the second menu level (percodei->tigerfishes)

Gravatar Image16. Posted at 7/12/2006 12:38:51 PM by Tanny O'Haley

@Satoris,

I do not believe that iehover-fix.js will work with whatever:hover without modification since they add the same mouse over and mouse out behavior to an element. You could modify iehover-fix.js to not add the onmouseover and onmouseout events but still add the iframe shim. Then whatever:hover could perform the onmouseover and onmouseout events while a modified iehover-fix would create the iframe shims.

Gravatar Image17. Posted at 7/13/2006 11:31:20 AM by Fresh X

Thanks for this fix, I've been searching high and low for something better than turning all the select elements off.

I have an issue though, after successfully implementing this on one of my clients sites' I'm now trying to get it to work on a verticle nav system for another site. It almost works, except that the iframe is pushing the 2nd and 3rd tier menues down instead of being 'shimmed' under the menu.

I've tried mucking around with the javascript, but have succeeded only in causing myself greater frustration. Any ideas on how I might solve this?

Gravatar Image18. Posted at 7/14/2006 7:20:50 AM by Doug

pfulton,

To get flash movies to appear below your nav, you must make the movie transparent using 'wmode'. You can get the instructions off the Adobe/Macromedia site to do this here { Link }

Gravatar Image19. Posted at 7/28/2006 3:02:40 PM by Tanny O'Haley

I have tested setting the flash movie to transparent. Having done that the menus go over the flash movies.

Gravatar Image20. Posted at 8/2/2006 3:00:40 PM by Justin

Nice. I just came across this problem today and was suprised to find that someone has found a solution. I'm not a big fan of all that extra javascript to acheive what seems like such a small task, but I guess we do what we have to.

Gravatar Image21. Posted at 8/4/2006 7:20:01 AM by Josh Clark

Many thanks for the elegant solution!

Just a quick note to say that there appears to be a typo in the IE conditional statement. Should be "if lt IE 7" instead of "if IE lt 7" -- I think that's likely the cause of the problem described by Nils in an earlier comment.

Thanks again,

Josh

Gravatar Image22. Posted at 8/4/2006 4:37:13 PM by Tanny O'Haley

@Josh,

Good catch. I changed the conditional comment to fix the typo. Thank you for the compliment.

Gravatar Image23. Posted at 8/17/2006 5:09:46 AM by Kellen

I have a problem... iehover-fix.js works with menu vertical but I can't get with horizontal menu (submenus)... have a way to do this with this iehover-fix.js?

Gravatar Image24. Posted at 8/17/2006 5:44:02 AM by kellen

I already found my mistake. Now the menu horizontal works very well!! It's my fault. Thank's and sorry for my english.

Thanks a lot

Gravatar Image25. Posted at 8/23/2006 9:17:06 AM by Ricardo Carrasco

You do not need conditional comments if you use attachEvent, give the root and 2nd, 3rd levels etc. incrementing z-indexes and add .iehover(or whatever name the class in the IE script makes) {z-index:900} and the menus will overlap correctly in IE

Gravatar Image26. Posted at 8/29/2006 9:54:39 AM by denyerec

I've been trying to implement this fix for the sons of suckerfish menus but for some reason, when activated it blanks the contents of the dropdowns out. The select boxes are removed correctly but my menu loses its contents (In IE). It's hard to explain but you can see the edge of the dropdown, just not the links.

Any suggestions on why this may be? If you have time I can supply a URL to my development server, but would prefer to disclose that via email. Kindest regards, Denyerec.

Gravatar Image27. Posted at 8/29/2006 8:37:57 PM by Tanny O'Haley

Hi denyerec,

I'd be glad to look at the problem when I get back from vacation later this week. If you haven't solved the problem and you left your email address, I'll contact you.

Gravatar Image28. Posted at 9/1/2006 10:06:45 PM by Newton

If i change the width in

#nav a {

display: block;

width: 10em;

w\idth: 6em;

color: #7C6240;

text-decoration: none;

padding: 0.25em 2em;

}

suppose from w\idth: 6em; to w\idth: 9em;

This changes does not work similar in firefox and Mozilla.

and what it means w\idth?

Gravatar Image29. Posted at 9/2/2006 9:25:03 AM by Tanny O'Haley

Hi Newton,

It's the Simplified Box Model Hack . It allows you to give different values to IE 5.x and other browsers. In this case the width of the "a" element is 10em, including borders and padding which works for IE 5.x, but the W3C tells us that you cannot include borders and padding in the width. The "w\idth: 6em;" line tells W3C compliant browsers to use a number that subtracts borders and padding. In this case padding which is 2em for each side. This gives us 2em + 6em + 2em = 10em.

This really has a lot to do with which DOCTYPE you use and whether you're using Quirks mode or Standards mode.

Gravatar Image30. Posted at 9/5/2006 4:43:33 AM by Newton

Hi Tanny,

Thanks for ur solution. But I have a new problem. In IE, the drop-down menues go over the select box but the border of the drop-down box creates little problem. The border slightly goes behind the select box.

How to solve this?

with regards -

Newton

Gravatar Image31. Posted at 9/5/2006 9:54:24 PM by Tanny O'Haley

Hi Newton, 

This is an easy fix, just add negative left and top values the same width as the border in the CSS. Notice in the code I add a rule just for the iframe.

/* account for the border */
left: -0.25em;
top: -0.25em;

The left and top values are set to a negative value of the border's width.

Gravatar Image32. Posted at 9/14/2006 8:07:59 AM by Sharon Lu

Hi, Tanny,

In my application, I have a listbox (SELECT element with multiple items) below dropdown menu. When I scroll down dropdown menu from one menu item to another, I can see the flash of the listbox border below the dropdown menu. I just added a listbox in the code of your sample page { Link }

First time when the modified page is loaded, the flash did not occur. After you click mouse anywhere, you would see the flash as I described. This flash is very obvious when my listbox and dropdown menu have big color difference. Would you suggest any solution to solve this?

Thanks very much.

Gravatar Image33. Posted at 9/14/2006 9:26:36 AM by Tanny O'Haley

Hi Sharon,

I need more information. What version of IE are you using? Do you have a sample link? Without "seeing" the behavior there's not much I can do to help.

Gravatar Image34. Posted at 9/15/2006 5:20:52 AM by Sharon Lu

Tanny,

Thanks a lot for your quick response and the new iehover-fix.js file works fine now in the case listbox SELECT element is behind dropdown menu. There is no more listbox border flicker when switching from one menu item to another.

Thank you for your help.

Sharon

Gravatar Image35. Posted at 9/21/2006 12:35:52 PM by James

Tanny, thank you for this code!

I was using display: none; instead of left: -999em, so it wasn't working at first, but after changing my code to -999em, it worked.

Also, my dropdown was using alpha(opacity=95);, which didn't work well with this (blurry text), so i just turned it off and it works great without... no biggy.

Thanks again!

James

Gravatar Image36. Posted at 9/22/2006 8:59:26 AM by Tanny O'Haley

Hi James,

Glad this helped you. The issue of opacity in IE is addressed in part III where to use opacity, put the opacity on the li element instead of the ul element.

Tanny...

Gravatar Image37. Posted at 3/7/2007 7:17:42 PM by Glen

Dear Tanny:

I have a problem where my dropdowns seems to be pushing about 60 pixels to the right on my page? The top level of navigation is perfect, but when you mouse overonly the dropdowns appear to be shofted to the right? Has this ever happened before to anyone else? Please let me know. Thank You,

Glen

Gravatar Image38. Posted at 3/8/2007 3:15:54 AM by Marcin Nabialek

I suppose there is a small problem with the script for Opera browsers. I detect the problem with Opera 9.01 and Opera 8.53. There is only white space for dropdowned menu - it can also be seen in the example at { Link }

- you won't see any menu items.

The problem is with:

// Run this only for IE.

if (window.attachEvent) window.attachEvent('onload', sfHover);

// end

bacause it is runs not only for IE but also for Opera browsers.

Solution is creating instead the following code:

// Run this only for IE.

if (window.attachEvent)

{

if (!(window.opera && window.print))

window.attachEvent('onload', sfHover);

}

// end

Gravatar Image39. Posted at 3/8/2007 3:51:49 AM by Tanny O'Haley

@Marcin,

What does the check for window.print do in the check?

This is why I now use IE conditional comments instead of trying object detection which came from the Suckerfish drop down menu authors. Just put the script between the following IE conditional comments.

<!--[if lt IE 7]><script type="text/javascript" src="js/iehover-fix.js"></script><![endif]-->

This will exclude the file from all browsers but IE versions less than 7. IE 7 does not need the script for the menus to function and select elements are no longer windowed allowing menus to go over them which means that we don't have to add iframe elements to the menus.

I have changed the examples to use IE conditional comments.

Gravatar Image40. Posted at 3/8/2007 4:07:35 AM by Marcin Nabialek

Sorry for that. Someone else inserted code in HTML and he didn't used conditional comments. And in js file there wasn't anything about that - that's why I thought that's mistake.

But in that case you should correct the example because in Opera browsers there' still the problem - in the sample page source there aren't any conditional comments used.

Gravatar Image41. Posted at 3/9/2007 7:56:19 PM by Tanny O'Haley

Glen got back to me from comment 37. Here was the problem.

"I have actually figured out the problem, it was due to an align="center" tag I had in my outermost <td>."

If you're using tables for layout, please check out It’s Ocean a Redesign for my article on my redesign where I use Layout Gala's CSS for structure.

Gravatar Image42. Posted at 3/19/2007 1:25:50 PM by Rob

Keep up the good work.

Your solution realy helped me out.

Thanks

Gravatar Image43. Posted at 4/30/2007 6:59:17 PM by newston

Hi Tanny,

Thanks for your work. I have a problem where it seems the iframe exceeds the drop-down list. My drop down lists are at a width of 180px but the iframe exceeds from the right another 40px or so (i.e. another 40px of white space). I have tried adding a width to the iframe in the CSS but this doesn't seem to do anything. Your help would be much appreciated. Thanks!

Gravatar Image44. Posted at 5/14/2007 12:20:21 PM by elroy

Hello,

Just found your fix for menu over select. I tried to use the same example and replace the form and select statements with an Embed for a pdf. No dice as the menus go over the select I left and under the embedded pdf. Any sugesstions to alter a property in the embed or add a class to it to get the menus to fall over my pdf rather than under. IE7 is the only thing I'm looking at at present. Thanks!

Gravatar Image45. Posted at 5/14/2007 9:54:28 PM by Tanny O'Haley

Hi Elroy,

IE 7 fixes the select tag overlap problem. I'm not sure how to fix the embedded PDF.

Sorry, I couldn't help you.

Gravatar Image46. Posted at 5/15/2007 9:04:31 AM by elroy

Hi Tanny,

I actually just took the problem back to three simple divs - two with iframes - one div as content with links, one iframe with the pdf as source, the other as a shim.

I was able to get the content div with links to show through (over) the pdf by arranging z-index of pdf-iframe behind shim iframe behind content.

I'm going to try a one level sonofasucker at the bare bones and try to change iframe attributes to get the menu on top. I'm finding that many people have had this problem with anything that is windowed. I have yet to find anyone that has been able to fix this with a pdf in an embed or object tag. I'll send a link if I get my one level thing to work, you might be able to figure out all of the nested css levels after that. I'm going to stick with pdf as source for iframe for now.

This thing is for a pop to the side document browser to get all of my documents accessable from a document window rather than messing up other pages. - Thanks

Gravatar Image47. Posted at 5/15/2007 4:19:25 PM by elroy

Hello Again,

So after a bit of work and looking through how this is accomplished with js dropdowns it looks like a seperate iframe for each menu(ul) has to be dynamically created and sized and positioned. The idea is that as each menu and submenus are triggered you trigger visibility of the iframe that helps to cover the pdf for each menu/submenu.

Near as I can see this means returning the position and rendered size of each menu to javascript that then creates/shows/hides each iframe.

I still have found no-one who has been able to accomplish the same pdf overlap as select overlap. PDF is rendered as an application and I think the reason I'm able to overlap it is that I'm putting it in an iframe and then covering it with an iframe. Trying not to get off-topic as I suspect that people who want to overlap forms, select etc. have run into this. - Thanks

Gravatar Image48. Posted at 5/29/2007 4:44:09 AM by Leokadia

I still have an issue : after successfully implementing this script on a horizontal navigation menu I'm now trying to get it to work on a verticle nav system for another site. It almost works, except that the iframe is pushing the 2nd and 3rd tier menues down instead of being 'shimmed' under the menu. What can I do to avoid this?

I've tried mucking around with the javascript and css, but have succeeded only in causing myself greater frustration. Any ideas on how I might solve this?

Gravatar Image49. Posted at 5/29/2007 9:27:29 AM by Tanny O'Haley

Hi Leokadia,

Do you have CSS for the vertical menu that sets the iframes to absolute positioning?

Gravatar Image50. Posted at 6/5/2007 9:09:42 AM by Sreedhar Meduru

Thanks for the post. It really helped me in fixing the issue.

To avoid flickering on select lists when the user moves over the menu items, I had to replace onmouseover with onmouseenter and onmouseout with onmouseleave IE specific event handlers.

Gravatar Image51. Posted at 6/22/2007 10:33:21 AM by rene

hi there - sorry to dig this thread up again!

i am trying to use this fix on a vertical menu but am having the same problem as Leokadia. the iframe appears the same height/width as the submenu but the submenu begins directly underneath the iframe. i left the style for '* html ul.nav iframe' exactly as suggested and had no luck playing with the 'top' property.

any advice HUGELY appreciated.

Gravatar Image52. Posted at 6/25/2007 12:22:22 PM by rene

fixed now, i used this css instead:

#nav iframe {

position: absolute;

left: 0;

top: 0;

z-index: -1;

filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);

}

Gravatar Image53. Posted at 7/13/2007 9:50:02 PM by Ed

Tanny,

Great work. I've been trying to understand how the JS uses the first child to add the iframe. I need to implement a tables based solution due to varying category lengths. Would the JS file work with a table based menu?

Any recommendations would be greatly appreciated.

Thanks in advance,

Ed

Gravatar Image54. Posted at 12/7/2007 11:39:52 AM by Lee

Thank You! Thank You! Thank You! Thank You! Thank You! Thank You! Thank You!

You have made my life a lot easier.

Thank you.

Gravatar Image55. Posted at 2/8/2008 12:29:33 PM by RyanB

This is amazing ! thank you so much for this fix.

Gravatar Image56. Posted at 4/15/2008 8:35:33 PM by WW

Hi Tanny,

Great article!

I have successfully implemented the above codes but one problem though .... the dropdown menu is displayed below the iframe, I am using a different css for the menu.

Gravatar Image57. Posted at 4/30/2008 11:57:18 AM by Manish Sharma

Hi Tanny

I am facing the problem of Combo box which is overlapping Select Combo box in My page. But you have already sorted out this problem really this is great. Can i use this code with my Drop down menu (its [ul, li] based). If yes please Suggest me what should i pick.

Gravatar Image58. Posted at 4/30/2008 6:24:13 PM by Tanny O'Haley

Hi Manish,

Yes you can use this code with your drop down menu. I'm not sure what you want as a suggestion, use the Suckerfish drop down menu with my code. It also works for fly out menus too.

Gravatar Image59. Posted at 5/1/2008 1:50:39 AM by Manish Sharma

HI Tanny

Its v. much fruitful that i can use your code with my menu. Suggestion I need from you shall i need to copy iehover-fix.js and * html ul.nav iframe {

position: absolute;

/* account for the border */

left: -0.25em;

top: -0.25em;

z-index: 0;

filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);

}

This code

Gravatar Image60. Posted at 9/12/2008 5:05:34 AM by veronika

hi, i'm trying to use your script, but i'm running it at https. if i leave your source "//0/" the iframe displays as a white page for meh, lying above the menu itself. if i change the src to "" (empty) it does work, but on every page load i get a message of mixed ssl and not ssl content.

what is the real src for this to work with https?

Gravatar Image61. Posted at 9/12/2008 5:09:17 AM by veronika

ok, already found the solution: if your define the src with "javascript: ;" (yeah, that's nasty) it works perfectly fine.

Gravatar Image62. Posted at 3/13/2010 2:39:36 AM by Slotsregeln

Good point, doodlebee, but bear in mind that the suggestion is to replace browser hacks based on parsing bugs and implementation holes with conditional comments that feed ie versions the code they need. WIth or without better CSS support and bug fixing in ie7, this is a good practice. Doing it now has the benefit of simplifying the process of figuring out what to change, and changing it, in the future once we do know what ie7 is and is not going to do. It also does away with hacks whose sole purpose is to target a specific browser and override earlier code, which means we're left only with the compliant code, and the alternate code for ie. A far simpler scenario to tackle when any browser updates it's support and/or parsing engine.

Gravatar Image63. Posted at 5/26/2010 10:04:06 AM by Nelson

Thanks a lot for sharing with us. I found many answers form your site. Comparing them with php tutorial would be a great experience.

Gravatar Image64. Posted at 5/30/2010 9:56:32 AM by Goktug Ozhan

Thak you very much Tanny. I solve all menu problems with your solution.

Add a comment

Discussion for this entry is now closed.