missing <HR> in firefox using css

[stevet26]

Hi

I have been advised by a number of CSS site to set my padding, margins and borders to 0 at the top of the page. This is to aid cross browser conformity for the look of web pages.

However I find that by doing this the <hr> tag disappears in forefox and just appears as a tiny blob in IE. Even though I change the width, height, background and border I still cannot see the <hr>.

Can anyone help with this?

Thanking you in advance.

 

[BillyRayPreachersSon]

Can you post the CSS code you're using? It sounds like you are setting it for more than just the body element.

Dan

 

[Vragabond]

I personally never do this but still maintain the same look in all the current browsers. But if you'd like, you can always override these settings by setting the explicitly to that element. Something like:

* {
  padding: 0;
  margin: 0;
  border: none;
}

hr {
  padding: 1em;
  margin: 0.5em;
  border: 1px solid blue;
}

As an example. Horizontal rule uses those settings to display itself, thus you cannot bring them to 0.

 

[stevet26]

I am setting my P,M,B just like vragabond has displayed them. Is this not the right thing to do?

Why does vragabond use em as opposed to px? Could this be the reason the hr is not showing in firefox?

#oDivMainBody hr {
	width:520px;
	padding:5px 10px;
	float:left;
	backgorund:#17467e;
        border: 1px solid #17467e;
}

 

[stevet26]

I for got to mention that this code displays the HR as an empty box with a 1px border.

 

[Vragabond]

[tt]em[/tt]s are relative size units that will change when user changes the size of their font in the browser. They are somewhat like percentage values. There should be no difference whether you specify it in pixels or ems. I just prefer ems. This is how hr looks like by default in Mozilla. Try this code:

display: block;
height: 2px;
border: 1px inset;
margin: 0.5em auto;

Looks like you needed to specify margins rather than padding to make it work. Also, you misspelled background in your example.

 

[BillyRayPreachersSon]

I am setting my P,M,B just like vragabond has displayed them. Is this not the right thing to do?

Not if you don't want all elements on the page to have 0 P,M,B, no.

Using the "*" appleis it to all elements. Change the "*" for "body" and you will only get the P,M,B set on the body itself - which is what I believe you are after.

Hope this helps,
Dan