Welcome to the MacNN Forums.

headbirth · Jul 27, 2005, 11:44 AM

Hi, this seems to work well in Safari and Firefox. Can someone check it in Explorer on Windows or suggest an alternative method.

Code:
<p style="letter-spacing: 300px; border-top: dotted 1px #999999;">&nbsp;</p>

Is there any way to adjust the spacing of the dots in CSS?

Thanks!

skalie · Jul 27, 2005, 11:51 AM

Windows delivers a dotted line in Explorer (IE 6), although in Firefox for windows it renders as an unbroken line.

headbirth · Jul 27, 2005, 11:58 AM

Interesting why would there be a render difference between Firefox for Mac and Windows? They use the same render engine...

Are the line lengths different as well?

skalie · Jul 27, 2005, 12:03 PM

Originally Posted by headbirth

Are the line lengths different as well?

No, it stretched to fit the table cell I through it into on both browsers, altering the "letter-spacing" attribute has no effect.

madmacgames · Jul 27, 2005, 02:22 PM

Windows IE doesn't render dotted lines... instead they show up as dashed lines.

skalie · Jul 28, 2005, 03:38 AM

alternative method? this get dashs in win IE and and blocks in win firefox

Code:
<hr size=1 width=100% color=#882233 style='border: dotted;'>

Try throwing "<hr> dotted" into Google.

Millennium · Jul 28, 2005, 08:25 AM

Originally Posted by headbirth

Code:
<p style="letter-spacing: 300px; border-top: dotted 1px #999999;">&nbsp;</p>

Try flipping the 'dotted' and '1px' in your border-top delcaration, so you have "1px dotted #999999". That's how the standard says to write the shorthand. Putting them out of order may be causing trouble.

Is there any way to adjust the spacing of the dots in CSS?

Do you want more space between the dots, or do you want the dots themselves to be longer? There's no way to do the former, but you can substitute 'dashed' for 'dotted' to get the latter. This doesn't quite work in IE, which understands both 'dotted' and 'dashed' but always renders the border as if you'd said 'dashed' anyway.

Unfortunately, there is currently no way to get any finer-grained control over your borders than that. CSS3 promises more, but that's a long way off.

skalie · Jul 28, 2005, 09:06 AM

Um, you could do something along the lines of this. (If you'll excuse my php)

[php]
<html>
<head></head>
<body>
<table><tr>
<?php
for($i=0;$i<20;$i++){
echo "<td width=1px style= \"border-top: 1px solid #999999;\"> </td>";
echo "<td width=10px style= \"border-top: 1px solid #FFFFFF;\"> </td>";
}
?>
</tr></table>
</body>
</html>
[/php]

headbirth · Jul 28, 2005, 10:55 AM

Wow! great suggestions guys.

Thanks!

registered_user · Jul 28, 2005, 11:23 AM

Don't put a table in to fake a line.

No, you have no control over the dot spacing in a dotted line. And old browser will only display a dashed line or a solid line (IE6 is an old browser).

If you want a line that looks different than a browser's default, create an image of it, and use it as a background image positioned how you want it, and set it to repeat-x if necessary.

skalie · Jul 28, 2005, 11:56 AM

Originally Posted by registered_user

Don't put a table in to fake a line.

Oh come on, where's your sense of adventure?

Check this out.

[php]
<html>
<head></head>
<body>

<?
for($i=0;$i<20;$i++){
echo "<hr width=1px>";
echo "<hr width=10px style= \"display:none;\">";
}
?>

</body>
</html>
[/php]

result

(If you wanted a verticle jobbie that is)

registered_user · Jul 28, 2005, 12:48 PM

You could do this too, but it's an equally terrible idea.

<?php
echo "<nobr>";
for($i=0; $i<100; $i++) {
echo "<font size=2>.</font><font size=5>$nbsp;</font>";
}
echo "</nobr>";
?>

skalie · Jul 28, 2005, 01:00 PM

added to "result"

registered_user · Jul 28, 2005, 01:16 PM

heh, I put $nbsp; instead of   that's an oopsie

skalie · Jul 28, 2005, 01:18 PM

adjusted

skalie · Jul 28, 2005, 01:20 PM

working in win IE and firefox, btw

headbirth · Jul 29, 2005, 09:55 AM

The hr dotted rule method worked great ... I changed it to this for my particular use:

Code:
<hr size=1 width=100% color=#FFFFFF style="border-top: 1px dotted #999999;">

I know my code is a bit screwy .. tends to happen when 1. your a novice and 2. your experimenting. I have to go through and do some cleaning, but I was wondering if someone in there spare time could check this site in windows ie and firefox. it works fine in safari and firefox on the mac ... here are two screen captures to show what it should look like.

http://www.nomadicmind.com/Client/Screen1.png
http://www.nomadicmind.com/Client/Screen2.png

thanks!

oh ... one other question. does anyone bother testing in the old ie for mac? i ran this site through and altough it displays correctly the links and rollovers for the work section don't function.

skalie · Jul 29, 2005, 10:04 AM

Apart from a Javascript error (issue with document.pre1 not being defined or something), everything seems hunky dory in Win IE6 and Firefox.

And, er, don't mention ie for Mac, I just spent a few hours manufacturing a menu that doesn't render in that abortion of a browser.

Ever considered getting a PC out of some dumpster to check for win IE compatibility? It's what most of the web viewing audience will be using.