Dotted border with two space between dots?

HTML & CSS
1

Is this possible and if so how does one do it with CSS that works in all browsers? If not does someone know the code to use an 3px X 1px image to create the dots I want just on the bottom border?

I want to create a seperation between two rows with a dotted line, and thought it would be easier to do in CSS then have a blank row in between with a 1-x background image in the back of the row.

2

I hope I am understanding your question correctly. You want to make a border with 2 spaces to seperate two different sections?

What you want to do is make an image with the dot and the spaces, then you want to repeat it vertically. It would look like this:

section
{
background: url(“dots2Spaces.gif”) repeat-y;
}

As I said, I dont know if this is what you are looking for. If not, give me more detail.

3

That I can do.

I was looking for a way to use CSS to make a dotted border along the bottom of a cell but with two pixels in between each dot instead of just one space. I guess the only way to do this is by defining an image as the bottom border.

What would be the easiest way to do this?

4

I was hoping this would work but it doesn’t. Anyone know what will make this work correctly?

.sidenav {
border-bottom-image: url(/_images/bg-dots-artist.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 10px;
color: #666666;
padding: 8px 0px 4px 0px
}

5

nope.

background: url(/_images/bg-dots-artist.gif) bottom;

6

Didn’t work … just repeated the image in the background causing a bunch of vertical lines. I think I’m just going to stick with the “dotted” border and leave it at that.

Thanks anyway.

7

background: transparent url(/_images/bg-dots-artist.gif) repeat-x scroll bottom left;

8

Works like a charm in all browsers. Gave you mad rep. :slight_smile:

9