PDA

Click to See Complete Forum and Search --> : ie buggurs up a image spacer

k0r54
08-07-2005, 01:43 PM
Hi,

For some reaosn IE adds about 10px of space on a image spacer, firefox is how i want it to look but ie just messes it up any ideas y?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.imagecontents {
position:relative;
border-top:1px solid #6B622E;
border-bottom:1px solid #6B622E;
border-right:1px solid #6B622E;
background-image:url(../images/infoback.gif);
text-align:center;
width:125px;
}

.titles {
height:20px;
padding:0 0 0 2px;
border-bottom:1px solid #6B622E;
background-image:url(../images/subtitlesbg.gif);
background-repeat:repeat-x;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-size:12px;
font-weight:bold;
}

.productimages {
margin:10px;
}
</style>
</head>

<body>
<div class="imagecontents">
<div class="titles">
<p>Screensavers</p>
</div>

<img src="http://www.customvmail.com/animations/10011.gif" width="101" height="80" border="1" class="productimages">
<img src="http://www.test.apc-compunet.co.uk/hr.gif" width="115" height="2">
<img src="http://www.customvmail.com/animations/10010.gif" width="101" height="80" border="1" class="productimages">
<img src="http://www.test.apc-compunet.co.uk/hr.gif" width="115" height="2">
<img src="http://www.customvmail.com/animations/10023.gif" width="101" height="80" border="1" class="productimages">
<img src="http://test.apc-compunet.co.uk/hr.gif" width="115" height="2">
<img src="http://www.customvmail.com/animations/10026.gif" width="101" height="80" border="1" class="productimages">
<img src="http://www.test.apc-compunet.co.uk/hr.gif" width="115" height="2">
<img src="http://www.customvmail.com/animations/71424.gif" width="101" height="80" border="1" class="productimages">
</div>
</body>
</html>



p.s. no offence meant by images

Thanks
Adam
Stephen Philbin
08-07-2005, 01:48 PM
Why not just get rid of them? They look pretty pointless to me.
k0r54
08-07-2005, 03:21 PM
it serparates them, and unfortunatly its clients request
felgall
08-07-2005, 03:50 PM
You have a space between each image (new line character). Does getting rid of that fix your problem?
Stephen Philbin
08-07-2005, 03:54 PM
I very strongly doubt your client would know the difference between you clogging up the file with pointless markup and meaningless elements and you simply using a margin like any sensible person would allow you to do. I'd advise you take jobs from more sensible clients in future.

A good way of throwing all browsers into roughly the same sort of shape when handling CSS is to start with


* {padding:0;margin:0;}


That should save you from some of IE's stupidity.
k0r54
08-07-2005, 04:21 PM
mr herer.

Thank but sometime u cant decide what customers you have!

Thanks
Adam
k0r54
08-07-2005, 04:32 PM
btw padding and margin set to 0 dont work, i already tried it. either does the space between the images in the code

P.s. i am not usin it on this anyway, but its how i could break it down.

Thanks
Adam
ray326
08-07-2005, 04:55 PM
I think you're looking for this:

img {display:block}
k0r54
08-07-2005, 05:08 PM
ahh, that is exactly what im looking for :)

Thanks very much :)

What does it do exactly?

Thanks
Adam
ray326
08-07-2005, 05:28 PM
It removes the font-related effects of the normally inline img tag.
k0r54
08-07-2005, 05:30 PM
many thanks :)