Member Avatar for PsychicTide

So I've attempted to make a very simple page using a table-less method, but I've run into a problem. On IE it shows up as one whole peice with nothing obviously wrong. On FF I get a space between every div about 5-10px in height and can't seem to find a way to remove them.

Anyone with a free moment willing to help me out with this?.... code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Seaside Detail - Index</title>
<style type="text/css">
html,body{margin:0;padding:0}
body{margin:0;padding:0;width:100%;height:100%;background-image: url(../img/mainBG.jpg);background-repeat: repeat-y;background-position: center;}
div#header{width:1211;margin:0;text-align:center;}
div#navigation{width:1211;height:35;padding:0;margin:0;text-align:center}
div#navUnder{width:1211;height:35;padding:0;margin:0;text-align:center}
div#content{display:table;width:1211;height:600px;margin:0;text-align:center}
div#footer{width:1211;height:72px;margin:0;padding:0;text-align:center}
</style>
</head>

<body>
<div id="wrapper">
	<center>
<div id="header"><img src="/img/header.jpg" width="1211" height="242"alt="Seaside Detail"></div>
<div id="navigation"><img src="/img/navHome.jpg" border="0" width="159" height="35" alt="Home"><img src="/img/navAboutus.jpg" border="0" width="181" height="35" alt="About Us"><img src="/img/navServices.jpg" border="0" width="168" height="35" alt="Services"><img src="/img/navProducts.jpg" border="0" width="182" height="35" alt="Products"><img src="/img/navCar.jpg" border="0" width="521" height="35" alt=""></div>
<div id="navUnder"><img src="/img/underNav.jpg" border="0" width="1211" height="35" alt=""></div>
<div id="content"><img src="/img/indexImage.jpg" border="0" width="1211" height="596" alt=""></div>
<div id="footer"><img src="/img/footer.jpg" border="0" width="1211" height="72" alt=""></div>
	</center>
</div>
</body>
</html>

I can provide a temp site to go to, but would prefer to just work from the code.

Any ideas? :-/

  • 2 Contributors
  • 2 Replies
  • 105 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Small vertical gaps between stacked divs in Firefox are usually a layout-mode or inline-image issue, not a mystery. As found, changing the DOCTYPE will alter how browsers interpret widths/heights (quirks vs standards), and is right that box-model differences are often the root cause. A more robust fix is to address how images and sizing are rendered rather than switching DOCTYPE.

Make images stop behaving like text by making them block-level or changing their vertical alignment. This removes the small baseline/descender gap you see in Firefox:

img { display: block; }

If you need images side-by-side (navigation strip), use vertical-align instead:

#navigation img { vertical-align: top; }

For the sizing/box-model problem that mentioned, either nest an inner element for the explicit width/height and put margins/padding on the outer wrapper, or opt into the simpler consistent model with box-sizing:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Other practical tips: avoid display:table on basic image containers unless you need table semantics; replace <center> with a centered wrapper using margin: 0 auto;; use line-height: 0 or font-size: 0 only on containers that hold images (they hide text). Debug with Firefox’s inspector to check computed margin, padding, line-height, and box-sizing. For reference on the CSS behaviors above see MDN box-sizing and MDN vertical-align.

Member Avatar for PsychicTide

decided just to switch to a new DOCTYPE "HTML 4.01 Transitional//EN"
"

solved the problem... in case you were wondering

Member Avatar for MidiMagic

The problem is that you are putting size styles (width, height) and nonzero surrounding styles (margin, border, padding) in the same tag.

This is an IE / FF incompatibility.

- FF obeys the standard, putting the surrounding styles outside the size styles.

- IE disobeys the standard, cramming the surrounding styles inside the size styles.

The trick is to nest tags, giving one the size style and the other one the surrounding style.

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.