HTML href with css ie Problem

Question

<style type="text/css">
.web_westloh {
background-image: url(images/web_westloh.png);
background-repeat: no-repeat;
height: 100px;
width: 350px;
}
.web_westloh:hover {
border-bottom-width: 2px;
border-bottom-style: dashed;
border-bottom-color: #999999;
padding-bottom: 5px;
}
.web_money {
background-image: url(images/web_money.png);
background-repeat: no-repeat;
height: 100px;
width: 350px;
}
.web_money:hover {
border-bottom-width: 2px;
border-bottom-style: dashed;
border-bottom-color: #999999;
padding-bottom: 5px;
}
</style>

<a href="http://www.westloh.com" title="Click to Visit http://www.westloh.com" target="_blank" class="web_westloh">
  <div class="web_westloh"&gt</div>
</a>
<a href="http://www.money-mind-set.com" title="Click to Visit http://www.money-mind-set.com" target="_blank">
  <div class="web_money"></div>
</a>

The Problem is:
In mozilla linking is ok. No problem.
But in IE the link is a problem, it will not link in the target.

See this page to see Problem: http://replytowest.com --> at the bottom.

Thank You

Answer 1

First of all, an a is an inline element. A div is a block level element. Block level elements are not valid children of inline elements.

Lastly, the div is completely unneeded.

Just do something like:

<style>
a.button, a.button:link, a.button:visited {display: block; width: 350px; height 100px;}
a.button:hover, a.button:active {
  border-bottom-width: 2px;
  border-bottom-style: dashed;
  border-bottom-color: #999999;
  padding-bottom: 5px;
}

a.web_westloh {
  background-image: url(images/web_westloh.png);
  background-repeat: no-repeat;
}

a.web_money {
  background-image: url(images/web_money.png);
  background-repeat: no-repeat;
}

</style>

<a class="button westloh" href="http://www.example.com" title="link title"></a>
<a class="button web_money" href="http://www.example.com" title="link title"></a>

Answer 2

Add this to your stylesheet:

#content_sub_text a {
    position: relative;
    cursor: pointer;
}