...

View Full Version : Extra pixel above img?



BillyBoB6969
03-07-2009, 03:51 AM
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/development/Blog/index.xhtml

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

PitbullMean
03-07-2009, 04:09 AM
try adding this to your css file above everything
*margin: 0; padding:0;

BillyBoB6969
03-07-2009, 04:17 AM
Above everything? I tried that and it just deletes the background image.

PitbullMean
03-07-2009, 04:19 AM
Like this



@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*/

BillyBoB6969
03-07-2009, 04:21 AM
Still doesn't work.

Excavator
03-07-2009, 04:23 AM
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


.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 -
</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>

PitbullMean
03-07-2009, 04:34 AM
Yup that fix works nice one Excavator

BillyBoB6969
03-07-2009, 06:39 AM
Thanks so much man. You saved me countless hours of work. I just wish I would have thought of that in the first place.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum