Solved

IE7 and images spacing

Posted on 2007-12-05
3
480 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Popup to change image and store url in database 2 30
Alignment is not working correctly. 8 32
is this a cms? 8 33
Objects on Same Line 2 17
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

919 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

19 Experts available now in Live!

Get 1:1 Help Now