• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 503
  • 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

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