0

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
3
Views
9 Years
Discussion Span
Last Post by MidiMagic
0

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

solved the problem... in case you were wondering

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.