Power By 专否社区

can't remove white margins for logo image

Go To StackoverFlow.com

0

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;
}
2012-04-04 01:33
by user10367
Do you get that behavior in more than one type of browser - Eric J. 2012-04-04 01:39
Hi Eric. Yes, I've tried IE, FF, Opera, Chrome (latest versions). This is pretty annoying. : - user10367 2012-04-04 01:48
It's basically a very thin white line on the left side and at the bottom of the logo image - user10367 2012-04-04 01:49
Oh Jeez ... sry. Seems that it's actually the image which is not that great. Case closed. Thanks Eri - user10367 2012-04-04 01:56

0

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?

2012-10-25 14:44
by A McGuinness
Ads