Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    66
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Strange symbol popping up on <hr> with CSS styling

    Hi, I'm trying to insure that my <hr>s look as similar as possible across browsers, and styling them with CSS. There's just one problem: my <hr>s have now got a weird symbol in the middle. Can anyone help?

    Page: www.basentana.com/home.html
    CSS file: www.basentana.com/css/style1.css

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello JumpJump,
    Where did you come up with this bit in red? I've never seen that before...
    Code:
    hr:after {
    content:"\a7\a7";
    font-size:1.25em;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    JumpJump (12-20-2010)

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    That produces the section symbol (§). It's also the issue. I'm curious as to why you inserted it if you did not want it; it's an awfully specific thing so it is unlikely to have occurred by accident.

  • Users who have thanked Apostropartheid for this post:

    JumpJump (12-20-2010)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Apostropartheid View Post
    That produces the section symbol (§). It's also the issue. I'm curious as to why you inserted it if you did not want it; it's an awfully specific thing so it is unlikely to have occurred by accident.
    Yes, the whole hr:after thing is actually kind of an odd thing to come up with, where did you come up with that?

    Oh, by the way, I have an hr styling demo page here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    66
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Ah, I see. I was using some CSS I found whilst looking for a way to ensure my <hr>s appeared uniform in all (or most) browsers. I forgot about that part, and at the time had no idea why it was included (it wasn't explained very well).

    Stupider and stupider.

    Thanks for your help.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Styling the hr consistently across browsers is a pain, because IE7 and under add an additional 8px margin which is added to any margin set with css. Have a look here for some more details.

    However, I find it less painful to use border-bottom/border-top instead.


  •  

    Posting Permissions

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