IE 5 and 6 are pushing the margin between divs down too far.

[SubEffect]

This exposes the white behind the background image.
The format is thus (works in everything else):

<div id="wrap" style="height:600px; max-height:600px">
<div id="menu">
</div>
<div id="links">
</div>
<div id="content">
<form>
<table>
	
</table>
</form>
</div>
THE GAP IS HAPPENING HERE
</div><!-- end wrap -->

It is a large gap and not necessary at all. I want to close it but I can't see why it is there in the first place or why setting the height of the wrap div doesn't change it at all.

In Opera and FF removing the height definitions on the wrap div gives the gap too.

[DocType]

It's the empty form you have in there.

It's similar to the space that's set aside in lists for the bullets to sit in.

You'll have to set margin to 0 to get rid of it, I'm not sure if FF uses padding on forms like it does for list bullet boxes, but if it's still there in FF when you remove the margin, then you'll know to remove padding as well.

It can get a little tricky if you have your form nested in a div with padding/margin properties applied in a complicated rule structure.

[SubEffect]

Ho ho, very funny.

[DocType]

Ho ho, very funny.

No really, remove the form, or it's margin/padding and see what happens.

<form style="margin:0;">

[SubEffect]

Setting the margin to 0 does make a difference - the gap is much smaller, about 10px now. Still there though.

I thought you were joking cause I already said this is just the format.

[DocType]

Setting the margin to 0 does make a difference - the gap is much smaller, about 10px now. Still there though.

Their shouldn't be any margin.

Which browser are you seeing it in?

[SubEffect]

Only in IE 5 and 6. Of course

[DocType]

Only in IE 5 and 6. Of course

10px, that's not much, it's probably just the block around the text.

add

<span style="border:solid white 1px;">THE GAP IS HAPPENING HERE</span>

and see if theirs a gap between the border and the table.

[SubEffect]

There is no text there on the actual page. I've done what you said and I can see that there is the gap is between the lower border of the content div and the wrap div.

But I already knew that.

Linkage:
http://www.medicaltextbooks.co.uk/credits_contact.php

[DocType]

Edit:



O.K. I see what you're talking about now, it's hard to spot.

Add <form style="margin:-15px;

Edit:



If this is an IE only thing, and you use the margin setting I suggested, then you'll have to use a hack so the other browsers won't get the style.

style="margin:-15px; ma\rgin:0;"

You might have to check to see what the margin on the form is set to and include that value in the ma\rgin hack.

I think theirs most likely better way than using a hack though.

It has something to do with your layout, probably towards the top of the page, where you have something fugded.

Keep checking, you'll find it.

[SubEffect]

No, that doesn't work either.

I've looked at the page in FFs DOM inspector and I cannot find anything. IE is just creating extra space without reason. Even if I alter the height of the wrap div all the other browsers obey. IE does not.

[DocType]

You missed my post above.

[SubEffect]

That margin hack works in IE5 but not IE6. This is ridiculous.

[DocType]

This is also ridiculous.

You've got 11 <br> tags in your markup.

You need to put that stuff in a list.

I think it's pushing your container down below your image.

<span>Submit
 <br> - a book title
 <br> - a book review,<br>&nbsp;&nbsp;&nbsp;rating or both
 <br> - an error
 <br> - a book for sale
</span></a>
<a href="forum/index.php">Forum 
<span>Register at the<br>forums to discuss
 <br> - the site &amp; contents
 <br> - textbooks
 <br> - medicine
 <br> - future site versions
 <br> - your suggestions
</span>

[DocType]

That margin hack works in IE5 but not IE6. This is ridiculous.

It works on IE6 the same way it works on any other standards mode browser.

IE6 ignores the first rule, and gets the \ed one.

[SubEffect]

That margin hack is not working in IE6. It's fine in everything else. In fact it is messed up in IE5 too - the gap is gone but the text at the bottom of the form is pushed up to overlap the buttons.

I've swapped the <br> for lists. No difference.

[DocType]

Maybe you should swap the tables for divs. Lol

You could increase the size of your image.

Or use a tilable background image on the body, and put the artificial heart image in a div, and center it.

[SubEffect]

I could take the forms out of tables but it's a nice way to format them.

I don't want to increase the image size as it is already too big really for memory and quality.

This shouldn't be happening at all. IE is so awkward. Why can I not just set a maximum height for a division?

[DocType]

I could take the forms out of tables but it's a nice way to format them.

I don't want to increase the image size as it is already too big really for memory and quality.

This shouldn't be happening at all. IE is so awkward. Why can I not just set a maximum height for a division?

You can set a height, but if your content grows beyond that , it'll overflow the division.

Setting overflow to hidden might fix the margin problem for now.

Like I said before though, if you put the heart image in a div as it's background, you won't have to increase it's size.

Then you use a tilable image on the body, or the wrapper, set to repeat, that way as the div expands, the background will tile, so no more margin, just background image as far as the eye can see.

[SubEffect]

I may have to do this tile thing after all. It's so dumb. There is NOTHING between the divs. . .

Actually the heart is already the background image of the wrap div. hmmmm

[DocType]

I may have to do this tile thing after all. It's so dumb. There is NOTHING between the divs. . .

Actually the heart is already the background image of the wrap div. hmmmm

Tiling an image is the best way to go, since it'll keep tiling whenever the div expands.

[SubEffect]

How do I do that though? The heart is already the background image. I could put a div behind it but that seems silly. The other thing is the heart image cuts off very abruptly so it will be hard to blend it with another image. I was thinking of fading it out at the bottom. . .

I've fixed the problem by taking some <p> tags out of the content text (not uploaded) bu this is not a satisfactory solution as if I alter content size in the future the same thing will happen.