I am having a problem with firefox displaying a small space between the bottom of an image and a border... here is the code:
HTML:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome to St. Paul's</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bgimage" style="background-image: url(images/thanks-background.jpg);">
<div id="content">
<span style="font-size:15px;">Thanks, [Nickname]!</span><br><br>
Why not take another few minues to learn more about academics, athletics, music, and dance at St. Paul's School.
<br><br><br>
<span id="imagearray"><a href="#"><img src="images/academics_btn.gif" /></a><a href="#"><img src="images/athletics_btn.gif" /></a><a href="#"><img src="images/music_btn.gif" /></a><a href="#"><img src="images/dance_btn.gif" /></a></span>
<br>
And to contact coaches and program heads ... <a href="#"><img src="images/thanks_btn.gif" style="position:relative; top:20px;"/></a>
</div>
</div>
</body>
</html>
CSS:
CODE
html, body {
background-color: #e8e6ce;
}
* {
margin: 0; padding: 0;
}
#bgimage{
background-repeat: no-repeat;
height: 538px;
width: 700px;
margin: auto;
}
#content{
position: relative;
height: 275px;
width: 435px;
left: 25px;
top: 235px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
a:visited{
color: #9e0b0f;
text-decoration: none;
}
a img{border:0; outline: none;}
a{
outline: none;
}
#imagearray img{
margin: 0;
padding:0;
position: relative;
}
#imagearray{
display:inline;
border-bottom:2px solid black;
width: 406px;
}
Also i have attached a screenshot of the incident. It does not happen in IE.
| 