Hi folks I wonder if someone could take a look at the following page:
<http://www.sfep.org.uk/newHP.asp> and tell me why it works fine in Firefox and Opera (both under Win XPH), but not under IE6? I have adapted the CSS/HTML from chapter 6 of 'More Eric Meyer on CSS', to add background images to the menu items. The hover styles don't seem to apply the right background image on some of the items -- in IE, I get the background associated with a list item of class 'submenu' (sub_over.gif) when hovering over any list item, regardless of class attribute. What I should see is what happens in Firefox -- ordinary list items should have a white b/g which changes to an image (ord_over.gif) when hovered. All the styles are currently embedded , but are shown here for reference: <<begin included text>> /* Global Declarations =========================================================================*/ * {margin:0; padding: 0;} body {color: #000; font: 0.79em/1.45 "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif;} body {behavior: url(../csshover.htc);}/* Win IE behavior call for arbitrary element hover */ img{border: 0;padding: 0; } abbr, acronym {font-style: normal; border-bottom: 1px dotted #666; cursor: help;} /* Links =========================================================================*/ a:link {color: #425cb0; text-decoration: none; border-bottom: 1px dotted #b6b6b6;} a:visited {color: #005387; text-decoration: none; border-bottom: 1px dotted #666;} a:hover {color: #c03238; text-decoration: none; border-bottom: 1px dotted #c03238;} /* Headings =========================================================================*/ h1 {color: #bf2e36; font-size: 1.4em; border: none; margin-bottom: 15px;} h2 {color: #bf2e36; font-size: 1.2em; border: none; margin-bottom: 5px;} h3 {color: #000; font-size: 1.1em; border: none; margin-bottom: 3px;} h4 {color: #000; font-size: 1.1em; border: none; margin-bottom: 2px;} /* Normal Lists =========================================================================*/ ul, ol {margin: 0; padding-left: 22px;} ul {list-style-type: disc;} ol ul, ul ul {list-style-type: circle;} ul.quicklinks {list-style-image: url(../i/s/opensquare.gif);} /* Elements and Boxes =========================================================================*/ hr {color: #222;} /* Div sizing and positioning =========================================================================*/ div.container {width: 100%;} div.wrapper {float: left; width: 100%;} div#strapleft {margin-right: 19em;} div#strapright {float: left; width: 19em; margin-left: -19em;} div#main {margin: 27px 29% 0 185px;} div#nav {float: left; width: 145px; margin-left: -100%; margin-top: 27px;} div#rhc {float: left; width: 25%; margin-left: -25%; padding-top: 27px;} div#footer {clear: left;} /* Div styling =========================================================================*/ div#masthead {background: url(../i/s/main_masthead21.gif) 100% 0% no-repeat;} div#masthead h1 {height: 84px; line-height: 84px; margin: 0; background: url(../i/s/sfep2.gif) 0% 0% no-repeat;} div#masthead span {display: none;} div#masthead a {border: none;} div#strapwrap {background: url(../i/s/top_fade.gif) 0% 100%; color: #222; height: 24px; margin: 0; padding: 0;} div#strapright {text-align: right;} div#strapleft p, div#strapright p {font-size: 10px; line-height: 24px; margin: 0;} div#strapleft p {padding-left: 10px;} div#strapright p {padding-right: 10px;} div#rhc {background: #f7f8f9;} div#rhc p, div#rhc div {background: url(../i/s/box_bg.gif) 0% 100%; padding: 0.5em;} #rhc *.top {padding-top: 0;} /* Nav list positioning/sizing/styling =========================================================================*/ div#nav ul {margin:0; padding: 0; width: 145px; background: white;} div#nav li {position: relative; list-style: none; margin: 0; border-bottom: 1px dashed #ccc;} div#nav li:hover {background: url(../i/s/ord_over.gif) 0% 50%;} div#nav li.empty:hover {background: white;} div#nav li.submenu {background: url(../i/s/sub_off.gif) 0% 50%;} div#nav li.submenu:hover {background: url(../i/s/sub_over.gif) 0% 50%;} div#nav ul ul {position: absolute; top: 0; left: 145px; display: none;} div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 {display: block;} div#nav li a {display: block; padding: 0.25em 0 0.25em 10px; text-decoration: none; border-bottom: none; width: 135px;} div#nav>ul a {width: auto;} <<end included text>> Any help/advice/constructive comments welcome, as would be site checks in Mac/Linux browsers, and other Windows browsers TIA J. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
