This problem appears to be caused by Quirks Mode (your page does not have Doctype specified). Using quirks mode is a bad idea, since every browser can interpret it as it pleases and display the page differently. So the best way to fix this problem would be to add a Doctype to your page. The page might look differently after adding doctype (margins, paddings) and will need to be fine-tuned again, but after that it will look the same in all browsers and that will make future changes a lot easier.
Read about doctypes here:
http://webdesign.about.com/cs/doctype/a ... ksmode.htmAdditionally, you have some problems with HTML structure in the page. This does not affect menu directly but it should be fixed nonetheless.You have multiple <html> and <head> and <body> tags, for an example.
I can also offer you quick and easy solution. You can force all browsers to use background images for button gradients, even if browser supports gradients natively. By forcing use of background images, IE won't get confused in quirks mode. If you want to do it, simply remove these lines from menu CSS file mbcsmbpou7.css
- Code: Select all
#mbpou7ebul_table div.gradient_button {
background: -moz-linear-gradient(top, #80A1CA 0%, #5080BE 50%, #2C5C9A 51%, #80A1CA 100%);
background: -webkit-linear-gradient(top, #80A1CA 0%, #5080BE 50%, #2C5C9A 51%, #80A1CA 100%);
background: -ms-linear-gradient(top, #80A1CA 0%, #5080BE 50%, #2C5C9A 51%, #80A1CA 100%);
background: linear-gradient(top, #80A1CA 0%, #5080BE 50%, #2C5C9A 51%, #80A1CA 100%);
}
#mbpou7ebul_table li:hover div.gradient_button, #mbpou7ebul_table li.expanded div.gradient_button, #mbpou7ebul_table li.active div.gradient_button, #mbpou7ebul_table li.itemhot div.gradient_button {
background: -moz-linear-gradient(top, #2C5C9A 0%, #5080BE 50%, #2C5C9A 0%);
background: -webkit-linear-gradient(top, #2C5C9A 0%, #5080BE 50%, #2C5C9A 0%);
background: -ms-linear-gradient(top, #2C5C9A 0%, #5080BE 50%, #2C5C9A 0%);
background: linear-gradient(top, #2C5C9A 0%, #5080BE 50%, #2C5C9A 0%);
}