Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    amc
    amc is offline
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    spontanous top margin

    the page below shows with a margin at the top (and at the sides). Why is the reason, if no margin,padding,etc.. is declared?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #HEADER {
    width:100%;
    height:40px;
    background:#330022;
    color:#EEFF00;
    } </style>
    </head>

    <div id="HEADER">HELLO</div>
    <body>
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Hello amc,
    That margin comes from the browsers default settings. What makes that even more fun is defaults are different from browser to browser.
    You also have your #header in the wrong place, website content goes inside the body tags (see my example below)

    I always use a CSS reset to zero defaults out. Try this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    #HEADER {
    	width:100%;
    	height:40px;
    	background:#330022;
    	color:#EEFF00;
    } 
    </style>
    </head>
    <body>
    	<div id="HEADER">HELLO</div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    amc (01-05-2010)

  • #3
    amc
    amc is offline
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    it works. thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •