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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Extra pixel above img?

    I am building a simple layout or at least I thought so... The corners inside each post have this small 12px by 12px image, when I test it inside firefox I get one pixel above the image at the top and the image at the bottom has been placed one pixel below the background...

    The link to this is:
    http://dreamshowstudios.net/developm...og/index.xhtml

    I have spent hours banging my head against a wall trying to get this fixed, your suggestions are greatly appreciated.

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    try adding this to your css file above everything
    *margin: 0; padding:0;
    Last edited by PitbullMean; 03-07-2009 at 04:26 AM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Above everything? I tried that and it just deletes the background image.

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Like this

    Code:
    @charset "utf-8";
    
    *{ margin:0; padding:0;}
    /*Misc.*/
    html {
    	height: 100%;
    	background: #ffffff url('../images/Background.jpg');
    }
    
    body {
    	text-align: center;
    	vertical-align: top;
    	margin: 0px;
    	font: normal 14px Arial, Helvetica, sans-serif;
    	color: #ffffff;
    }
    
    a:link img {
    	border: none;
    }
    
    a:visited img {
    	border: none;
    }
    
    a:hover img {
    	border: none;
    }
    
    a:link  {
    	text-decoration: none;
    	border: none;
    	color: #3887d3;
    }
    
    a:visited  {
    	text-decoration: none;
    	border: none;
    	color: #3887d3;
    }
    
    a:active  {
    	text-decoration: none;
    	border: none;
    }
    
    a:hover  {
    	border: none;
    	color: #609bd3;
    }
    
    .ender {
    	clear: both;
    	font: normal 0px Arial;
    }
    
    .preloader {
    	display: none;
    	visibility: hidden;
    }
    /*END Misc.*/
    /*Fonts*/
    /*.lightGray_Bold {
    	color: #c2c2c2;
    	font: bold 11px Arial, Helvetica, sans-serif;
    }*/
    
    /*END Fonts*/
    /*Header*/
    #Container {
    	width: 643px;
    	height: 100%;
    	margin: 16px auto 0px auto;
    }
    
    #Banner { 
    	width: 600px;
    	height: 38px;
    	margin: 0px auto 2px auto;
    	text-align: center;
    }
    
    #BannerL {
    	width: 300px;
    	height: 38px;
    	text-align: left;
    	float: left;
    }
    
    #BannerR {
    	width: 300px;
    	height: 38px;
    	text-align: right;
    	float: left;
    }
    
    #BannerR img {
    	padding-top: 13px;
    }
    /*END Header*/
    /*Main Content*/
    #Blog {
    	width: 643px;
    	background: #9cb8d3;
    	padding: 5px 0px;
    }
    
    .BlogEntry {
    	width: 633px;
    	background: #b5cade;
    	margin: 0px auto;
    }
    
    .TLCorner {
    	width: 633px;
    	height: 12px;
    	text-align: left;
    }
    
    .BlogEnMain {
    	padding: 0px 12px;
    	width: 609px;
    }
    
    .BlogTitle {
    	font-weight: bold;
    	font-size: 16px;
    }
    
    .BRCorner {
    	width: 633px;
    	height: 12px;
    	text-align: right;
    }
    /*END Main Content*/
    /*Footer*/
    
    /*END Footer*/
    Last edited by PitbullMean; 03-07-2009 at 04:27 AM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Still doesn't work.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello BillyBoB6969,
    Afraid *{margin:0;padding:0;} isn't going to do much for you here, though it's a good thing to have anyway.
    Try it like this -
    CSS
    Code:
    .BlogEntry {
    	width: 633px;
    	background: #b5cade;
    	margin: 0px auto;
    }
    
    .TLCorner {
    	width: 633px;
    	height: 12px;
    background: url(images/TL-Corner.jpg) no-repeat left;
    }
    
    .BlogEnMain {
    	padding: 0px 12px;
    	width: 609px;
    }
    
    .BlogTitle {
    	font-weight: bold;
    	font-size: 16px;
    }
    
    .BRCorner {
    	width: 633px;
    	height: 12px;
    background: url(images/BR-Corner.jpg) no-repeat right;
    }
    /*END Main Content*/
    and change your markup to look like this -
    Code:
    </div>
    			<div id="Blog">
    				<div id="BlogEntry1" class="BlogEntry">
    					<div class="TLCorner"></div>
    					<div class="BlogEnMain">
    						<div id="BlogTitle1" class="BlogTitle">- Title</div>
    					</div>
    					<div class="BRCorner"></div>
    				</div>
    			</div>
    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:

    BillyBoB6969 (03-07-2009)

  • #7
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Yup that fix works nice one Excavator
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #8
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks so much man. You saved me countless hours of work. I just wish I would have thought of that in the first place.


  •  

    Posting Permissions

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