Hi everyone, I want to put a border around a hyperlink but in IE7 the bottom border line is omitted and in Firefox it looks fine. Following is my html and css code. I have checked google to no avail. I have tried various position: relative/absolute combinations with no success.

Has anyone come across this bug before.
thanks

html code

<div id="page_content_container"> <h3> Products </h3>
 <div id="ATD_book_container">
  <div id="ATD_image_container"><img src="img.jpg" /><h4>Title</h4>
   <div id="ATD_text_container">
      <p> Some text ....</p
      <p> <a href="#" >Read More</a>  
         <a =href="#"> How to Order </a> </p>

CSS code

#page_content_container 
{ 
margin: 25px 0 0 0;
float:right;
width: 690px; 
height: 490px; 
background: #BFF1FA;
border: 2px green solid;
}

 #ATD_book_container 
{
border: 2px red solid;
width: 685px;
height: 235px;
 }

#ATD_image_container 
{
height: 100px;
width:280px;
float:left;
border:2px blue solid;
}
#ATD_image_container H4 { margin: 40px 0 0 74px;}
#ATD_image_container img 
{
float:left;
}

#ATD_text_container 
{
height: 100px;
width: 400px;
margin:-93px 0 0 280px;
float: left;
border: 2px green solid;
}
#ATD_text_container a 
{
border: 2px #330000 solid;  
}

I checked your code and it is fine with both. Did you validate your HTML?
If not, validate your HTML first, and try again.