CSS issue once again

[Kezzer]

I'm trying to use the same method as CNET download have done for making dotted borders on their links. Yes I know it can be done by doing border:1px dotted #00000; etc. But i'm trying to get custom borders to work so the dots are much nicer.

Here's what they look like

http://www.download.com/

And here's the CSS file

http://www.download.com/css/dl/dl_global.css

Still can't figure out how to do it even with the CSS file. It's quite messy that's for sure!

[blueball]

This seems to be the line:

div.hr-dots {height: 1px; background: url(/i/dl/global/hr-dots.gif) repeat-x bottom left; clear: both; padding: 0 0 0 0; margin: 0 0 0 0;}

[beca5olo]

As blueball accurately pointed out, their dot graphic is at http://www.download.com/i/dl/global/hr-dots.gif

[Kezzer]

If that's the case then you'd have to create a div for every single one. It should be done automatically when you create a list element which is what i looked at but it still doesn't make sense.

[Norky]

Not necessarily, just use something like:

li {
display: block;
height: 15px;
background: url(dots.gif) repeat-x;
}

...and so forth

[Kezzer]

ah yes! That can work but i'd have to have an extra list element on one of them. I'll try that though, cheers Norky

[bobbyzero]

you can fix the height of the li like Norky said, but if you want the text to resize then it would be neater to use padding to get some space, then lock the background to an edge:

li {
display: block;
padding: 3px
background: url(dots.gif) repeat-x bottom;
}