Horizontal line using HTML/CSS

Question

I am trying to get a horizontal line to work in my blog site, but I am having trouble in displaying the line in google chrome (IE and Firefox display it perfectly).

Basically, in my CSS, I have the following:

div.hr {
background: #fff  no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}

div.hr hr {
display: none;
}

In my HTML, I have something like:

<div class="hr"><hr /></div>

For some reason, in google chrome, the line is just not there. The problem now is, I have lots of these (around 25):

and therefore, I am looking to modify only my CSS, so that I can make minimal changes to my HTML.

Upon googling, I see that many have had this problem, but there does not seem to be a proper solution (not considering "drawing" a line and inserting the line as a pic!).

I would appreciate if someone could point me in the right direction to solve the above problem.

Many thanks.

What's the purpose of this markup: <div class="hr"><hr /></div> when you have the <hr> set to display: none;? If you're looking for semantic structure, for screenreader users at least, you've just removed it. You might as well just put the div in there. — steveax
– steveax, Commented Sep 5, 2011 at 0:53

Blender · Accepted Answer · 2011-09-05 00:43:54Z

17

This might be your problem:

height: .05em;

Chrome is a bit funky with decimals, so try a fixed-pixel height:

height: 2px;

answered Sep 5, 2011 at 0:43

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2155518 · Accepted Answer · 2013-04-15 11:54:43Z

11

I have try this my new code and it might be helpful to you, it works perfectly in google chromr

hr {
     color: #f00;
     background: #f00; 
     width: 75%; 
     height: 5px;
}

answered Apr 15, 2013 at 11:54

user2155518

Comments

Ben · Accepted Answer · 2011-09-05 01:09:01Z

4

Or change it to height: 0.1em; orso, minimal size of anything displayable is 1px.

The 0.05 em you are using means, get the current font size in pixels of this elements and give me 5% of it. Which for 12 pixels returns 0.6 pixels which is too little to display. if you would turn up the font size of the div to atleast 20pixels it would display fine. I suppose Chrome doesnt round up sizes to be atleast 1pixel where other browsers do.

answered Sep 5, 2011 at 1:09

Ben

13.7k4 gold badges51 silver badges70 bronze badges

Comments

William Roy · Accepted Answer · 2017-01-10 03:56:49Z

1

you could also do it this way, in my case i use it before and after an h1 (brute force it ehehehe)

.titleImage::before {
content: "--------";
letter-spacing: -3px;
}

.titreImage::after {
content: "--------";
letter-spacing: -3px;
}

If the letter spacing makes it so the line get in the text just use a margin to push it away!

answered Jan 10, 2017 at 3:56

William Roy

516 bronze badges

Collectives™ on Stack Overflow

Horizontal line using HTML/CSS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related