HR displayed different in Firefox

Question

As the title explains, I have a little problem displaying a

---

line.

In IE 7, 8, 9, Google Chrome, Opera Safari, all the same, no problem just one d

Answer 1

hr has very little support and is not treated well in browsers. It is not used a lot in my experience. The code below is common practice for what you want, customize it how you feel -

div.line {
border-bottom:thin solid #fff;
}

<div class="container">

        <div class="main-content-container">
        <div class="article-container">
<div class="article-header">
<p class="article-count">0</p><p class="article-categories">1,2, 3, 4, 5</p>
<h1 class="article-title"><a href='#'>Lorem Ipsum is simply dummy</a></h1>
<p class="article-auth-date">2013 Apr 06</p>
</div> <!-- end of article-header -->

<img alt="bla bla bla" src="http:/localhost/uploads/test.png" style="border: none;">

<div class="article-post">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div><!-- end of article-post-->
</div>

<!--<hr class="fancy-hr">--> do not use
<div class="line"></div>

</div><!-- end of article-container -->
</div><!-- end of main-content-container -->

Answer 2

This is related to the foreground color, Kevin Lynch's fix did not work for me on a page with a light grey (#d1d1d1) body background. Changing the HR colour to white does work and it now appears as etched.

hr {color: #ffffff;}

In practice the HR just needs to be any shade that is lighter than the background, so white will always work.

Answer 3

I'm sure this isn't ideal for you, but rather than having to worry about all that styling, why not just make it an IMAGE instead of HR? It would be much more easily maintained and could simply be included as a wide image and simplify all your CSS.

Otherwise, have you tried lowering the width of the HR? It sounds dumb, but I have encountered situations before where the width has made the HR element pop out of its div.