Member Avatar for jpadams

I have a space between my divs and I can not figure out where this sucker is coming from. I have checked all images to make sure they are the same and it is still there.

The development site is

Here is the CSS

#Table_01 {
	left:0px;
	top:0px;
	width:1024px;
	height:768px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#Header {
	left:0px;
	top:0px;
	width:1024px;
	height:131px;
}

#Avatar {
	float: left;
	left:0px;
	top:131px;
	width:270px;
	height:637px;
}

#Content {
	float: left;
	left:270px;
	top:131px;
	width:676px;
	height:458px;
	background-color: #abaaaa;
}

#RightSide {
	float: right;
	left:946px;
	top:131px;
	width:78px;
	height:637px;
}

#Footer {
	float: left;
	left:270px;
	top:589px;
	width:676px;
	height:179px;
}

#Copyright {
}

Here is the HTML

<div id="Table_01">
	<div id="Header">
	<img src="images/Header.png" width="1024" height="131">
    </div>
<div id="Avatar">
		<img src="images/Avatar.png" width="270" height="637">
</div>
	<div id="Content">
Content.....
	</div>
	<div id="RightSide">
		<img src="images/RightSide.png" width="78" height="637">
	</div>
	<div id="Footer">
		<img src="images/Footer.png" width="676" height="179">
	</div>
    <div id="Copyright">
    Jonathan Adams
    </div>
    </div>
Edited by jpadams because: n/a
  • 4 Contributors
  • 4 Replies
  • 107 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by onhaleakala

Dani AI

Generated

Good catch by — adding a DOCTYPE is the right fix. Missing or incorrect DOCTYPE forces the browser into quirks mode, which uses legacy, nonstandard layout rules. That can produce mysterious gaps, different box-model behavior, odd float/margin handling, and other layout surprises; summed that up well.

Quick, practical checks and fixes:

  • Confirm the mode by opening the devtools console and evaluating document.compatMode. BackCompat means quirks mode; CSS1Compat means standards mode.
  • Use a valid DOCTYPE so the page renders in standards mode (for new projects prefer <!DOCTYPE html>).
  • After switching to standards mode, inspect computed styles in devtools for unexpected body margins or line-height on image-containing elements. Inline images can create small gaps because of baseline alignment — if needed set the image to display:block or remove inline whitespace.
  • If you have left/top in CSS, make sure the element is positioned (position:relative|absolute); those properties do nothing on statically positioned elements in standards mode.

If fixing the DOCTYPE exposes other legacy hacks, update or remove them rather than trying to force quirks-mode behavior. For background and diagnosis tips, see MDN’s notes on and the Document.compatMode API.

Recommended Answers

All 4 Replies

Member Avatar for Member #114696

I see that you havent used DOCTYPE in your html file. Since you code is HTML(not xHTML, which I strongly recommend to use), add this to top of your HTML file and apparently this works well with IE8, IE8Compatibility, Firefox, Chrome.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Edited by Member #114696 because: n/a
Member Avatar for jpadams

Awesome it looked like that fixed it! Thanks buddy!

Member Avatar for MidiMagic

If there is no doctype, it throws the browser into quirks mode. Quirks mode causes browsers to do things they don't normally do to try to render the page so everything is visible.

Member Avatar for onhaleakala

Spent hours on this. Thanks so much!!! Quirks mode almost drove me to drink.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.