SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Horizontal Rule

  1. #1
    SitePoint Guru moonman's Avatar
    Join Date
    Dec 2000
    Location
    The Sea of Tranquility
    Posts
    696
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Rule

    I'm setting the style of my <HR> in CSS using this code:

    Code:
    hr
    
    {
    
    background-image: url('../images/structure/hr.gif');
    
    background-repeat: no-repeat;
    
    background-position: centercenter;
    
    width: 577px;
    
    height: 10px;
    
    }
    
    
    It works fine in FireFox, but IE is showing a gray inset border around this <HR>, and I can't get rid of it. Anyone come across this before, and know how to get rid of it??

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Have you tried "border: none;"?

  3. #3
    SitePoint Guru moonman's Avatar
    Join Date
    Dec 2000
    Location
    The Sea of Tranquility
    Posts
    696
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, tried border: none and border: 0px. Neither worked.

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    As far as I know it's a bug and there maybe ways to get around it using hacks for example containing it in another element. Though perhaps setting the background colour might help. Maybe a styled div would suffice since you intend on using an image with the hr.

  5. #5
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.sovavsiti.cz/css/hr.html
    It looks great in Mozilla, where only the image is visible, however the result is not so good in IE and Opera, because these two browsers display a border around the image (see also note 1.3). Unfortunately, I have found no way to hide this border.

    Because I did not find a workaround, I've added a div in the source code:

    <div class="hr"><hr /></div>

    and the following CSS rules:

    div.hr {
    height: 15px;
    background: #fff url(hr1.gif) no-repeat scroll center;
    }
    div.hr hr {
    display: none;
    }

    The result is perfect in all three browsers now.

  6. #6
    SitePoint Guru moonman's Avatar
    Join Date
    Dec 2000
    Location
    The Sea of Tranquility
    Posts
    696
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers guys. That'll have to do for now.


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
  •