Hi all,
I know this problem has come up repeatedly, I've searched the archives,
but I didn't find any solution that fits my scenario. I've been
struggling with this full time for 2 days and cannot make IE work with
the .htc file.
I wanted a double-rollover effect on hover. Roll over the menu link,
change the appearance of the text, AND change an image within the same
DIV. The image will change for each link. I don't really want to go thru
the javascript method for a double rollover. So, using Eric's "Pure CSS
Popups" example (the book and his site), I coded my html and css to
mirror his method.
The rollover/popup works famously in Opera and Firefox, IE will NOT
behave. It seems to ignore the .htc file completely and it doesn't
matter whether I use the conditional comment in the html method or put
the behavior into the CSS file itself. Neither works. It won't work on
my PC, and it will not work on our test server either. We have other
sites on the test server that use the same .htc method, and even though
we are NOT using XP SP2, the MIME type for the .htc file has been added
to the IIS server.
The html page, the css and the .htc file are ALL in the SAME directory.
I have no way to post the site on the web, corporate security prevents
us from doing so.
So, I'll paste the code here. The page is a basic 2-column floated
layout. Its actually a modifed version of the Community CMX Vegas
template.
<style type="text/css">
<!--
@import url("dmsr2b.css");
-->
</style>
<!--[if IE]>
<style type="text/css">
body {behavior:url("csshover.htc");}
</style>
<![endif]-->
<div id="sidebar">
<div id="subNav">
<a href="#">About Us</a>
<a href="#">Physicians<img src="images/menu_images_doc.jpg"
width="110" height="225" /></a>
<a href="#">Services<img src="images/menu_images_girl.jpg"
width="110" height="225" /></a>
<a href="#">Office Location & Parking</a>
<a href="#">Appointments</a>
<a href="#">Insurance Plans We Accept</a>
<a href="#">Patient Forms</a>
<a href="#">Patient Education</a>
<a href="#">Contact Us</a>
</div>
</div>
/* The following selectors control the sidebar/navigational area */
#sidebar {
background: url(images/side_navbar.jpg) no-repeat;
float: left; /* the navigation is floated to the left so that it
can be any length. If it were an AP Div, it would be "out of the flow"
of the document and could flow off the bottom edge of the page */
width: 200px; /* must have a width value */
height: 477px;
margin-left: 5px;
padding-left: 0px;
padding-top: 25px;
margin-top: 10px; /* this aligns the beginning of the sidebar
content with the main content div */
}
#subNav{
position: relative;
width: 190px;
height: 454px;
z-index: 100;
}
div#subNav a img {
height: 0px;
width: 0px;
border-width: 0px;
}
div#subNav a:hover img{
position: absolute;
top: 225px;
left: 82px;
height: 225px;
width: 110px;
}
div#subNav a {
display: block;
text-align: left;
font: bold 75% Verdana, Arial, Helvetica, sans-serif;
padding: 5px 5px;
margin: 0px;
border-width: 0px;
text-decoration: none;
color: #455560;
background: transparent;
}
div#subNav a:hover {
color: #900a0a;
text-decoration: underline;
}
I'm about to go cross-eyed looking at this and its driving me around the
bend :) Clearly I have something wrong.
Thanks for any help !!
Diane R Tomlins
"Dreaming is like defrag for your brain" - Me !
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
