• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 500
  • Last Modified:

IE7 and images spacing

Hi,

This is probably a really stupid question,  but im having total brain freeze and cant figure this one out.  Basically I have three images that are slices of the same image in a wrapper div that are the width of the wrapper.

For some reason in IE7 the images appear with a 3px bottom margin, ive already tiried setting the border to 0, and collapsing the border with no success.  in firefox the images appear one after another as they should.

Any suggestions, welcome

Thanks
G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://pattern/webcd/js/mootools.js"></script>
<script type="text/javascript" src="http://pattern/webcd/js/modal.js"></script>
<script type="text/javascript" src="http://pattern/webcd/js/loader.js"></script>
<link type="text/css" rel="stylesheet" href="http://pattern/webcd/css/modal.css" />
<title>Llewelyn &amp; Company</title>
 
<style type="text/css">
<!--
	body{
		background:#F2E8DE url('images/BG-pattern.gif') repeat;
		margin:0;
		padding:0;
	}
	#wrapper{
		margin:0 ;
		width:1025px;
	}
-->
</style>
 
</head>
 
<body>
	<div id="wrapper">
	<img src="images/TopV2.jpg" alt="Online Store Comming Soon" border="0" />
	<img src="images/MiddleV2.jpg" alt="" border="0"/>
	<a class="amseru_box" href="http://geraintp.wufoo.com/forms/llewelyn-co/" rel="{handler:'iframe',size:{x:650,y:550}}">
	<img src="images/BottomV2.jpg" alt="" border="0"/>	</a></div>
</body>
</html>

Open in new window

0
gxp071
Asked:
gxp071
  • 2
1 Solution
 
TNameCommented:
Just a guess - try

#wrapper img{ display:block; }
or
#wrapper img{ vertical-align:bottom; }
0
 
gxp071Author Commented:
Cheers, display block did the trick....
0
 
TNameCommented:
Just to explain the problem: the images (inline elements in strict mode) will "float" on the font base line instead of the bottom line...
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now