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;
}