adding gridlines to background in HTML and Javascript similar to VisualStudios grid

Question

I have a grid snap implemented, but I want to make light grey lines show up both horizontally and vertically. My reasoning for this is that I am making a Designing application which has a similar look and feel to Visual Studios' form designing aspect.

I have some globals so that way i know the pixel spacing. I just want to get it working with Javascript. The page can go infinitely in the X and Y directions, so i cannot have a static length. It needs to be dynamic.

It is coming along so far, but was unsure if there is a current way to implement this.

    <hr style ="position:absolute;" width = "1" size = "500" />  
    <hr style ="position:absolute;" width = "500" size = "1" />

Answer 1

If you have modern browser, I like this way :

body{
  background-size:15px 15px;
  background-position: 0 -5px;
}
body:hover{
  background-image: -webkit-linear-gradient(top, #ffffff, #ffffff 98%, #000000 100%); 
}

hover, could be nice, I think you can add easily a second background and add more css prefix.

edit : better

html{
  background-size:200px 200px,200px 200px;
  background-position: 0 0,0 0;
  color:#7a7a7a;
}
html:hover{
  background-image: -webkit-linear-gradient(top, transparent, transparent 199px, #000000 200px),-webkit-linear-gradient(left, transparent, transparent 199px, #000000 200px); 
}

Answer 2

Can you implement a for() loop which would create a finite number (determined by window width, or whatever you want) of rules, that creates a new horizontal-rule element every so many pixels. You can use DHTML to specify the style characteristics of each horizontal-rule.

By the way, if your grids don't need to move try position:fixed.

Hope this helps!