3

I've designed this page on Google Chrome, and it displays nicely. However if you check it on Safari Mac (Safari Windows displays it well) and it has a strange vertical line :

enter image description here

The line seems to be transparency of the white area (if I change the background color, it changes the line color). Another funny thing : there's an horizontal offset where the title is (the line is cut and moved to the left of the page)... a hint ?

I've inspected the elements, but there's no reason I can find.

Any help ?

Julien
  • 9,312
  • 10
  • 63
  • 86
  • 1
    On my safari it displays fine.. http://i.imgur.com/Xzk0hhe.png – Prisoner Jan 24 '13 at 11:15
  • Thanks, are you on Mac OS ? I've seen it displays fine on Windows. If yes, which version are you using ? – Julien Jan 24 '13 at 11:39
  • 1
    Yes, I'm on `OSX 10.8.2` with `Safari 6.0.2 (8536.26.17)`. I know it's a basic question, but have you tried clearing your cache? – Prisoner Jan 24 '13 at 11:44
  • Thanks for the input. I'll check with other people. I tried to clear my cache, but it didn't fix anything, thanks for the suggestion though. It's a (not so) funny issue ! – Julien Jan 24 '13 at 11:55
  • 1
    have you checked this: http://stackoverflow.com/questions/12062582/stray-vertical-line-above-965-pixels-with-border-radius-in-safari – Prisoner Jan 24 '13 at 12:00
  • The answer provided in this question fixed it ! Thanks for the resource :-) If you answer the question, I'll mark it as accepted. – Julien Jan 24 '13 at 12:10

1 Answers1

2

As per this reply: Stray vertical line above 965 pixels with border radius in Safari

You should add -webkit-background-clip: padding-box; to your containing class.

Community
  • 1
  • 1
Prisoner
  • 27,391
  • 11
  • 73
  • 102