2 Replies - 12337 Views - Last Post: 01 October 2008 - 11:41 AM

#1 sumone4life  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 29-September 08

Firefox adds extra space after image

Posted 29 September 2008 - 08:11 PM

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:
<!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:
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.

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Firefox adds extra space after image

#2 sumone4life  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 29-September 08

Re: Firefox adds extra space after image

Posted 30 September 2008 - 07:04 AM

Figure it out... i had the images in a <span> instead of a <div> doh!

Always check your spans and divs kids
Was This Post Helpful? 0
  • +
  • -

#3 gothik12  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 6
  • View blog
  • Posts: 207
  • Joined: 10-November 07

Re: Firefox adds extra space after image

Posted 01 October 2008 - 11:41 AM

Yes I know, I had a big problem in showing my website in IE because I have closed improper a div tag and I couldn't be able to see it...

This is coding...we sometimes hate it but we like it :D
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1