Forums

jhallmusic

OK... this is enough to make me go crazy. I've been dealing with a gap that is occurring between two images (used to create the top two parts of a background). Basically, if I'm using the strict DOCTYPE, and I put a break in between the two tags for the images, I get the small gap (in both IE 7 and Firefox). This makes sense to me, since I'm using a page wrap with width equal to the two images I'm using... so I'm guessing there's one "space" there causing the gap. If I put the two tags in one line, with no space between them, the gap goes away in IE 7 but NOT in Firefox. If I change the DOCTYPE to transitional, I can get the gap to go away in both browsers, but obviously I'm trying to stay away from doing that. So.. what should I do?? Any thoughts or knowhow would be great. thanks! Here's the code (as simple as it possibly could be):

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">

<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta content=\"text/html; charset=utf-8\" http-equiv=\"Content-Type\" />
<title>Untitled 1</title>
<link href=\"pci.css\" rel=\"stylesheet\" type=\"text/css\" />
</head>
<body>
	<div id=\"page_wrap\">
		<img src=\"images/top_bar.gif\" alt=\"top bar\" /><img src=\"images/header.gif\" alt=\"Paradise Coach Interiors\"/>
	</div>
</body>
</html>

 *{
	margin:0; padding:0;
}

html{
	overflow-y:scroll;
}

body{
	font: 62.5% Verdana, sans-serif;
	background: #000000;
}

#page_wrap{
	width: 891px;
	margin: 0 auto;
}

Hope this isn't a dumb one.

chriscoyier

Sounds like maybe it's the line break that is causing the gap. Try setting line-height: 0px; ?

jhallmusic

The line break isn't in there anymore, so that wasn't doing it, but it was the line-height property. Thanks!

jhallmusic

So I found out, in case anyone else runs across this problem, is that in standards-compliance mode, images are set to display as inline by default, which leaves a space underneath the image (the baseline underneath inline elements). Adding a img{display:block;} to your css will stop this from happening. Took me awhile to figure it out, and maybe it's a no-brainer, but wanted to post my findings.

chriscoyier

Yep, you don't need to implicitly have a <br /> tag to have a line-break, you'll get one automatically when an inline element wraps down, hence the line-height fix.

treehouse : what would you like to learn today?

Forums

Strict / Transitional DOCTYPES