IE8 - mousing between elements with :hover style does not trigger "hover" always

Question

Hi all.
I was testing my web page. I have constructed some kind of a tabbed form container with buttons inside <a> tags.

So buttons-links look like this:
<a href="/link1"><input type="button" class="sectionbutton" value="MyCaption1" /></a>
<a href="/link2"><input type="button" class="sectionbutton" value="MyCaption2" /></a>
<a href="/link3"><input type="button" class="sectionbutton" value="MyCaption3" /></a>
<a href="/link4"><input type="button" class="sectionbutton" value="MyCaption4" /></a>

and my CSS is the following:

.sectionbutton {
    cursor:pointer;
    font-weight: bolder;
    font-size:1.1em;
    padding:5px;
    border: 1px solid gray;
    margin:0px;
}

.sectionbutton:hover {
    border:1px solid #fa9511;
    color:orange;
}

When testing my page in Internet Explorer 8 I noticed that everything works fine when I move mouse slowly or remove mouse completely from a button and then move it onto a button. But if I move it from a button to button in a normal speed, :hover CSS rule does not get applied. It seems that IE just is too late to catch mouse movements.

It works fine in Mozilla Firefox though.

Is this problem related to something other or it is just an IE8 fault? Maybe my PC is too weak, but then how Firefox gets it right?
Anyway, specs of my PC:

CPU: Pentium 4 3.2GHz
RAM: 2GB
Video: ATI 3650
WIndows XP Professional 32 bit SP3.

Is there any way I can make IE8 to detect mouse movements better? Maybe replace input buttons with something else?

Thanks.

-------------------

I found this one:
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=391387&wa=wsignin1.0

it is related to my problem. But maybe someone has a suggestion how to work this around while it is not fixed in IE8?

Answer 1

Hi,

Validate your markup. <input> tags should be enclosed within a form tag, otherwise use the <button> tag instead of <input type="button" if your intention is to not submit a form postback.

It is unusual to nest a <input> tag within a link <a> tag.

You can use style rules to make a link <a> tag look like and behave like a button control. No need to have an embeded <input> or <button> tag.

Regards.

---

Rob^_^

Answer 2

Thanks, redesigning it helped.
Uhh, my laziness bit me - I just copied that button from some form because it looked nice and did not notice that I got illogical html code (but it worked fine in Firefox though. Looks like it still was a bit too complicated for IE8 to process all those mousein/mouseout for nested buttons).