*grumble* *grumble*
I hate being the bearer of bad news.
IE6 doesn't support the pseudo-classes :hover, :active, etc. There are some nasty little surprises in browser compatibility but this is a huge gaping hole where IE simply doesn't have proper CSS 2.0 support. My memory is a bit twitchy but I don't think IE7 fixed that either, though I'm not sure.
There are two ways to approach this. One, the less cool way, is simply to accept that FF and IE will work differently on this and see the features you've installed as being some FF prettiness that IE users won't enjoy. In general, I don't like differences between IE and FF, but then most differences are a matter of lazy development and critical style and positioning issues. Hover is not critical though and simply provides extra interactivity. So that IS an option in this case, where usually I think people give up too quickly. This isn't a case where it's difficult, it's impossible to make IE do this with HTML because it doesn't support it.
Option number 2 is to use Javascript. Obviously then, any IE user with Javascript off won't get it. There is no solution to that problem. That's something you just have to live with. The part I don't know is how to make sure that the script is only called for IE. I don't believe it's that difficult, I just don't know how. Check the javascript forum. Once the script is called only for IE, here's how you change the styles on the button.
To do Javascript properly, so that it degrades or enhances as well as possible, it all needs to be in a separate .
js file. Add a script tag last thing. Anything that comes after your script tag is invisible to Javascript when you do it unobtrusively like this. Therefore you can't affect it.
Code:
<script type="text/javascript" src="Scripts/Myjavascript.js"></script>
</body>
</html>
Then in your .
js file you need to add an event handler to tell Javascript that when the mouse is hovering over (hence onmousever) the button, to run a function.
Code:
document.getElementsByName('Input')[0].onmouseover = addHoverStyles;
document.getElementsByName builds an array of elements with the name you specify. Since your button is name="Input", that's what we go looking for. Since your name is probably unique there will be only one element in the array and we specify it with [0], ie the index of the first array element. addHoverStyles sounds like a decent function name, but you can call it Fred or whatever else you want. Choose something descriptive though. You want to remember what it does when you see it.
I'm not sure it matters, but I always put the event handler after the function just in case the function needs to exist before the event handler is written. So earlier in your code you insert addHoverStyles function to change all the button styles.
Code:
function addHoverStyles() {
var myBtn = document.getElementsByName('Input')[0];
}
This is the general syntax of a Javascript function and we've defined a variable myBtn, so we don't have to type document.getElementsByName('Input')[0] every time. Now just set the CSS properties you want to change. You'll need to consult a javascript reference "unobtrusive javascript" is the best set of keywords I've found for googling what around the copious pages on bad Javascript using inline attributes. But for example you'd reset the color like this.
Code:
function addHoverStyles() {
var myBtn = document.getElementsByName('Input')[0];
myBtn.style.color=#ffd200;
}
OK, funny, that's actually the only one you change from button style. So there's your function. You're done!
In CSS, you generally don't have to specify something unless you're changing it. This is where you set all the basics of your button style
Code:
.buttonStyle{
font-family:Tahoma, Arial, verdana, sans-serif;
font-size:11px;
color:#fff;
font-weight:normal;
background-color:#4c8094;
margin: 0;
padding: 0 2px 0 2px;
width: auto;
overflow: visible;
}
So when you're modifying it all you need to do cite the differences.
Code:
.buttonStyle:hover {
color:#ffd200;
}
This accomplishes the same thing as your CSS block because you already did the leg work setting the main .buttonStyle class. So that's all we have to do in the Javascript function too.
-------------------------
Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe
When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper
Chroniclemaster1, Founder of
www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Hover effect in Internet Explorer
