CSS Forum

**feraira** · 02-17-2007, 02:11 PM

Hi guys (and girls) i'm currently trying to design a layout in CSS.

At the moment I only have one problem, and that is the footer at the bottom of the page. On IE it is fine and is how it should be, but in FF it is rather too BIG...

Below are screenshots; if you need any code, just ask.

Thanks in advance.

IE

FF

**vangogh** · 02-17-2007, 02:36 PM

Code would definitely help. There could be quite a few reasons for the difference. Without code all we'll be doing is guessing. If this is online somewhere you can post a link.

If I had to guess I'd think there's some kind of padding being applied to the container around the footer that IE is ignoring.

**feraira** · 02-17-2007, 02:39 PM

Entire Source:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Be The Band - Can You Manage It?</title>

<style type="text/css">

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:100%;
	background-color: #333333;
	color: #CCCCCC;
}
#main {
	font-family:Arial, Helvetica, sans-serif;
	font-size:100%;
	background-color: #333333;
	color: #CCCCCC;
	border-left: 2px solid #000000;
	border-right: 2px solid #000000;
	border-bottom: 2px solid #000000;
	width: 60%;
	margin-left:auto;
	margin-right: auto;
	padding:5px;
	clear:both;
}
#right {
	width:20%;
	float:right;
	text-align:right;
}
#left {
	width:20%;
	float: left;
}
#top {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	padding-bottom:5px;
}
#footer {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	border: 2px solid #000000;
	width:25%;
	padding:2px;
}
p {
	font-size: 90%;
	color: #CCCCCC;
}
h1 {
	font-size: 200%;
	font-weight: bold;
	text-align:center;
	line-height: 30%;
	color: #00FF00;
}
h2 {
	font-size: 150%;
	font-weight: bold;
	text-align:left;
	line-height:30%;
	color: #00FF00;
}
h3 {
	font-size: 120%;
	font-weight: bold;
	text-align:left;
	line-height:30%;
	color:#00FF00;
}

a {
	color: #0099ff;
	text-decoration:none;
}

</style>

</head>
<body>

<div id="top">
<p>TOP</p>
</div>

<div id="left">
<p>LEFT</p>
</div>

<div id="right">
<p>RIGHT</p>
</div>

<div id="main">
<h1>Be The Band</h1>

<h3>What is Be The Band?</h3>

<p><strong>Be The Band</strong> is a new revolutionary online multiplayer game that can be played by anyone, anywhere. When you join, you are a manager. The idea of being the manager is to hire musicians, train them to make them better and get them better instruments. Eventually you will be able to go against other players to fight for the #1 spot in the leagues.</p>

<p>Throughout <strong>Be The Band</strong> you will be able to interact with other players, hire musicians, buy new instruments and train your musicians. As well as being in charge of the band, you are also in charge of their welfare! Be careful, beacuse if one of the bands musicians doesn't like it; you might find yourself not able to do any gigs!</p>

<h3>What do I need and how do I play?</h3>

<p>In order to play, you must have internet access, at home, at work, wherever. You need to have a passion for games not forgetting a passion for music if you're wanting to be the #1 band in the league tables of <strong>Be The Band</strong>.</p>

<p>You can signup by either clicking <a href="#" title="">this link</a> or an invitation link sent to you by a friend. Also, for a full complete guide to our rules and a game FAQ, just use the help link at the top of the page!</p>

<h3>Screenshots</h3>
</div>

<div id="footer">
<p>Copyright &copy; Be The Band 2007</p>
</div>

</body>
</html>

**vangogh** · 02-17-2007, 02:59 PM

I think the issue is being caused because you wrapped the footer info inside a . FF is correctly showing the default top and bottom margin for a 

It's ok to have the copyright text inside the div alone. Take away the and I'm pretty sure the spacing will look the same in both FF and IE.

**feraira** · 02-17-2007, 03:01 PM

Quote:

Originally Posted by vangogh

I think the issue is being caused because you wrapped the footer info inside a . FF is correctly showing the default top and bottom margin for a 

It's ok to have the copyright text inside the div alone. Take away the and I'm pretty sure the spacing will look the same in both FF and IE.

I've already tried. It's still the same.

**vangogh** · 02-17-2007, 03:27 PM

Try again. As soon as I changed your footer to:

<div id="footer">
Copyright © Be The Band 2007
</div>

the div closed up around the text in FF.

**feraira** · 02-17-2007, 03:40 PM

Ahh, I don;t know what you did, but it worked that time, great. Thanks bud.

**vangogh** · 02-17-2007, 05:26 PM

Glad to help. I wonder if the last time your browser just needed a refresh of the cache. Maybe it was still displaying things prior to making the change. Happens sometimes.

**LadynRed** · 02-18-2007, 12:10 PM

It is proper to put the copyright inside a . I would suggest that you adjust the margin and padding on the tag for the footer to a very small amount, then adjust as needed.

**vangogh** · 02-18-2007, 08:26 PM

Just curious, but why is it proper to put the copyright inside tags? I'd never heard that before.

**LadynRed** · 02-19-2007, 04:10 PM

Semantically, text belongs inside paragraphs - just like you would any print document

**vangogh** · 02-19-2007, 10:11 PM

Thanks and good to know.