I'm having a difficult time resolving this issue I have. Basically, I can't figure out why my logo image shows left and bottom 1px white.
As a test, I've placed that logo image on a blank page with black background to see if it doesn't have those white margins and it doesn't. It looks okay.
So, I believe that the problem is somewhere in div tags.
Here's how my code looks like:
HTML Code:
<div id="wrapper">
<div id="top_header">
<div id="logo"><img src="img/logo.jpg" align="left" alt="Logo"></div>
<div id="title">BlaBla <br>Blah</div>
<div id="contact"> E-mail: blabla@mydomain.tld<br> Phone: 0980980984324 </div>
</div>
<!-- ... rest of the code -->
CSS Code:
#wrapper {
margin: 0 auto;
width: 978px;
_height: 100%;
min-height: 100%;
}
#top_header {
padding-top: 12px;
/*padding-bottom: 5px; */
margin: 0;
overflow: hidden;
width: 978px;
background-color:#C50918;
display: block;
}
div#logo img {
float: left;
margin: 0;
padding: 0;
/*padding-bottom: 6px; */
overflow: hidden;
display: block;
}
#title {
font: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
vertical-align: middle;
color: #FFF;
text-decoration: none;
margin: 0;
padding-left: 20px;
display: block;
}
#contact {
background: url(../img/phone.jpg) no-repeat scroll left transparent;
float: right;
font: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: right;
color: #FFF;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
try #logo { border: none; }
also and use border: none in the "div#logo img" , id.
check your image, this could have a white line at the edge.
Which browsers does this happen in?