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    lt div class  hr  gt  lt hr   gt  lt  div gt    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

User · Accepted Answer

This might be your problem   height   05em    Chrome is a bit funky with decimals  so try a fixed-pixel height   height  2px

User · Answer

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

User · Answer

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

User · Answer

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

[html] Horizontal line using HTML/CSS

Examples related to html

Examples related to google-chrome

Examples related to css