Jump to content
Sign in to follow this  
Ben

Div not touching the edge of the page

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...