3

I designed a simple corporate site, and have spent more time trying to debug this rendering issue than I have getting stuff to work correctly in PHP!

I have an iframe. On all other browsers (even Safari on the desktop) it renders correctly, but on Safari mobile there is a thin grey line on the border of the iFrame - but only at certain zoom levels. I read other similar posts that had to do with 2 divs coming in contact with each other, but there iFrame is not encased in a div.

Relevant CSS:

iframe.noBorder {
  border: none;
  border:0;
}

Actual iFrame embed code:

<iframe class="noBorder1" src="header.html" width=980 height="160" frameborder="0" border="0" scrolling="no" ></iframe>

Like I said, it's not in a div or anything.

You can see the problem here or check out the image here.

Kurtis Nusbaum
  • 30,445
  • 13
  • 78
  • 102
Vinod Tonangi
  • 43
  • 1
  • 5

2 Answers2

1

overflow: hidden; solves the problem!

iblue
  • 29,609
  • 19
  • 89
  • 128
JPguitar
  • 11
  • 1
1

I tried this on a few PC browsers with no problem - so I guess you have found a mobile glitch.

Could you set the border-color attribute of the iframe to the same greeny-grey color as the containing element - or to transparent and see if that fixes it?

amelvin
  • 8,919
  • 4
  • 38
  • 59
  • Thanks for your quick response. Yes, it only affects mobile safari on the iPhone and iPad. It works properly on all desktop browsers (including Safari, IE, Chrome, and Firefox) properly. If I set the border color to the bg then I would have a light green line on the right, because that's a different color then the bg. – Vinod Tonangi Aug 24 '11 at 01:35
  • @Vinod could you try setting background and border-color to 'transparent'? – amelvin Aug 24 '11 at 12:18
  • I found a hack for this - not really proud of it. I simply just took a div and made that div the bg color. I had to make it about 5 pixels or so - for some reason with a 1 px div it still showed up. It's solved - but it's a really, really dumb way of fixing it - I just can't think of anything else. I did try changing the border to "transparent" but that didn't help either. – Vinod Tonangi Aug 25 '11 at 04:22
  • 1
    @Vinod Glad you've found an answer - I was going to suggest that you overlaid a div with a higher z-index value that matched the colour, but I'm really surprised that transparent didn't work. But as a bonus now you've done a hack you're not proud of you are truly ready to start styling email campaigns! Now that involves truly hacky CSS. – amelvin Aug 25 '11 at 09:08
  • @VinodTonangi Can you explain what you did to fix this? – Matt Hudson Jan 13 '12 at 16:40
  • @VinodTonangi - "I simply just took a div and made that div the bg color" - What does that mean? You took a div? Where did you take it? From where? To where? How can an element be "made" a background colour? And of what? – Daniel Earwicker Feb 16 '15 at 09:06