SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Extra margin?

  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Lithuania, Europe
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Extra margin?

    For some reason I get extra margin between #main-image and #form-container. There should only be 1 pixel high margin there. Anyone could help?
    Code:
    html, body
    {
    	padding: 0;
    	margin: 0;
    	width: 100%;
    	height: 100%;
    }
    
    body
    {
    	font: 12px Arial, Verdana;
    }
    
    img
    {
    	border: 0;
    }
    
    #top-logo
    {
    	float: left;
    	margin: 28px 20px;
    }
    
    #main-image
    {
    	margin: 1px 0;
    	padding: 0;
    	width: 800;
    	height: 222;
    }
    
    #main-container
    {
    	width: 800px;
    	margin: 0 auto;
    	background-color: #FFFFFF;
    	color: #000000;
    }
    
    #top
    {
    	height: 83px;
    }
    
    #top-strip
    {
    	height: 20px;
    	background-color: #02397C;
    	clear: left;
    }
    
    #form-container
    {
    	background-color: #C4D5E8;
    	margin-top: 0px;
    }
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>...</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="login-style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    	<div id="main-container">
    		<div id="top"><img id="top-logo" src="images/logo-top.jpg" /></div>
    		<div id="top-strip"></div>		
    		<img id="main-image" src="images/main.jpg" />
    		<div id="form-container">
    			<br />
    		</div>
    	</div>
    </body>
    </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    ohio
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are not specifying a unit of measure for your main-image rule

    #main-image
    {
    margin: 1px 0;
    padding: 0;
    width: 800;
    height: 222;
    }

    is what you are using. You need to specify px or etc. for the width and height.

    I don't know for sure if this will indeed fix your problem however since I didn't have time to throughly check things for you.

  3. #3
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do what ^^^^ he said ^^^^
    and this might be useful:

    * {margin:0;padding:0}

  4. #4
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Lithuania, Europe
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot to add the units, silly mistake, but of course it has no effect. I Use a div around #main-image and this makes the margin disappear. I wonder why...


Bookmarks

Posting Permissions

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