-1

I'm trying to copy this example for a bread crumb. I love this bread crumb, but can't understand why the author didn't fix the lines in it.

I'm using Bootstrap 3.0:

I don't see the issue in Chrome 32, but IE 11 and FF 25 you can see the lines.

The link below has the HTML, CSS, and a display of the breadcrumb.

http://codepen.io/eMaj/pen/qtico

I haven't been successful at removing them. Any help will be appreciated.

user3084526
  • 35
  • 5
  • 1
    I din't see what you mean in firefox. – Bhojendra Rauniyar Dec 11 '13 at 03:48
  • I'm not sure what is different in our environments. Are you using FF v. 26? One thing I messed up on is in my web page you see the white background, but in the example that I copied it from the background is black. – user3084526 Dec 11 '13 at 04:00
  • Are you zoomed in on those browsers it's not working on? Press 'Ctrl+0' and see if it makes a difference – davidpauljunior Dec 11 '13 at 04:01
  • In FF if I zoom in they disappear. I'm trying to find out if I'm at a 100%. If so I'm ok with that. Why does this happen? – user3084526 Dec 11 '13 at 04:07
  • Pressing 'Ctrl+0' will put you to 100%. I'm not sure why these display issues happen when zooming, but it could be to do with the way browsers deal with rounding numbers. Read the answer here: http://stackoverflow.com/questions/7835287/zoom-changes-the-design-layout – davidpauljunior Dec 11 '13 at 04:23
  • Thanks davidpauljunior, I appreciate your help. It was a rounding issue. – user3084526 Dec 14 '13 at 22:13

2 Answers2

0

I have checked it in FF and its looking okay to me, without any white border. Try to clear your cache

Anjum....
  • 3,545
  • 1
  • 30
  • 41
  • I cleared my cache, but no luck. I also updated FF to version 26 and still no luck. I'm using Windows 8. But I don't know how that would affect it. – user3084526 Dec 11 '13 at 03:59
0

In some zoom scales the design gets broken because of pixel roundings.

Give the pseudo elements 1px aditional solves the issue in my browser

a{   
  &:before,
  &:after{
    content: "";
    position:absolute;
    top: 0;
    border:0 solid $blue;
    border-width:20px 11px;   /* original value 20px 10px */
    width: 0;
    height: 0;
  }
}
vals
  • 54,758
  • 10
  • 75
  • 124