Jump to content

I have some problems


abow

Recommended Posts

I'm making a new website and I have problems with the footer. Simply I want a bar at the bottom of the page, but I get some weird glitch.Site: http://cssurfing.com/beta/CSS code:

body,td,th {	font-family: Futura, Georgia, Serif;	font-size: 10px;	color: #000000;}body {	background-image: url(images/background.jpg);	background-repeat: repeat;	background-color:#FFFFFF;	margin:10px;	padding:10px;}#footer {	background-color:#FF008C;	height:25px;	width:100%;	position:absolute;	bottom:0px;	text-align:center;}

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>test</title><link href="screen.css" rel="stylesheet" type="text/css" media="screen" /></head><body><div id="footer"></div></body></html>

It would be really nice if you help me.ps: I just noticed that it works perfectly in IE, just not in FireFox.

Link to comment
Share on other sites

What seems to be happening is that IE and FF use different rules about taking margins and padding into account, when applying the 100% width. As a result, FF ends up with a width that goes off the page.You can demonstrate this in either of two ways:

  • Set margin and padding to 0px in your body style, or
  • Set width to 98% in your footer style.

Either of these makes the weirdness go away.Over to you for the best workaround for your page...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...