Images breaking nested div layout in firefox (works fine in IE)

[drhowarddrfine]

now that all of that is out of the way, the site is still rendering exactly as it was in the images in my previous post.

That's OK. We just have to make sure no errors are fooling us.

min-width and max-width do not work in IE.
Neither does min-height or max-height.

[drhowarddrfine]

I'm wondering if min/max stuff is the problem. Search here for those properties. (Look there just to see how bad IE is, too)

Sorry, my help is on the fly. Getting geared up for a huge project next week.

[vecima]

as a cleanup measure, i've deleted all of the min and max height and width from my css.

you were absolutely right, it changed nothing.

as for the layout, i made a bit of progress, though i'm not sure why.

to bring the images closer together vertically, i simply inserted a <br /> after the first two images. that seems a little hacky to me, but it now looks exactly as i had wanted.

as for the images running into the gray bar: i took a look at my php code for this page:

<div id='innerpage'>
	<strong>Projects</strong>
	
	<div class='thickbar'>
		<strong>Games</strong>
	</div>
	
	<div class='colorbar'>
		<strong>Earth - Right</strong>
	</div>

	<?php include "projects_er/er.php"; ?>
	
	<div class='thickbar'>
		<strong>Mods</strong>
	</div>
	
	<div class='colorbar'>
		<strong>The Battle of Philadelphia</strong>
	</div>
	
	<?php include "projects_bop/bop.php"; ?>
	
	<div class='colorbar'>
		<strong>The Rebel</strong>
	</div>

	<?php include "projects_rebel/rebel.php"; ?>
	
	<div class='thickbar'>
		<strong>Maps</strong>
	</div>

</div>

and i realized that the transition where this was happening was a special case, and might not be caused by the images at all. it's the only spot on the page where the colorbar (for "The Rebel") comes after an element other than a "thickbar". I used the same thumbnail links to test this theory, and it turns out i was right. They work fine everywhere else. I was tricked into thinking the images were breaking it because that one spot was the only one where i implemented the images. I decided to try inserting a "thickbar" above the colorbar in question, like so:

<div id='innerpage'>
	<strong>Projects</strong>
	
	<div class='thickbar'>
		<strong>Games</strong>
	</div>
	
	<div class='colorbar'>
		<strong>Earth - Right</strong>
	</div>

	<?php include "projects_er/er.php"; ?>
	
	<div class='thickbar'>
		<strong>Mods</strong>
	</div>
	
	<div class='colorbar'>
		<strong>The Battle of Philadelphia</strong>
	</div>
	
	<?php include "projects_bop/bop.php"; ?>

	<div class='thickbar'>
		<strong>Mods (this is a div class='thickbar')</strong>
	</div>
	
	<div class='colorbar'>
		<strong>The Rebel</strong>
	</div>

	<?php include "projects_rebel/rebel.php"; ?>
	
	<div class='thickbar'>
		<strong>Maps</strong>
	</div>

</div>

and my result was that the page displayed exactly as i expected it to.

again, i'm not sure why this is happening this way, but maybe this will shine some light that one of you could help me see?

here is an example of the regular version: (notice how the images still slightly overlap the following gray bar, and how the gray bar is still bigger than the other ones)

http://www.type3studios.com/?projects

and here is an example with the extra .thickbar (it displays like it should, except i don't really want the extra .thickbar there)

http://type3studios.com/test/?projects

thanks yet again guys.

i'm almost afraid to start testing the page in safari ;-)

[drhowarddrfine]

Well, now you're back in quirks because of the comments on the first line. Also, you have defined id's more than once. An id is a unique name for one element on a page. If you need to apply the same style to multiple elements, use 'class'.

Safari will be fine. A lot better than IE will be.

[vecima]

Well, now you're back in quirks because of the comments on the first line...

i'm not sure what you mean... there are no comments on the first line. the code i posted is from the file projects.php which is included in my index.php. the index.php has the doctype as the very first thing.

as for the css id... i'll take a look again... i think i may have multi-used something i didn't originally intend to, thanks.