SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to create few styles for HR element?

    Hello guys,

    I wonder, how can I create few styles for <HR /> element?

    I'm trying this and it works:

    hr {
    border: 0px;
    margin-bottom: 2px;
    margin-top: 3px;
    border-top: 1px dotted #777777;
    height: 1px;
    }
    But this doesn't work:

    hr.green {
    border: 0px;
    margin-bottom: 10px;
    margin-top: 10px;
    border-top: 1px dotted green;
    height: 1px;
    }
    I'm trying to call this style by <div class="green">.

    What am I doing wrong?

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,345
    Mentioned
    192 Post(s)
    Tagged
    5 Thread(s)
    You need to call the element as <hr class="green" />
    The class specifier applies directly to the element named, not its parent (the way you coded it).


    If, instead, you did this:

    .green {
    /* CSS code here */
    }

    .green hr {
    /* stuff that is specific for HR elements */
    }
    Then only an HR with a parent in the class "green" would take on the style.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for quick reply. It works.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    The hr is one of those elements that is difficult to style consistently cross-browser which is why I avoid using it at all even though in some cases it can be the correct semantic element.

    As an example Mozilla uses background color and ie uses foreground colour and you would need to set both to get a solid color displayed. There is also a problem in IE where the hr margins cannot be reduced in height and always takes up a lot more space on the page that other browsers.

    Where possible it is usually better to use the borders on existing elements anyway and save clutter in your mark-up.

  5. #5
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have used this method for awhile now and it seems to work, but requires an image for the hr vs the default hr.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Paul, it's much easier to use a bottom border on a containing div and then push it away from the content using padding-bottom, whilst creating space below the border using margin-bottom.

    There's nothing wrong with using an <hr> though and probably would make more sense so that there's a separator for users without styles but I just personally find it unnecessary to include most of the time.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •