Jump to content

Div not touching the edge of the page


Ben
 Share

Recommended Posts

Hi :)I'm trying to make my div (fullscreen) touch the edges of the web browser at both the top and the bottom.http://img88.imageshack.us/img88/8996/scre...110804at224.pnghttp://img31.imageshack.us/img31/2063/scre...110804at225.pngThis is the html I'm using:

<!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=UTF-8" /><title>Creative Designer</title><link rel="stylesheet" href="css.css" type="text/css"></head><body><div class="fullscreen"><div id="logo"><a href="index.html"><img src="images/logo-2.png"/></a></div><div id="menu_wrapper" class="grey"><div class="left"></div><ul id="menu"><li><a href="contact.html">Contact</a></li><li><a href="blog/index.html">Blog</a></li><li><a href="portfolio.html">Portfolio</a></li><li><a href="about.html">About</a></li><li><a href="index.html">Home</a></li></ul></div>
And my CSS:
body{ height:100%;background:url(images/new-background.png);}div.fullscreen{background:url(images/texture.png);position:relative;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;padding-bottom:0px;padding-top:0;width:1000px;height:100%;}#logo {position:relative;width:268px;height:42px;text-decoration:none;left:20px;top:47px;z-index:2;}#menu {font-family: Helvetica, sans-serif;text-transform: uppercase;position:relative;bottom:42px;margin: 0px 0;padding: 0;list-style-type: none;font-size: 15px;background-color:#ae4141;height: 136px;z-index:1;}#menu li {float: right;margin: 0;}#menu li a {text-decoration: none;display: block;padding: 0 20px;line-height: 136px;color: #999;}#menu li a:hover {background-image:url(images/menu.png);height:136px;color: #ffffff;}
If anybody knows how I can fix this that would be great. :) Edited by Ben
Link to comment
Share on other sites

For historical reasons, all browsers add a small gap all around the page. The problem is, they use different properties and different values to do. The best solution is to reset your margins and padding to 0. Then add them back in anywhere you need them.For minimal change:

body {   padding: 0;   margin: 0;}

For universal change:

* {   padding: 0;   margin: 0;}

You might try the universal. It looks like you're adding CSS to a lot of elements to achieve the same effect piece by piece.

Edited by Deirdre's Dad
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
 Share

×
×
  • Create New...