Strange Behavior in IE

Not a surprise, I know …

[katana_one]

I have a bit of CSS and HTML that is not playing very nice right now. When I view the code below in Opera, it works as I expect it to, and it works almost like I expect it to in Netscape. It also works as I expect it to when I view in in IE from my local drive, but it does NOT work when I use IE to view it from the web.

Here is the relevant CSS from the document:

#buyit {position: absolute; top: 0; left: 0; height: 135px; width: 110px; border: solid 1px #FF0000;}
#buyit a:link {width: 100%; height: 100%; display: block;}
#buyit h4 {visibility: hidden;}

And here is the HTML:

<div id="buyit">
<a href="order.asp" title="Click to Order!"><h4>Click to Order!</h4><br></a>
</div>

What I want is for the entire area of the DIV to be the link. Like I said, this works in Netscape and Opera. But it only works in IE if I load the page from my local hard drive. Any ideas on how to fix this?

[mipapage]

Try:

#buyit a:link, #buyit a:visited {width: 100%; height: 100%; display: block;}

You've visited the link in IE, I would guess...

[katana_one]

Thanks, mipapage, that worked! So simple, I feel like a real dummy! I didn't think to define a:visited because I assumed all of the link states would inherit the same rules as a:link.

[mipapage]

No troubles, glad it helped!

This one can really bite you in the buns, be sure to be consistent with your rules with pseudo-classes...