Consistent HR styling using CSS

[et_pb_section bb_built=”1″][et_pb_row][et_pb_column type=”4_4″][et_pb_text _builder_version=”3.0.106″ background_layout=”light”]

The HR tag is notoriously inconsistent between browsers. Here’s how we got IE8 and Firefox to display the same.

Problem

The only HR styles that are consistent across Web browsers are the width and height styles making it tricky to get a consistent look across browsers.

Solution

Working with IE8 and Firefox and aiming for neat 1 pixel line in a specific colour we ended up with the following: –

 

[/et_pb_text][et_pb_dmb_code_snippet _builder_version=”3.0.106″ style=”default” linenums=”off” usetabwidth=”off”]aHIgewoJZmxvYXQ6IGxlZnQ7Cgl3aWR0aDogMTAwJTsKCWhlaWdodDogMHB4OwoJY29sb3I6ICMzMTMwOUM7CgliYWNrZ3JvdW5kLWNvbG9yOiAjMzEzMDlDOwoJYm9yZGVyOiAxcHggc29saWQgIzMxMzA5QzsKCWJvcmRlci1ib3R0b206IDBweDsKCXBhZGRpbmc6MDsKfQ==[/et_pb_dmb_code_snippet][et_pb_text _builder_version=”3.0.106″ background_layout=”light”]

Notes

  • Width and height are the only styles that are consistent across Web browsers and define how big the line will be. The default width is 100% and the height 2px.
  • In IE you need to set the foreground colour, Firefox and Opera use the background colour of the line. Set both color and background-color.

NB: Not yet testing in other browsers/versions

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]