CODEWITHSUNDEEP
htmlhrefnested
Paul
Paul

Reputation: 11

Nesting <a> tags in IE

I'm writing a map in HTML that utilizes a background image and an image map to create hover over boxes when mousing over certain points. Below is a section of code for one of the boxes, sans relevant CSS. I discovered an issue with IE when I added the link to my URL (this section) <a href="TEST.COM" style="text-align:center; padding-left: 80px;" title="TEST">TEST.COM </a>

The way the hover over map works is by using link classes and the a:hover property. However, IE seems to think that it is smarter than every other browser and assumes that my end ending href tag for just the hyperlink also ends the entire box (a class), effectively kicking everything below the link out of the box completely and leaves it visible on the side of the page. The intended ending href tag for the entire box is the very last thing on the code block. Naturally, Firefox interprets this perfectly. Failure in IE 8, compatibility mode not available to test.

Any help on getting this to work would be great.

All non-relevant content has been replaced with the word test. 

<li><a class="TEST" href="#" title="TEST"><span><b><font size="4">  <center> 

<!-- School Info -->
TEST </font> <br /><font style="font-size: 12px;" >
TEST<br />
TEST<br />
(530) 582-2600   <br />
<a href="TEST.COM" style="text-align:center; padding-left: 80px;" title="TEST">TEST.COM  </a><br />    </font> 


            </center></font> </b><br>
           <center> <font size="4">TEST</font> </center> 

           <table width="195" border="0" style="padding-left: 10px; margin-left: 10px;">
  <tr>

    <td width="150">TEST <br /> TEST<br /> TEST </td></td>
    <td width="150">TEST</td>
  </tr>
</table>

              </span></a></li>

Upvotes: 0

Views: 313

Answers (2)

Brett
Brett

Reputation: 20

<font> and <center> tags are deprecated

Upvotes: -3

scunliffe
scunliffe

Reputation: 63588

You can not nest links. Firefox is "fixing this" for you one way, IE is doing it another.

If you want to "add" an overlay DIV of information, you should append it to the DOM outside the link and float it over the page (position:absolute) where needed.

Upvotes: 10

Related Questions