CSS - Random Line on Page

Question

I am using a library for a progress bar, this is a simple jQuery plugin that allows me to show steps in a workflow and if they are complete or not.

I am also using Bootstrap.

Essentially, using this plugin is causing a grey line across the page, however, I can't find what is causing the grey line when using Chromes inspector at all.

What's more the line is #cfcfcf on the HEX palette, I have searched my whole solution for this hex code and cannot find anything with that colour.

Here is a screenshot of the line: http://prntscr.com/iflvsh (Sorry it's so zoomed, I wanted to make it clear where the line was).

My HTML:

<div class="progress-bar-wrapper"></div>

My CSS:

ul.progress-bar {
width: 100%;
margin: 0;
padding: 0;
font-size: 0;
list-style: none;
}

li.section {
display: inline-block;
padding-top: 45px;
font-size: 13px;
font-weight: bold;
line-height: 16px;
color: gray;
vertical-align: top;
position: relative;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}

li.section:before {
content: 'X';
position: absolute;
top: 2px;
left: calc(50% - 15px);
z-index: 1;
width: 30px;
height: 30px;
color: white;
/*border: 2px solid white;*/
border-radius: 17px;
line-height: 30px;
background: gray;
}
.status-bar {
height: 6px;
background: gray;
position: relative;
top: 20px;
margin: 0 auto;
}
.current-status {
height: 6px;
width: 0;
border-radius: 1px;
background: mediumseagreen;
}

@keyframes changeBackground {
from {background: gray}
to {background: mediumseagreen}
}

li.section.visited:before {
content: '\2714';
animation: changeBackground .5s linear;
animation-fill-mode: forwards;
}

li.section.visited.current:before {
box-shadow: 0 0 0 2px mediumseagreen;
}

The JS:

//A wrapper to encapsulate all the code
(function (window) {
  function initProgressBar() {
var ProgressBar = {};
ProgressBar.singleStepAnimation = 1000; //default value
// this delay is required as browser will need some time in rendering and then processing css animations.
var renderingWaitDelay = 200;

// A utility function to create an element
var createElement = function (type, className, style, text) {
  var elem = document.createElement(type);
  elem.className = className;
  for (var prop in style) {
    elem.style[prop] = style[prop];
  }
  elem.innerHTML = text;
  return elem;
};

var createStatusBar = function(stages, stageWidth, currentStageIndex) {
  var statusBar = createElement('div', 'status-bar', {width: 100 - stageWidth + '%'}, '');
  var currentStatus = createElement('div', 'current-status', {}, '');

  setTimeout(function() {
    currentStatus.style.width = (100 * currentStageIndex)/(stages.length - 1)+'%';
    currentStatus.style.transition = 'width '+(currentStageIndex * ProgressBar.singleStepAnimation)+'ms linear';
  }, renderingWaitDelay);

  statusBar.appendChild(currentStatus);
  return statusBar;
};

var createCheckPoints = function(stages, stageWidth, currentStageIndex) {
  var ul = createElement('ul', 'progress-bar', { }, '');
  var animationDelay = renderingWaitDelay;
  for (var index = 0; index < stages.length; index++) {
    var li = createElement('li', 'section', {width: stageWidth + '%'}, stages[index]);
    if(currentStageIndex >= index) {
      setTimeout(function(li, currentStageIndex, index) {
        li.className+= (currentStageIndex > index)?' visited': ' visited current';
      }, animationDelay, li, currentStageIndex, index);
      animationDelay+= ProgressBar.singleStepAnimation;
    }
    ul.appendChild(li);
  }
  return ul;
};

var createHTML = function (wrapper, stages, currentStage) {
  var stageWidth = 100 / stages.length;
  var currentStageIndex = stages.indexOf(currentStage);

  //create status bar
  var statusBar = createStatusBar(stages, stageWidth, currentStageIndex);
  wrapper.appendChild(statusBar);

  //create checkpoints
  var checkpoints = createCheckPoints(stages, stageWidth, currentStageIndex);
  wrapper.appendChild(checkpoints);

  return wrapper;
};

var validateParameters = function(stages, currentStage, container) {
  if(!(typeof stages === 'object' && stages.length && typeof stages[0] === 'string')) {
    console.error('Expecting Array of strings for "stages" parameter.');
    return false;
  }
  if(typeof currentStage !== 'string') {
    console.error('Expecting string for "current stage" parameter.');
    return false;
  }
  if(typeof container !== 'string' && typeof container !== 'undefined') {
    console.error('Expecting string for "container" parameter.');
    return false;
  }
  return true;
};

//exposing this function to user;
ProgressBar.init = function (stages, currentStage, container) {
  if(validateParameters(stages, currentStage, container)) {
    var wrapper = document.getElementsByClassName(container);
    if(wrapper.length > 0) {
      wrapper = wrapper[0];
    } else {
      wrapper = createElement('div', 'progressbar-wrapper', { }, '');
      document.body.appendChild(wrapper);
    }
    createHTML(wrapper, stages, currentStage);
  }
};
return ProgressBar;
  }

  if (typeof ProgressBar === 'undefined') {
window.ProgressBar = initProgressBar();
  } else {
console.log('Progress bar loaded');
  }

})(window);

My INIT

ProgressBar.singleStepAnimation = 600;
ProgressBar.init(
  ['Step 1',
    'Step 2',
    'Step 3',
    'Step 4',
    'Step 5'
  ],
  '@progressBar',
  'progress-bar-wrapper'
);

Just to add to this - I have a demo, where I am not using Bootstrap, and I have no underline / border etc?

I just have no idea where to turn to find where this pesky line is coming from.

Fairly certain it's against the UL though: http://prntscr.com/ifm5d3 — Harambe, Feb 16 '18 at 14:27

score 0 · Answer 1 · answered Feb 16 '18 at 14:48

When I was stuck in similar problem it was some :after or :before style with border from diffetent div block.

Try to change background of various elements. It can help.

And ultimate method: delete sub-elements in Chromes inspector one by one until line is dissapeared.

CSS - Random Line on Page

1 Answers1