Member Avatar for StickerAA

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;  
}
  • 2 Contributors
  • 2 Replies
  • 77 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by StickerAA

Dani AI

Generated

Short summary and practical fixes for the IE7 symptom described (anchor shows top/side borders but the bottom edge is missing). was right to suggest validating — that often catches HTML problems — but IE7 also has a few rendering quirks that can hide an inline element's bottom border even when the markup is valid.

Try these targeted, non-invasive fixes (apply only to the anchors that need it):

a.ie7fix {
  display: inline-block;
  vertical-align: baseline;
  padding-bottom: 2px; /* leaves space for the border */
  zoom: 1;             /* triggers hasLayout in IE7 */
}

Add the class to the problematic links (or place equivalent rules inside an IE7-only conditional stylesheet) and keep your existing border rule. The inline-block gives the link a full box so IE paints all four edges; zoom:1 is the classic IE7 hasLayout trigger if inline-block alone does not fix it.

If that still fails, test by temporarily removing constrained heights, negative margins or overlapping floats in the containing element — clipping from the parent box is a common secondary cause. Also try increasing line-height or adding small top/bottom padding to see if subpixel rounding is at play. These steps let you identify whether the issue is an IE painting bug or a layout clipping problem.

Recommended Answers

All 2 Replies

Member Avatar for ko ko

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.