CODEWITHSUNDEEP
htmlcssfirefox
Alex Banman
Alex Banman

Reputation: 546

One <hr> tag is working but not the other in Firefox. Why is that?

So I'm using two HR tags on my pages to block out a chunk of fine print just under the navigation. They're styled using an external CSS document and the "class" specification.

So far it works in Chrome and Safari, but when I test it in Firefox one of the HR tags is showing up (the one on the bottom), but the other isn't??? How does one show up and the other doesn't? Doesn't make any sense to me.

I'm including the full html for the header in case that's interfering, you can find the hr tags near the bottom of the HTML, under the FINE PRINT.

Thank you for your help.

HTML

/* BLACK LINE */

hr.plain {
  border-style: inset;
  border-top: 1px solid;
  border-bottom: 0px;
  border-bottom: none;
  border-left: none;
  margin: 4px;
  display: block;
  height: 1px;
}
/* BLACK LINE END */
<!-- NAVIGATION -->
<div id="nav-wrap" class="bgcolor" style="width: 1000px;
    	height: 139px;
        text-align:center;
        z-index: 50;
        ">

  <div class="bgcolor" style="width: 200px;
        height: 62px;
        padding-top: 32px;
        float: left;
        text-align: left;">

    <a href="index.html">
      <img src="bk-logo.png" alt="BK Logo" height="36px" width="54px" />
    </a>
  </div>


  <!-- LINKS -->
  <div class="bgcolor" style="width:800px; 
            height: 45px; 
            text-align: right;
            padding-top: 50px;
            float: left;">
    <a href="listings.html" class="hover" style=" text-decoration:none;" title="Refresh Page">
      <span class="black mainlinks">Listings&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
    <a href="approach.html" class="hover" style=" text-decoration:none;">
      <span class="black mainlinks">&nbsp;&nbsp;&nbsp;&nbsp;Approach&nbsp;&nbsp;&nbsp;&nbsp;</span>

    </a>
    <a href="press.html" class="hover" style=" text-decoration:none;">
      <span class="black mainlinks">&nbsp;&nbsp;&nbsp;&nbsp;Press&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>
    <a href="contact.html" class="hover" style=" text-decoration:none;">
      <span class="black mainlinks">&nbsp;&nbsp;&nbsp;&nbsp;Contact</span>
    </a>
  </div>
  <!-- LINKS END -->


  <!-- FINE PRINT -->
  <div>
    <br />
    <hr class="plain bgcolor black">
    <span style="font-size: 9px; 
    	font-family: DIN Next W01 Light, Helvetica, Arial, sans-serif;
        letter-spacing: 0.1em;
        color:#7A7A7A">
      	BORIS KHOLODOV &#183; REAL ESTATE BROKER &#183; #1 IN DOWNTOWN AND CENTRAL TORONTO BY NUMBER OF LISTINGS SOLD &#183; ROYAL LEPAGE REAL ESTATE SERVICES LTD &#183; JOHNSTON AND DANIEL DIVISION, BROKERAGE</span>
    <hr class="plain bgcolor black">
    <!-- FINE PRINT END -->
  </div>
</div>
<!-- NAVIGATION END -->

Upvotes: 2

Views: 1968

Answers (3)

j08691
j08691

Reputation: 207861

You need to clear your floated elements. Add clear:both to you hr rules:

hr.plain {
    border-style: inset;
    border-top: 1px solid;
    border-bottom: 0px;
    border-bottom: none;
    border-left: none;
    margin: 4px;
    display: block;
    height: 1px;
    clear:both;
}

jsFiddle example

Upvotes: 3

Joe W
Joe W

Reputation: 2891

The first answer to this question has a good description of why using hr is usually not a good idea: HR displayed different in Firefox

You'll be better off using divs with a bottom border. It will be much more reliable.

Upvotes: 1

Maxim
Maxim

Reputation: 83

try this code 

<!-- LINKS -->
<div class="bgcolor" style="width:800px;
  height: 45px;
  text-align: center;
  padding-top: 50px;
  margin:0 auto;">
  <a href="listings.html" class="hover" style=" text-decoration:none;" title="Refresh Page">
    <span class="black mainlinks" >Listings&nbsp;&nbsp;&nbsp;&nbsp;</span>
  </a>
  <a href="approach.html" class="hover" style=" text-decoration:none;">
    <span class="black mainlinks" >&nbsp;&nbsp;&nbsp;&nbsp;Approach&nbsp;&nbsp;&nbsp;&nbsp;</span>
  </a>
  <a href="press.html" class="hover" style=" text-decoration:none;">
    <span class="black mainlinks" >&nbsp;&nbsp;&nbsp;&nbsp;Press&nbsp;&nbsp;&nbsp;&nbsp;</span>
  </a>
  <a href="contact.html" class="hover" style=" text-decoration:none;">
    <span class="black mainlinks">&nbsp;&nbsp;&nbsp;&nbsp;Contact</span>
  </a>
</div>
<!-- LINKS END -->
<!-- FINE PRINT -->
<div style="text-align: center;"><br />
  <hr class="plain bgcolor black">
  <span style="font-size: 9px;
  font-family: DIN Next W01 Light, Helvetica, Arial, sans-serif;
  letter-spacing: 0.1em;
  color:#7A7A7A">
  BORIS KHOLODOV &#183; REAL ESTATE BROKER &#183; #1 IN DOWNTOWN AND CENTRAL TORONTO BY NUMBER OF LISTINGS SOLD &#183; ROYAL LEPAGE REAL ESTATE SERVICES LTD &#183; JOHNSTON AND DANIEL DIVISION, BROKERAGE</span>
  <hr class="plain bgcolor black">
  <!-- FINE PRINT END -->
</div>
</div>
<!-- NAVIGATION END -->

Upvotes: 0

Related Questions