Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Help: How can I create a dashed HR

Reply
Thread Tools

Help: How can I create a dashed HR

 
 
Hardeep Rakhra
Guest
Posts: n/a
 
      01-21-2004
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.
 
Reply With Quote
 
 
 
 
Dylan Parry
Guest
Posts: n/a
 
      01-21-2004
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

 
Reply With Quote
 
 
 
 
Woolly Mittens
Guest
Posts: n/a
 
      01-21-2004
"Hardeep Rakhra" <(E-Mail Removed)> wrote in message
news:bumf3b$jofv2$(E-Mail Removed)-berlin.de...
> 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;
}


 
Reply With Quote
 
Hardeep Rakhra
Guest
Posts: n/a
 
      01-21-2004
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.
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      01-21-2004
Hardeep Rakhra <(E-Mail Removed)> 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


 
Reply With Quote
 
Hardeep Rakhra
Guest
Posts: n/a
 
      01-21-2004
Jukka K. Korpela wrote:

> Hardeep Rakhra <(E-Mail Removed)> 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.
 
Reply With Quote
 
Barry Pearson
Guest
Posts: n/a
 
      01-21-2004
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/


 
Reply With Quote
 
Hardeep Rakhra
Guest
Posts: n/a
 
      01-21-2004
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
 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      01-22-2004
Hardeep Rakhra <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to create python script which can create csv we file with relationship Sonu Python 1 08-03-2007 01:08 PM
Jpanel Dashed Border? Barkster Java 16 07-03-2006 06:13 PM
Creating a dashed line John Abbler HTML 18 07-18-2005 02:09 AM
how to draw a dashed line between two points Rick Java 3 09-30-2003 07:36 PM
annoying IE problem with dashed CSS borders TheKeith HTML 15 06-30-2003 07:17 AM



Advertisments