Member Avatar for solomon_13000

The line appears as a red line in google chrome for the below tag:

<hr width="1052" style="border: 1px solid #990000" color="#990000" size="1">

However when I view in IE it appears as a box with white filling but red border line.

Did I miss something? Your help is kindly appreciated.

Thank You.

  • 3 Contributors
  • 2 Replies
  • 268 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Violet_82

Dani AI

Generated

Browsers apply different default styles to hr, so a line that looks fine in Chrome can render as a filled bar in IE. The markup used by relies on presentational attributes and an inline border, which leaves the final look up to each browser’s user-agent stylesheet. As hinted, explicitly controlling the element’s fill helps; and as pointed out, using a styled container is a pragmatic alternative when semantics are not required.

A robust, cross-browser pattern is to keep the semantic hr but remove UA borders and draw the bar yourself (this avoids UA "inset"/3D treatments). The example below uses a pseudo-element and currentColor so the color is easy to control from one place:

hr.divider {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  height: 0;
  margin: 1rem 0;
  position: relative;
  color: rgb(153,0,0); /* set the visible color here */
}

hr.divider::before {
  content: "";
  display: block;
  height: 2px;           /* thickness */
  width: 100%;
  background: currentColor;
  position: absolute;
  left: 0;
  top: 0;
}

Troubleshooting tips: remove deprecated attributes (width, size, color) from the HTML and rely on CSS; ensure the page uses a standards DOCTYPE (for IE quirks can change HR rendering); use the browser devtools to inspect computed border, height, and background rules if the bar still looks wrong. If you only need a visual divider (no semantic break), ’s border-bottom approach is simpler and widely compatible.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

What version of browser is giving you an issue. different browsers/versions use different properties to style the hr element.

Try adding the background-color property as well.

background-color: #990000;

Member Avatar for Violet_82

If it helps, I try not to use hr anymore, anytime I need to achieve the same effect I will just use the css border property, it is much more reliable and works pretty much all the time in every browser.
So say you have a <div class="myDiv">...</div> then just add this rule to the css .myDiv{border-bottom:1px solid black} (obviously tweak it as needed) and here's your pseudo-hr

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.