Help: How can I create a dashed HR

Heya,

I would like to create a dashed HR but the only way i can is by cheating
and using a empty div and applying a class like the following to it.

..dashedbar {
width: 100%;
border-bottom: 1px dashed #ccc;
}

This works fine in Firebird 0.7 however IE6 gives the empty div some
height (about a lines worth) which looks odd.

Is there anyway i can create this effect in IE and Firebird with so it
renders the same in both?

Hardeep.

Hardeep.

Hardeep Rakhra

Hardeep Rakhra wrote:

> .dashedbar {
> width: 100%;
> border-bottom: 1px dashed #ccc;
> }
>
> This works fine in Firebird 0.7 however IE6 gives the empty div some
> height (about a lines worth) which looks odd.

Have you tried adding "height: 0;" to the stylesheet?

--
Dylan Parry
http://www.webpageworkshop.co.uk - FREE Web tutorials and references

"Hardeep Rakhra" <> wrote in message
news:bumf3b$jofv2$...
> Heya,
>
> I would like to create a dashed HR but the only way i can is by cheating
> and using a empty div and applying a class like the following to it.
>

This might be clunky, but it works for me:
hr {
border : none;
border-top : dashed 1px #CCCCCC;
color : #FFFFFF;
background-color : #FFFFFF;
height : 1px;
}

Dylan Parry wrote:

>
> Have you tried adding "height: 0;" to the stylesheet?
>

Doesn't seem to work, I don't think IE6 pays any attention to the height
property.

Hardeep.

Hardeep Rakhra <> wrote:

> I would like to create a dashed HR but the only way i can is by
> cheating and using a empty div and applying a class like the
> following to it.

Why don't you simply set a border on some real element, like the
element before the desired dashed rule or after it?

> This works fine in Firebird 0.7 however IE6 gives the empty div
> some height (about a lines worth) which looks odd.

(I wonder if it's really empty. As usual, the URL would have removed
the doubt.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Jukka K. Korpela wrote:

> Hardeep Rakhra <> wrote:
>

> (I wonder if it's really empty. As usual, the URL would have removed
> the doubt.)
>

I could set the border on the element beforehand, but would rather have
the HR as it's own element.

As for the div realy being empty its as empty as this;

<div class="blah"></div>

I don't see why IE would see that as anything but empty.

Hardeep.

Hardeep Rakhra wrote:
> Heya,
> I would like to create a dashed HR but the only way i can is by
> cheating and using a empty div and applying a class like the
> following to it.
[snip]
> Is there anyway i can create this effect in IE and Firebird with so it
> renders the same in both?

To set a 1-pixel solid line in a variety of browsers, I use:

hr { height: 0; border-style: solid; border-width: 1px 0 0 0; border-color:
#007700; }

/* choose your own border colour */


This is OK in IE 6, IE 5, Firebird 0.7, Netscape 7.1, and Opera 7.2.

Change "solid" to "dotted" and you should be OK.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

Woolly Mittens wrote:


> This might be clunky, but it works for me:
> hr {
> border : none;
> border-top : dashed 1px #CCCCCC;
> color : #FFFFFF;
> background-color : #FFFFFF;
> height : 1px;
> }

Clunky works just fine :O)

Works without the 'colour:' part.

Thank You.

Hardeep

Hardeep Rakhra <> wrote:

>.dashedbar {
> width: 100%;
> border-bottom: 1px dashed #ccc;
>}
>
>This works fine in Firebird 0.7 however IE6 gives the empty div some
>height (about a lines worth) which looks odd.

Text
<div style="height:0;font:0/0 serif;border-bottom:1px dashed
#f00"></div>
More text

--
Spartanicus