Spacing in between an <img /> and <div>?

   <div align='center'>
    <img src='/images/title.png' alt='Johnson Processing' />
    <img src='/images/banner.png' alt='Logos are on sale' />
    <div id='navigation'>
     <img src='/images/home.png' />
    </div>
   </div>

PHP:

Ok, here's how it appears (I placed a border around the "Navigation" div to show where it is).

View the page.

I don't want the extra space in between the Image "header" and the div "navigation", I want them to be touching, but I'm not sure how to make that work.. Anyone know?

I also don't want the space in between the images (both title.png, and banner.png).

 

for starters, your 2nd css class isn't even closed with a }

try a margin-top: -5px; or -10px; on the #navigation class

 

for the images, you're going to have to create css classes for them, too.

 

? What css class.. My CSS is located here:

http://www.johnsonprocessing.com/global.css

I have enclosed both of them. I will try your suggestions though.

 

my apologies, the last bracket was hanging off my screen.

 

there you go, almost got it now.

 

The page is blank right now, so I can't see anything, but if you have to use negative top margins just to make things fit normally, you're probably fighting a browser default:

Images are inlines, and inlines, mostly being text, have a baseline for a bottom, and then some extra space below that. This makes room for dangly thingies on letters like gypj. Even though an image is a box, it too usually comes with this little space on the bottom, unless in the CSS you've changed it to a block of some sort.

Some people do this, make images into blocks to remove the space, but you might not want the images to act like blocks. Blocks do different things and folllow different rules.

The snarky way to fix the space (if it is indeed the regular default inline space thing) is to do something like:

img {
vertical-align: bottom;
}

vertical-align works on inlines only, and pretty much lets you choose which "line" in an inline you want the top or bottom to line up with. "bottom" here now means the bottom of the little space, instead of the default (which is "baseline", the bottoms of non-dangly letters).

So actually you'll see this in a lot of peoples' stlyesheets (including mine), and any images who later need to be turned into blocks ignore that bit of code, since blocks don't deal with vertical-align (except in tables).

Going back to an older copy of the code, before the margins and things were added, does vertical-align: bottom remove the space?

