Creating a vertical dotted line?

[meinsla]

I can make a horizontal dotted line by:

<hr size="1" style="border-style:dotted;">

But I want to create a vertical dotted line as well. Is this possible? I can create dividers using tables but I want them to be dotted as well.

[ray326]

border-left and border-right can be styled.

[meinsla]

Does that work for DIV tags or maybe something else? Because I already tried it on tables and it didn't work for me. I tried something like:

<table border="1" height ="500" style="border-left-style:dotted;">
    <tr>
        <td>bla bla bla
        </td>
    </tr>
</table>

But there is no change in the style in my browser.

[WebJoel]

Does that work for DIV tags or maybe something else? Because I already tried it on tables and it didn't work for me. I tried something like:

<table border="1" height ="500" style="border-left-style:dotted;">
    <tr>
        <td>bla bla bla
        </td>
    </tr>
</table>

But there is no change in the style in my browser.

Well, your CSS syntax is incorrect to begin with. I do not think that "border-left-style:dotted;" does anything. I'd not waste my time giving a TABLE a special border if all I wanted was a vertical dotted line

But what the heck, -go it the easy way and use a <DIV> and style it's left or it's right border. Here, a very narrow DIV with a heavy (4-px wide dotted) black border, positioned 50-px from the left of screen, and 10-px from the top.

<div style="position:relative; left:50px; top:10px; width:4px; height:500px; border-right:4px dotted black;"></div>

[meinsla]

I know that YOU don't care about using a table but I DO care and would appreciate some help. The syntax in not incorrect, though it just doesn't do exactly what I want it to (see attached file) it dots some of the border not all of it. Either way, the div does seem the better way to go so thanks.

[mueller]

This might be a browser issue - your code works in IE but not Firefox. I could get it working in Firefox by explicitly stating width and color.

Try something like this:

border-left:2px dotted black;

[Rossario123]

.a1{height:200px;width:1px;display:inline;border-left:1px dotted red;}

<div class="a1">&nbsp;</div>

try that?

[ray326]

It's because your border isn't fully defined. Also, different browsers have different dot pitches and Fx uses a very fine one. Anyway, this works for both but using "dashed" instead of "dotted" produces a more similar look between IE and Fx:

style="border-left:1px dotted red;"