Space at the bottom of my page? html/css

**Jakifer** · 01-06-2009, 04:59 PM

This page creates popup windows when the images are clicked by using a MultiBox mootools script.

The CSS + and HTML is fairly simple. But for some reason when I render this in Chrome/IE it renders a lot of additional empty space underneath the main content area. And more space to the right of the page, forcing scroll bars to appear even when they're not needed. In FireFox the content box doesn't load correctly and the javascript doesn't load at all. I've heard that there are a few problems with Firefox and some css not working together. Is this it?

I've not got a great deal of experience in this so any help would be really appreciated. If there is anything else you might need to know, just say.
Cheers

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>

<link href="css/multibox.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" /><![endif]-->

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/overlay.js"></script>
<script type="text/javascript" src="js/multibox.js"></script>

<style type="text/css">

/*
Author: Author
Updated: 06/01/09
*/

body {
	color: #797979;
	font-family: Verdana, Arial;
	font-size: 75%;
	background: url(img/razmikalogo.png) no-repeat bottom left;
}

#header {
	width: 500px;
	margin: auto;
	padding-top: 50px;
	padding-bottom: 5px;
}

#header #logo {
	background: url(img/logo.jpg) no-repeat top center;
	height: 44px;
	padding-bottom: 5px;
	border-bottom: 2px solid #797979;
	margin-bottom: 20px;
}

#header #logo h1 {
	text-indent: -9999px;
}

#content {
	background-color:#DDEEDD;
	border-style: solid;
	border-colour: #ffffff;
	margin-left: auto; 
	margin-right: auto;
	width: 40em;
	padding-top; 60px;
	padding-bottom: 30px;
}

#dialpad {
}

.nav {
	float: right;
	margin-top: -15px;
}

</style>

</head>
<body>

<br><br>
<div class="nav"><a href="#" target="_blank">
<img src="img/htmlVersion.jpg" width="140" height="44" border="0" alt="HTML Version" />
</a>
</div>

	<div id="header">	
		<div id="logo"><h1>Title</h1></div>
		<p class="desc" align="center">Description</p>
	</div>
	
	<script type="text/javascript">
			var box = {};
			window.addEvent('domready', function(){
				box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true, showControls: false});
			});
		</script>
	
	<div id="content">
		<div id="dialpad" align="center">
			<br/>
			<br/>
			
			<a href="about.htm" id="about" rel="width:550,height:500" class="mb" title="About Razmika Dance"><img src="img/about.jpg" alt="" border="0" /></a> 
			<div class="multiBoxDesc about"></div>
			
			<a href="gallery.htm" id="gallery" rel="width:550,height:500" class="mb" title="Gallery"><img src="img/gallery.jpg" alt="" border="0" /></a> 
			<div class="multiBoxDesc gallery"></div>
			
			<a href="booking.htm" id="booking" rel="width:550,height:500" class="mb" title="Booking"><img src="img/booking.jpg" alt="" border="0" /></a> 
			<div class="multiBoxDesc booking"></div>
			
			<a href="contact.htm" id="contact" rel="width:550,height:500" class="mb" title="Contact Maggi Squire"><img src="img/contact.jpg" alt="" border="0" /></a> 
			<div class="multiBoxDesc contact"></div>
	
		</div>
	</div>
	
</body>
</html>

**swfblade** · 01-07-2009, 07:11 AM

It might be a good start to get your code up to standard. there is a lot of incorrect xhtml syntax

http://validator.w3.org/

use the above validator to help you get your xhtml coding skill's up to scratch, or use a different Doctype (html 4.01 might be better for you).

hth

**joncom11** · 01-12-2009, 06:42 PM

Originally Posted by swfblade

It might be a good start to get your code up to standard. there is a lot of incorrect xhtml syntax

http://validator.w3.org/

use the above validator to help you get your xhtml coding skill's up to scratch, or use a different Doctype (html 4.01 might be better for you).

hth

As he said, there might be some back code mucking up your page. Have you tried viewing it in different browsers to see if it's a consistant problem?

Thread: Space at the bottom of my page? html/css

Thread Tools

Display

Space at the bottom of my page? html/css

Posting Permissions