That space will also stretch a container further down too: if you have images inside a box with a set height (let's say this box was set to height: 460px, with the added height of the images, the actual height shown on the screen would be something like 467px or something.
You can see it here (this is someone else's demo page I copied, NOT my code), and in the code, you see where the code is commented out. The yellow strip should vanish when that commented code is uncommented. The yellow is the container, not the images! But it's the images' space making the yellow show.

 

What a great explanation!!
Finally I understand why images behave the way they do...
Thanks!
/Claes

 

Also, the default setting of border of images are not zero,
so you have to set the border value to zero manually .

img {
border:0;
}

 

or border:none;..

 

I doubt this will look consistent in older browsers. You may want to consider using a CSS reset.

 

who mentioned borders? The OP is already stripping borders:

#navigation img { border: 0px; }

Code (markup):

Resets: bah! Set what you want, and nothing more.

No More Code Than Strictly Necessary unless you like repeating yourself for fun. : )

 

<div align='center'>

Presentational attribute, has no place in modern markup.

<img src='/images/title.png' alt='Johnson Processing' />

Presentational image, should probably be a heading tag with an image replacement technique.

<img src='/images/banner.png' alt='Logos are on sale' />

Ok, a banner, that's content, so that's ok.

<div id='navigation'>
<img src='/images/home.png' />
</div>

That smells like a menu. That should be an unordered list.

Given that the images in question are spanning full width - I'm suprised nobody has suggested this.
DISPLAY:BLOCK;

Looking at the page, you have a LOT of images that flat out do not belong in your markup... I mean things like this:

<font class='h1'> Welcome! </font>

are a total laugh.

The markup for that page should probably be something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Johnson Processing - Professional Web Design & Illistration
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		JOHNSON<small>PROCESSING</small>
		<span></span>
	</h1>

	<a href="/services/logo.php" class="topBanner">
		<img src="images/banner.png"
			alt="Logos are on sale"
		/>
	</a>

	<ul id="mainMenu">
		<li class="home">
			<a href="/index.php">Home<span><span></a>
		</li>
		<li class="services">
			<a href="/services.php">Services<span></span></a>
		</li>
		<li class="portfolio">
			<a href="/portfolio.php">Portfolio<span></span></a>
		</li>
		<li class="order">
			<a href="/order.php">Order<span></span></a>
		</li>
	</ul>

	<div id="content">

		<div class="borderTop"><div></div></div>
		<div class="borderSides">
			<h2>Hello</h2>
			<p>
				Welcome to Johnson Processing! I am currently working on the website. I am not 100% sure what to make it. I know I want to show my designs and sell them, and also want to do some freelance work. Thank-you for coming to Johnson Processing. Have a nice Day.
			</p>
		<!-- .borderSides --></div>
		<div class="borderBottom"><div></div></div>

		<div class="borderTop"><div></div></div>
		<div class="borderSides">
			<h2>Welcome!</h2>
			<p>
				I am Jake, this is my website.
			</p>
			<div class="info">
				Date posted on: 07-12-09.
			</div>
		<!-- .borderSides --></div>
		<div class="borderBottom"><div></div></div>

		<div class="borderTop"><div></div></div>
		<div class="borderSides">
			<h2>Welcome</h2>
			<div class="info">
				Date posted on: 07-12-09.
			</div>
		<!-- .borderSides --></div>
		<div class="borderBottom"><div></div></div>

		<div class="borderTop"><div></div></div>
		<div class="borderSides">
			<h2>asd</h2>
			<div class="info">
				Date posted on: 07-12-09.
			</div>
		<!-- .borderSides --></div>
		<div class="borderBottom"><div></div></div>

		<div class="borderTop"><div></div></div>
		<div class="borderSides">
			<h2>23r</h2>
			<div class="info">
				Date posted on: 07-11-09.
			</div>
		<!-- .borderSides --></div>
		<div class="borderBottom"><div></div></div>

		<div class="borderTop"><div></div></div>
		<div class="borderSides">
			<h2>23r</h2>
			<div class="info">
				Date posted on: 07-11-09.
			</div>
		<!-- .borderSides --></div>
		<div class="borderBottom"><div></div></div>

		<div class="borderTop"><div></div></div>
		<div class="borderSides">
			<h2>erf</h2>
			<div class="info">
				Date posted on: 07-10-09.
			</div>
		<!-- .borderSides --></div>
		<div class="borderBottom"><div></div></div>

		<div class="borderTop"><div></div></div>
		<div class="borderSides">
			<h2>w3rg</h2>
			<div class="info">
				Date posted on: 07-10-09.
			</div>
		<!-- .borderSides --></div>
		<div class="borderBottom"><div></div></div>
	<!-- .contentBox --></div>

<!-- #pageWrapper --></div>

</body></html>

Code (markup):

Those extra DIV wrapped in the top/bottom border elements are to apply sliding doors so the layout is not tied to a fixed width... the empty spans in the menu and h1 are there as hooks to apply the images using glider-levin so that people browsing images off aren't left out in the cold and so as to provide search engines with meaningful text since in testing both ALT and TITLE are ignored. (making them slightly less capable than most screen readers)

I have time later I'll write up the CSS that would go with it to show you what I mean.

 

Wait, you WANT the header text to overlap into the banner looking like a rendering error?

-- edit -- Ok, had a few minutes after lunch, so I banged out my approach to that layout.

http://www.cutcodedown.com/for_others/Jake-Johnson/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/Jake-Johnson

is unlocked so you can grab the gooey bits, which you'll want to since I redid all the images.

Valid XHTML 1.0 Strict, would be valid CSS if not for a few FF and IE workarounds (Yes, I said FF workarounds). Tested working identical in FF 2 & 3, Opera 9.6 and 10 beta, IE 5.5, 6, 7 & 8, and the latest iterations of Safari and Chrome.

I took the liberty of implementing hover effects on your menu, (nothing fancy, just darken the text) and you'll notice I opened the design up to be fluid width between 800px and 1152px.

The big thing is moving all the non-content images out of the markup so that images off or CSS off the page degrades better... and the use of semantic markup for the same reasons.