HTML href with css ie Problem

4
votes
<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

6
htmlcsshref

6 Answers

3
votes

Add this to your stylesheet:

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

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>
3
votes

Putting <div> inside <a> is invalid HTML (a is an inline element, div is a block-level element). Replace the div with a span which has display: block.

Probably not related, but the onclick handler should return false to not open the page in two windows simultaneously.

1
votes

Put the a href tag inside the div tag. That should fix it.

0
votes

I don't know if this will solve your problem, but odd things can happen if you have a completely empty div. Try putting a single &nbsp; inside the <div> tag and see if that helps.

0
votes

Give display:block; to the a link property..

Hope this helps
Avinash