I thought this would be impossible....

Fist off in IE my site looks fine, then when i go over to firefox it messes up.

I plan to have this on my site: (its not live yet so i cant show you but here goes )

___________________________________________
|.......................................................|..........|
|.......................Text .........................|...pic...|
|__________________________________|_______|
|.............|.....................................................|
|.....Pic....|....................Text...........................|
|________|_________________________________|

Basically i have made a table for each row i plan on using. The pictures have a css style, the same style which is:

.pictures {
border: 1px solid #000000;
padding: 1px;
}

The left hand pictures have a solid border with 1px padding (as i wanted), However the pictures on the right hand side seem to have an extra 1 or 2 pixels padding on the bottom only with a solid border all the way around

Any ideas?

 

I'm surprised they don't BOTH have a bottom on them.

Images are inline elements, so anything inline is assuming that the element has letters and thus there is a baseline. Look at my text. The y's and j's and p's and q's have little tails that stick down beneath the normal text line. Now that the align properties have been changed since html3.0 or whatever it was, this little extra space is being assumed.

You could make the images block elements with display:block, since they have no baseline (course, you're prolly floating the images, so display doesn't mean a thing since float is automaticall block as I understand). You could maybe move the baseline with ye olde-fashioned vertical-align but that's deprecated and I hope you're using at least HTML4 strict : )

 

im not too sure on the html4 etc as i not to technical on this side of things, im using wordpress though if that helps (latest version which ever that may be)

This may be a little easier to work from

 

Well, that space certainly looks like space for little letter tails... but without seeing the html and css, I can't see why it's only affecting one image.

 

The picture style can be seen in the first post and the actual site html i used was...

<table cellpadding="0" cellspacing="0" width="100%">
<tr class="alternate">
<td class="pictures" width="150"><img src="image1" align="left" height="150" width="150" /></td>
<td class="text">Bla Bla Bla</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="text" align="right">Bla Bla Bla</td>
<td class="pictures" align="right" width="150"><img src="image2" width="150" /></td>
</tr>
</table>

 

I'm not as familiar with tables but if you're using css I think it can still be fixed.
Try

td.pictures {
  [b]display: block;[/b]
  border: 1px solid #000000;
  padding: 1px;
}

Code (markup):

Though I notice something:

no height declared like you do with the left image. So it might also be as simple as this, without specific height the browser is assuming that little letter-space on the bottom.

 

Hmm, i added the height and no difference. i removed the height from the other one and no difference, i added the block into the css and it messed it up...

I have no idea, completely stuck lol

 

Are you willing to take them out of the table? I'm more familiar with tableless layouts, though your positioning then is never pixel-perfect (but usually does the job).

The height made no difference at all?

What did display: block do? It should've made the image a block element inside the table. I'm pretty sure that's what that space is, the inline-ness of the image.

Here's some more info on the issue; maybe you'll think of something else as well: http://devedge-temp.mozilla.org/viewsource/2002/img-table/

Otherwise, the only way I could go any farther is to have <p>s with text and images floated to each side.

 

i woul be willing to remove the tables, i might look into having p's with aligned images if that would be easier to manipulate. Basically i just want to have the above image, so if i can do that with paragraphs that seems fine

 

I'll whip up an example for you at work later today using those red blocks.

 

cheers mate, would really appreciate it

 

Okay, here it is: http://stommepoes.jobva.nl/Bon300187/bonexample.html

But if you're new to CSS, some of it (most of it) might not make any sense, because to make it look pretty I added a lot of extra stuff, and usually I think examples should be as simple as possible.

Look at the page and view source in your browser. I've got the css sitting in the header so you can easily see it. The important things are the floats and the clear in the second div.

I used divs to each hold a block and text, and gave them ids (names) so that with the bottom one I could add the clear. Copy the code so you can edit it and remove the clear and you'll see the second text ride up too high.

The images I also gave ids so I could float one right and one left.

The p's I styled just so you could see a shorthand font description and a span to show what you can do with them. If you're not new to CSS, you're already familiar with all this : )

But anyway, the boxes look good, though I didn't have the space on the bottom when I just added the borders and 1px padding with no floating or anything.

So, even though they're inline elements, I think somehow sitting them in the table gave the one the space on the bottom.

You could just try them again without floats and maybe try sitting them back in the table to see if you can keep the space out of the way.

 

spot on that mate, rep added for your help. thank for the time you've spent helping me too

 

