Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

  1.  permalink
    Here's the guestion: do you remember seeing a technique that enables background images on an hr-element that also works on IE 6 and Opera? It's been quite a while since I've last had to look into this, so perhaps this is a problem that's been solved properly by now.

    I've used a div instead of doing it properly to get around the background issue, as seen here and here — both link to the same site (a sauna society for those of you less fluent in Finnish). By the way, don't bother pointing out that I'm not even using horizontal rules in the markup… There are other issues dealing with layout at the moment as well.
    • CommentAuthorrejamesuk
    • CommentTimeJan 4th 2009
     permalink
  2.  permalink
    If I'm not mistaken, just using a background-image doesn't work because IE and Opera still render a border around <hr />. I can't seem to come up with a better solution than just wrapping the element, like so: <div class="hr"><hr /></div>, and then doing a display:none on the hr. Better call it quits, then.

    By the way, there are some valid comments posted on those articles that argue quite correctly that if you're styling an hr element, just sending the graphics won't do.
    • CommentAuthorrejamesuk
    • CommentTimeJan 5th 2009
     permalink
    I'm not sure but this should work (i cant get opera to put a border on, so i cant test it)

    hr {
    border:none;
    }
    • CommentAuthorrejamesuk
    • CommentTimeJan 5th 2009
     permalink
    done some research for you: you will need

    hr {
    color:#fff;
    border: 0 none #fff;
    height:20px;
    background: transparent url(box.gif) center top no-repeat;
    }

    where #fff is your background colour.

    i think this should work. apparently you need the colour on both the border and the color.
    Again i cannot test this yet, need to test at work.

    good luck
Add your comments
    Username Password
  • Format comments as (Help)