Tips & Gems

Spurious small horizontal lines.

Twice now I have encounterred small horizontal lines being rendered by the browser, with no immediately obvious reason whiy the line should be there.

What was really infuriating was that the lines were rendered by all the usual browsers. So whilst there was, to my untutored eye, no specific html code requesting the lines to be displayed, all the browsers thought there was. So it was demonstrably my problem.

Transpires there are (at least) two mechanisms for producing these ‘spurious’ lines. The first is to have an empty anchor element <a></a>. This is apparently rendered as a small horizontal line.

The second is have a ::before tag on the element. This can be configured to generate a line, inserted above (or along side) the element.

The two instances I have encounterred were examples of one of each of the above. The first was the Site Image in the Header frame. That image can have a link behind it to another page or even site. Problem was if the link was empty, then a horizontal line appeared not obviously associated with the image.

The second instance occurred with the H2 headers / Titles on the pages. This was related to the ::before tag and what I term CSS bleed.