Did you apply the class or object name that you changed to block, to the image tag? Just asking because I can't see the code. Another thing to try would be to add a wrapper table to your tables so that you can set the cellpadding and cellspacing to 0. This will control the spacing between your tables. Even if that's not the problem, this is always a very good idea for tables and controlling browser output.

 

Yeah further up he has a bit of the html including the table and the images have the class of "picture" and in his/her css there's .picture {stuff;}.

Maybe you can figure out why the tables (if it was the tables??) giving the right image the inline-element bottom gap? I think I was right on the reason (inline elements having space on the bottom of the baseline for the letter parts that hang down) but no clue why it would then only affect one image and not the other??? And while I was building the example, right when I first added the borders and padding, I didn't get the space at all.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

	
</script>
<style type="text/css">

	body
	{
	 margin-top: 50px;	
	 margin-bottom: 50px;
	 background-color: #f0fff0;
	}

	.container
	{
	 width: 750px;
	 height: 300px;
	 position: relative;
	 margin-left: auto;
	 margin-right: auto;	
	}

	.container img
	{
	 width: 185px;
	 height: 140px;	
	 border: 1px solid black;
	 margin: 2px;	
	 padding: 2px;	
	}

	.container p
	{
	 margin-top: 0px;
	 font-family: arial;
	 font-size: 10pt;
	 text-align: justify;
	 width: 70%;
	}

	.bottom_img
	{
	 position: absolute;
	 top: 150px;
	 right: 0px;	
	}	

	.top_text
	{
	 position: absolute;
	 top: 20px;
	 left: 205px;		
	}

	.bottom_text
	{
	 position: absolute;
	 top: 175px;
	 left: 20px;	
	}

</style>
</head>
	<body>
		
	   <div class="container">

		<img src="./images/Cleve1.jpg">
		
		<p class="top_text">
		 I'm going to rent my self a house in the shade of the freeway. 
		 I'm going to pack my lunch in the morning and go to work each day.
		 And when the evening rolls around, I'll go on home and lay my body down.
		 And when the morning light comes streaming in, I'll get up and do it again. 
		 Ah men.  Say it again. Ah men. 
		 I want to know what became of the changes we waited for love to bring.
		 Were they only the fitful dreams of some greater awakening. I've been aware of the time going by. 
		 They say in the end it's the wink of an eye.	
		 And when the morning light comes streaming in, I'll get up and do it again. 			 
		</p>
		
		<p class="bottom_text">
		 She was a friend to me when I needed one. 
		 Wasn't for her I don't know what I would have done.
		 She gave me back something that was missing in me.  
		 She could have turned out to be almost anyone.  Almost anyone.  	
		 With the possible exception, of who I wanted her to be.
		  Running in to the midnight, with her clothes whipping in the wind. 
		 Reaching in to the heart of the darkness for the tenderness within. 
		 Standing in to the light of the city and then back in the shadows again. 
		 She wasn't much good at sticking around, but that girl could sing.
		 She could sing!
		</p>
		
		<img src="./images/Cleve2.jpg" class="bottom_img">

	   </div>

	   <div class="container">

		<img src="./images/Cleve1.jpg">
		
		<p class="top_text">
		 I'm going to rent my self a house in the shade of the freeway. 
		 I'm going to pack my lunch in the morning and go to work each day.
		 And when the evening rolls around, I'll go on home and lay my body down.
		 And when the morning light comes streaming in, I'll get up and do it again. 
		 Ah men.  Say it again. Ah men. 
		 I want to know what became of the changes we waited for love to bring.
		 Were they only the fitful dreams of some greater awakening. I've been aware of the time going by. 
		 They say in the end it's the wink of an eye.	
		 And when the morning light comes streaming in, I'll get up and do it again. 			 
		</p>
		
		<p class="bottom_text">
		 She was a friend to me when I needed one. 
		 Wasn't for her I don't know what I would have done.
		 She gave me back something that was missing in me.  
		 She could have turned out to be almost anyone.  Almost anyone.  	
		 With the possible exception, of who I wanted her to be.
		  Running in to the midnight, with her clothes whipping in the wind. 
		 Reaching in to the heart of the darkness for the tenderness within. 
		 Standing in to the light of the city and then back in the shadows again. 
		 She wasn't much good at sticking around, but that girl could sing.
		 She could sing!
		</p>
		
		<img src="./images/Cleve2.jpg" class="bottom_img">

	   </div>
		
	</body>
</html>

Code (markup):