#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Posts
    19
    Rep Power
    0

    CSS background position Issue


    CSS :
    Code:
    body{
    	margin:0;
    	background-image:url(images/pattern1.gif);
    	padding-left:5%;
    	padding-right:5%;
    }
    h1{
    	background : url(images/logo.gif) no-repeat;
    	width:291px;
    	height: 127px;
    }
    #main{
    	background : #FFFFFF url(images/back.gif) repeat-x;
    	border-left: 8px solid #5D5F60;
    	border-right: 8px solid #5D5F60;
    }
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<link rel="stylesheet" title="standard" href="blueDream.css"/>
    		<title></title>
    	</head>
    	<body>
    		<div id='main'>
    			<h1></h1>
    		</div>
    	</body>
    </html>
    There appears to be a very strange gap on the left side
    of the heading background which I cannot seem to get rid of.
    Any ideas?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Posts
    19
    Rep Power
    0
    *FIXED*

    I changed the body 'padding' to 'margins' instead.
    I have no idea why that fixed it, but apparently the 'main'
    container was giving off some false internal padding due to
    the body padding. This false padding was not fixable by
    adjusting any of the other container settings. Make much
    sense? Not in the slightest. Go IE6.

IMN logo majestic logo threadwatch logo seochat tools logo