IE Not Playing Nice with DW Horizontal Spry Menu

[Mike Smith]

If you can get your code to comply with w3c standards IE should then render your page in “standards” mode rather than its more idiosyncratic “quirks” mode, which might help you. https://validator.w3.org/

[Shweta Shyamani]

Thanks Mike! I ran the page through the validator and corrected the errors that it identified so now the page is W3C validated but the issue is still happening in IE. Any other thoughts?

[Fernando Mol]

This two rules are controlling the hover bg on your submenus:

/* Menu items that have mouse over or focus have a white background and orange text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #FFF;
color: #FF9900;
background-image: none;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a white background and orange text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #FFF;
color: #FF9900;
}

As you can see, the rules define a white background color. If you change that for a background-image you should keep the rounded borders.

The rules are in your external SpryMenuBarHorizontal.css

*We are in this forum just for the fun of share. We are not related to any mayor software company and the only payment we expect for our time is a little “thanks”.

[Mike Smith]

Good stuff. Perhaps next step might be to validate your css at https://jigsaw.w3.org/css-validator/ – as of just now there are some typos or other errors not helping you. You will see that the Spry stylesheet FSpryMenuBarHorizontal.css contains css errors …
https://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.liberation2010.com%2FSpryAssets%2FSpryMenuBarHorizontal.css
It may be that fixing those helps – at least you will know.

Your post history suggests this one has been bugging you for a while – I should tell you that the layout is a mess in FF2 as well … with the bulk of the main layout area pushed way off to the right of screen …

There’s some stuff at https://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/ that will give you a little background on how IE (esp IE6) handle the css box model in a non-stnadards-compllant way – which again may help you.

If this menu plus associated css is a pre-designed block you inserted from somewhere and didn’t code, I’m horribly afraid it has bugs and you are going to have to dig into its css to fix it.

[Shweta Shyamani]

Thanks so much Mike. I think I have a lot to learn about all this stuff 😉 I was able to get the content to shift back over to the center of the main container through the CSS.

I really appreciate the resources you sent and your great suggestions.

Many, many thanks!
Shweta

[Shweta Shyamani]

Thanks so much! I was able to clear the background out but now the submenu items have a little space in between the buttons. I can live with it though 😉

Many thanks for your assistance, I really appreciate it!!

Shweta