Help: How can I create a dashed HR

H

Hardeep Rakhra

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.
 
D

Dylan Parry

Hardeep said:
.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?
 
W

Woolly Mittens

Hardeep Rakhra said:
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;
}
 
H

Hardeep Rakhra

Dylan said:
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.
 
J

Jukka K. Korpela

Hardeep Rakhra said:
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.)
 
H

Hardeep Rakhra

(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.
 
B

Barry Pearson

Hardeep said:
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.
 
H

Hardeep Rakhra

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
 
S

Spartanicus

Hardeep Rakhra said:
.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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top