Help: How can I create a dashed HR

Discussion in 'HTML' started by Hardeep Rakhra, Jan 21, 2004.

  1. 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, Jan 21, 2004
    #1
    1. Advertising

  2. Hardeep Rakhra

    Dylan Parry Guest

    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
     
    Dylan Parry, Jan 21, 2004
    #2
    1. Advertising

  3. Re: How can I create a dashed HR

    "Hardeep Rakhra" <> wrote in message
    news:bumf3b$jofv2$-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;
    }
     
    Woolly Mittens, Jan 21, 2004
    #3
  4. 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, Jan 21, 2004
    #4
  5. 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, Jan 21, 2004
    #5
  6. 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, Jan 21, 2004
    #6
  7. Re: How can I create a dashed HR

    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/
     
    Barry Pearson, Jan 21, 2004
    #7
  8. Re: How can I create a dashed HR

    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, Jan 21, 2004
    #8
  9. Hardeep Rakhra

    Spartanicus Guest

    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
     
    Spartanicus, Jan 22, 2004
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rick
    Replies:
    3
    Views:
    1,482
    Sandip Chitale
    Sep 30, 2003
  2. TheKeith
    Replies:
    15
    Views:
    6,873
    Denise Enck
    Jun 30, 2003
  3. John Abbler

    Creating a dashed line

    John Abbler, Jul 13, 2005, in forum: HTML
    Replies:
    18
    Views:
    91,766
  4. Newsguy
    Replies:
    4
    Views:
    419
    Gary Dale
    Oct 22, 2005
  5. Barkster

    Jpanel Dashed Border?

    Barkster, Jun 27, 2006, in forum: Java
    Replies:
    16
    Views:
    6,298
    Barkster
    Jul 3, 2006
Loading...

Share This Page