Solved

IE7 and images spacing

Posted on 2007-12-05
3
478 Views
Last Modified: 2013-12-25
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
Comment
Question by:gxp071
  • 2
3 Comments
 
LVL 28

Accepted Solution

by:
TName earned 125 total points
ID: 20410206
Just a guess - try

#wrapper img{ display:block; }
or
#wrapper img{ vertical-align:bottom; }
0
 
LVL 6

Author Comment

by:gxp071
ID: 20410214
Cheers, display block did the trick....
0
 
LVL 28

Expert Comment

by:TName
ID: 20410226
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now