I try to make menu work in 100% width it work great both Firefox and Opera but it is not work in IE, top-level show good in 100% but sub-level menu is not work. Anyone know how to fix it. http://2008.thaizone.com/pro_dropline/
1) you shouldn't need a separate stylesheet for IE for THAT 2) it works fine in IE7 - which means you are hitting up against the fact that IE6 and earlier do NOT support :hover on anything but anchors. Try adding this to your stylesheet: * html body { behavior:url(csshover2.htc); } and add the csshover2.htc file from this page: http://www.xs4all.nl/~peterned/csshover.html and you should be good to go.
I don't see it called in either of your stylesheets... you have the file itself in there, but it's not in your CSS.
I added to pro_dropline_ie.css .navmenu ul {display:inline-block;} .navmenu ul {display:inline;} .navmenu ul li {float:left;} .navmenu {text-align:center;} .navmenu .select a:hover b, .navmenu .select li:hover a b {float:none;} * html body { behavior:url(csshover2.htc); } Code (markup): that it called from html <!--[if IE]> <link rel="stylesheet" media="all" type="text/css" href="pro_dropline_ie.css" /> <![endif]--> Code (markup):
Ok, I now see half the problem - that STUPID conditional 'include a table for IE' bull. Alright, let's do a rewrite that will WORK. First, get rid of the stupid IE conditional CSS, given what the CSS is doing it should NOT be fed to 'all' - I'd restrict it to screen and projection.... GAH, separate UL's for each item? No WONDER you are wasting extra containers around everything... No need to declare bold on the menu items, that's what CSS is for... and we'll get rid of all that stupid IE conditional table nonsense - NO amount of IE support is worth sending 3k of HTML on every page to EVERY browser. (If we're gonna waste bandwidth, let's just do it on that 30-40% still on IE6) Oop, work actually got plunked on my desk - I'll take a stab at making a working version for you later that will be a LOT less code. (30-50% less)
... and here we go: http://battletech.hopto.org/for_others/tnd/template.html it uses a single image to function: some comparisons - original: 7.2k HTML 2.9k CSS (+ 0.25k for IE) 7k images in five files so 14.2k for most of the world in 7 file accesses, 14.5k in 8 files for IE6/earlier My redo - 5k if you pull all that text I have the original did not 2.2k CSS if you pull the extra header/footer/100% height stuff single 2.5k image 4k javascript for IE6 and earlier So for RoW as a equal comparison we're talking 9.7k in 3 files, IE6/earlier gets 13.7k in 4 files... The only drawback is javascript off in IE6/earlier - frankly anyone smart enough to disable javascript in IE6 should probably be smart enough not to be using IE in the first place. It's also WAY easier to implement as we're not bloating out the HMTL with crap that 60-70% of the world is going to do nothing with. Validates XHTML 1.0 strict, CSS fails validation on four things (display:inline-block, -moz-inline-box, -moz-inline-block and * html) which is 'acceptable', tested working perfect in IE 6 & 7, FF, Opera and Safari. Works mechanically in IE 5.5, but the appearance of some elements is off. (BFD - who cares about IE 5.x anymore)
Except now I'm more aware of half-js... caused by firewalls at corporate offices or No-Script running on FF (where you don't realise that there's something under the main menu so you don't allow scripts for that page)... If your customers are sitting in their offices with no permission to upgrade to any decent browser and the firewall lets in only "approved" js, then even if there was a noscript where necessary, you've got nothing. Another reason to add shtloads of redundancy in every single page (extra links) which increases page size but is actually nice for customers and bots.
Which is why menu items - even those with dropdowns should ALWAYS be links to a page that has the same options as the dropdown on it. Worst comes to worst, ALWAYS provide a fallback to standard navigation...