...

View Full Version : Strange symbol popping up on <hr> with CSS styling



JumpJump
12-20-2010, 12:22 AM
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

Excavator
12-20-2010, 02:17 AM
Hello JumpJump,
Where did you come up with this bit in red? I've never seen that before...

hr:after {
content:"\a7\a7";
font-size:1.25em;
}

Apostropartheid
12-20-2010, 02:42 AM
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.

Excavator
12-20-2010, 02:51 AM
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 (http://nopeople.com/CSS%20tips/hr/index.html).

JumpJump
12-20-2010, 07:29 AM
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.

SB65
12-20-2010, 11:54 AM
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 (http://www.simonbattersby.com/blog/hr-element-css-removing-the-gaps-in-ie/) for some more details.

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum