Ben Posted August 4, 2011 Share Posted August 4, 2011 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. Link to comment Share on other sites More sharing options...
jeffman Posted August 4, 2011 Share Posted August 4, 2011 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. Link to comment Share on other sites More sharing options...
Ben Posted August 5, 2011 Author Share Posted August 5, 2011 That's great, thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.