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
  • 88 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
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.