4

I'm trying to create some kind of grid which I generate in Angular 2 app automatically and it looks like this:

https://jsfiddle.net/Arcanst/ayv31363/3/

.vertical-line {
  position: absolute;
  width: 1px;
  background-color: #3c8dbc;
}

.horizontal-line {
  position: absolute;
  height: 1px;
  background-color: #3c8dbc;
}

I'm using 1px wide divs as vertical lines and 1px high divs as horizontal lines. Unfortunately they seem to have different thickness (if jsfiddle doesn't reveal the problem, maybe it's just happening in firefox). Here is a screenshot of how I see it:

As you can see, the vertical line between Tuesday and Wednesday is thicker than the one between Wednesday and Thursday although they have the same css class and firefox tools show they are actually the same width. The same problem can be seen in horizontal lines.

How can I prevent this from happening? Should I use different approach for vertical/horizontal lines?

Best regards, Daniel

Aranha
  • 2,903
  • 3
  • 14
  • 29
  • 1
    the lines seem to be overlapping on the screenshot. Although when I open the jsFiddle, everything looks perfect and there are no overlapping lines. I am using Chrome atm – N. Ivanov Sep 20 '17 at 10:45
  • The fiddle looks ok in firefox. – Fuross Sep 20 '17 at 10:45
  • 2
    also I would recommend you to use a ``. hope this helps!
     – N. Ivanov Sep 20 '17 at 10:46
  • The fiddle looks fine here - all lines are equally thick. I suppose what you describe can have to do with rounding (if the distance between the lines isn't measured in px, but for example in em, which have to be rounded to px on the screen), and also with the anti-aliasing of the OS in the browser. – Johannes Sep 20 '17 at 10:48
  • 1
    Indeed...this is the **exact** purpose of a ``
     – Paulie_D Sep 20 '17 at 10:49
  • @N.Ivanov so in Chrome there is no such thing as you can see in the picture I included in my question? Btw. using is a very good idea but when it comes to angular 2, it's much more to implement so I'd rather have this absolute layout and have less work in angular :) I've tried
    approach already.
     – Aranha Sep 20 '17 at 10:50
  • Looks fine to me in FF + Chrome. If I zoom (Ctrl +) one line looks thicker like your pic. Could you go old school & use a table with border-bottom? – Kerry7777 Sep 20 '17 at 10:50

1 Answers1

1

This problem can happen if you have increased the zoom of your browser. If you press ctrl + 0 on Windows or cmd + 0 on Mac you will see that the lines are displayed correctly.

Instead of using:

height: 1px;
background-color: #3c8dbc;

You could use:

border-bottom:1px solid #3c8dbc;

https://jsfiddle.net/ayv31363/4/

PoseLab
  • 1,841
  • 1
  • 16
  • 22