2

Well, the title explains all in combination with the screenshot I guess.

The CSS for the header would be as follows:

#mainHeader {
    background: url(../img/header.png) repeat-x;
    width: 100%;
    height: 60px;
    margin: 0 auto;
}

The image is exactly 60px high and of course I've already checked if the line is not accidentically part of the background image. It is not, but the funny thing is that the line will disappear if I set the height of the #mainHeader to 59px.

Anyone knows what this could be about? Is it a bug? Or something that is easily fixed with some CSS property that I don't know about?

Thanks in advance!

Weird line

  • I can't see which line you're referring to. – otinanai Mar 06 '13 at 16:11
  • @otinanai 1st line from bottom ///or//2nd line after the green color. – Rahul Shah Mar 06 '13 at 16:17
  • how big is your pattern in pixels? There's a possibility that the pattern has a semi-transparent pixel at the very bottom or at the top. Check your image in photoshop – otinanai Mar 06 '13 at 16:36
  • I say this because I zoomed at 3200x in photoshop and found out that the line is greenish and it's possible the background from the top green block. – otinanai Mar 06 '13 at 16:38
  • In a few words, edit the image and remove the semi-transparent pixel line – otinanai Mar 06 '13 at 16:39
  • Hi all, thanks for the responses. First of all, it's the superthin green line just under the dropshadow. Like I already stated in my post, I have checked the original image in photoshop and there is no line there, not even a semi-transparent one. Also the line doesn't show in an iPhone browser, chrome, firefox etc. etc. So it's definitely an Android issue. –  Mar 06 '13 at 17:44

2 Answers2

0

Try adding overflow:hidden to the #mainHeader CSS. This tells the browser not to render any child content outside of the div, and may fix the problem.

Albert Xing
  • 5,620
  • 3
  • 21
  • 40
  • I'll try that out later. For now I fixed the problem by adding 1 row of the green pixels to the top of the header img and substracting 1px from the height of the
    element.
     –  Mar 07 '13 at 15:10
0

I was having the same issue when using semi transparent *.pngs. It seems like it's due to the way Android scales images. It seems there're two to deal with this:

  • background-position, background-size - just fiddling with these two options (eg. moving by just 1px) seems to help. However this issue might be resolution specific so this might not work for all devices.
  • Replacing all semi transparent layers with CSS3 linear-gradient worked perfectly. linear-gradient is very well supported among all mobile browsers so this is I think the best way to go.
martin
  • 93,354
  • 25
  • 191
  • 226