CSS usage with the hr element

[batti3004]

Hi, i have a problem, i use a hr on my site with css it works on all browsers exept ie6-7, what can i do?

{
  border-bottom: solid #ffcc66; 
  width: 81%; 
  margin:0 0 0 auto; 
  margin-top: 5pt; 
  margin-bottom: 5pt; 
padding-left: 5pt;
}

[caffinated]

Perhaps

margin:0 auto;margin-bottom:0;

instead of

margin:0 0 0 auto;

[alt131]

Hi batti3004 and welcome to webmasterworld [webmasterworld.com]

You haven't said what the "problem" is, but I wonder if it is that the hr is not aligning right, and is not as "thick" in ie6&7 as it is in the other browsers. If so, this should do it:

hr {
margin:5pt 0 5pt auto;
text-align:right; /* needed for ie <8 */
/*border-bottom: solid #ffcc66; browsers interpret differently, so easiest to set to zero and use height instead */
border:0;
height:4px; /* set to desired height"/
width: 81%;
padding-left: 5pt; /*in the code snippet this doesn't seem necesary */
background-color: #ffcc66; /* for other browsers */
color:#ffcc66; /* needed for ie <8 /*
}

[batti3004]

Tried it, but it donīt works. An other thing in din#hr, not just hr.

[alt131]

Hi Batti, sorry to hear that didn't work.

If you have more than one rule for <hr>, then make sure the rules aren't being over-ridden. It would also help if you posted the relevant html, and explained what "isn't working" and what you are trying to achieve.

[milosevic]

I seem to remember playing around with this a couple of years ago and giving up - ie6 HRs work differently to other browsers.

You don't really need to use HR in designs anyway, there's way to get the same visual effect using an empty element.

[batti3004]

This is how i have it.

Html

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

CSS

div.hr
{
 border-bottom: solid #ffcc66; 
 width: 90%; 
 margin:0 0 0 auto; 
 margin-top: 5pt; 
 margin-bottom: 5pt; 
}

[milosevic]

You aren't using an HR in your code. You are using "hr" as a classname for your div. This does not mean anything, you could give the div class="goats-are-great" and it would do the same thing.

A hr (horizontal rule element) is <hr> - so your code would look like <hr class="classname">.

Edit: Since your code is OK and better than using an actual HR - if you stick

&nbsp;

Between your div tags it might well work in the browsers it's not currently - that would be the first thing I would try.

[pageoneresults]

I've been using this for years without fail...

/* Begin Horizontal Rule */
hr{text-align:center;width:auto;height:1px;color:#ddd;border:none;} /* For Internet Explorer */
html>body hr{margin:0;margin-right:0;width:auto;height:1px;background-color:#ddd;border:none;} /* For Gecko-based browsers */
html>body hr{margin:0;margin-right:0;width:auto;height:1px;background-color:#ddd;border:0 solid #ddd;} /* For Opera and Gecko-based browsers */
/* End Horizontal Rule */

I tried controlling <hr> all sorts of ways and then I found the above solution and haven't looked back. It may or may not apply in your case. You may need to rethink how you have those <hr>s setup. Something might need to change, etc.

[edited by: pageoneresults at 3:43 pm (utc) on Nov 15, 2010]

[batti3004]

sorry it donīt works.

[batti3004]

My site is in xhtml1+css3, the div.hr works in all browsers exept <ie8

this is the problem

margin-top ie6&7 donīt understand it, but they understand margin-bottom.

[alt131]

Hi batti, thanks for posting code - as you can see, makes it so much easier to make suggestions.

Html elements are designed to convey meaning, not just have a visual effect, so I do not recommend using an empty element when there is a specific html element already designed to do the job.

<hr> lost favour because of different renderings, but my example shows it is very easy to achieve both forwards and backwards compatibility. Even though it requires some additional css code, I think it is better to use the correct hr element rather than an empty div.

As milosevic has already said, you are not using an hr, just a classed div. Rather than trying to force the div to display as you want, I suggest replace <div class="hr"></div> in your html with <hr> and apply the style I suggested above. Post back if that still causes problems.

[alt131]

Ouch, not sure how I missed the earlier posts.

@batti, if you are using xhtml, that should be <hr/>

@page1, I use horizontal rules quite a bit, and started off with something very similar to your code, but I've found that recent versions of Opera has lost their rendering inconsistencies, so it is now possible to simplify back to the border/colour/background-color difference with ie. Depends what browser versions you're supporting, of course.

[batti3004]

I tryed with hr, but in opera and chrome it was invisible and in firefox it was misaligned.

Plus the validation failed if i added anything inside <hr />

i decide to use div because it works fine on all browsers exept ie6&7

[alt131]

Ok batti, I imagine this is a bit frustrating for you, but can yo try to provide a little more information please. For example:

I tryed with hr, but in opera and chrome it was invisible and in firefox it was misaligned.

- Using which code - the css you originally posted, my code sample, or page1's. The reason I'm asking is that yours was for a div, so will have problems, mine works, and page1's should, except it needs a width to stop the ht extending right across the page, and needs to be aligned right as I think you wanted - but that's easily adjusted. So if it's any of the suggested code there must be something else in your styles that is causing the problem.

Plus the validation failed if i added anything inside <hr />

It shouldn't. That suggests there is a problem elsewhere in the code.

decide to use div because it works fine on all browsers exept ie6&7

Except that you've said ie6&7 don't understand margin-top - which they do. Again, that points to something else causing the problem

Can you post the css styles you are using - and a snipet of the xhtml so we can see the hr/div in context.

[batti3004]

CSS

div.hr
{
 border-bottom: solid #ffcc66; 
 width: 90%; 
 margin:0 0 0 auto; 
 margin-top: 5pt; 
 margin-bottom: 5pt; 
}

Html

<div class="Section1">
<div align="center">
<table class="t1">
<tr>
<td class="t1">
<img class="l1" src="../site/graphics/logo.gif" alt="Cre&#351;tini Liberali" />
<p class="h2">Cre&#351;tini Liberali</p>
<p class="h3">Pentru Dumnezeu, &#351;i pentru dragoste.</p>
<div class="hr"></div>
<p class="h4">C&#259;s&#259;toria <font color="#FFCC66">|</font> Mai este 
nevoie de ea? <font color="#FFCC66" face="Comic Sans MS" size="3">| </font> De Dave</p>
</td>
</tr>
</table>
</div>
</div>

[crestiniliberali.3x.ro...]

Note: i use 2 hrs hr and hr2, hr2 works on ie6 but not hr.

[batti3004]

I fix t it, here is how:

div.hr
{
 border-height: 0; 
text-align: right;
border: 0;
height: 4px;
 width: 89%; 
 margin: 5pt 0 5pt auto;
background-color: #ffcc66;
color: #ffcc66;
}

it now work fine in ie7 but ie6 ignores the height: 4px.

[alt131]

Ok, just to get our technical words correct, this is not a horizontal rule, but a styled div. Very important not to refer to a styled div as an hr because they work quite differently. I understand you have classed the divs as class="hr" - but I suggest try to avoid using a class name that is the same as an html element name to avoid confusion between class names and element types.

Anyway, on a quick test, the posted code works fine for me in ie5.5-8, winsafari, ff3.5 and Opera10.5. However, so does the code I suggested for using an hr (with adjustments to get the same visual width and height.) Just for testing purposes, try an hr with the suggested code to see if it works for you.

That suggests there is something else affecting the display. Earlier you said that ie6&7 didn't understand margin-top. I wonder if you mean there isn't a "gap" (margin) between <p class="h3"></p> and div.hr. If so, this could be the css for the p, or collpasing margins. So I'd look at the code for that para - perhaps even delete it - and keep deleting other elements until div.hr shows as you want. Then add them back until you find the one that is causing the problem.

Do you use firebug for firefix? It is an extension that lets you mouse over an element and it displays the styles being applied. It makes it really easy and quick to identify troubles. Downloads in a couple of minutes, well worth the time for problems like this.

[alt131]

Ok, my last post referred to the post 4230616

However, on the new code (I have not followed the link as personal urls are not allowed), try this:
div.hr {
/*border-height: 0; not required*/
text-align: right;
border: 0;
height: 4px;
width: 89%;
margin: 5pt 0 5pt auto;
background-color: #ffcc66;
/*color: #ffcc66; not required */
font-size:0; /* this is the trick to getting ie6 to respect the height of 4px */
}

Just note that a proper hr element should also work fine

[milosevic]

I just thought I would add to this that I agree an empty div is not good practice semantically - but a hr is a purely presentational element so it's not much better.

Really, the best way to work in many situations is to group your paragraphs or whatever into div sections and give a bottom border to get the horizontal rule effect.

[SuzyUK]

agree with milosevic, but sometimes an hr can make sense even if there is no CSS, e.g. separating ad blocks, blog posts etc. - so you could combine both keeping your options open as far as styling goes.. i.e. a div could have a nice background image "separator" stick to the bottom of it making it more flexible than an <hr> element. so e.g. you could use..

<div class="hrule"><hr></div>
 
.hrule {styles}
.hrule hr {display: none;}

style the div but visually hide the <hr> element, that way it still makes semantic sense with the CSS turned off

might just be as well to use that than "group" paragraphs, at the design stage it might not be possible to know where all groups are going to be?

[milosevic]

Wow, that's really smart SuzyUK, I'm impressed - will have to remember this trick!

[alt131]

My approach is different. I think the main reason for the lack of popularity of hr has been the different renderings, div-itis, and apathy about semantics, not whether it is presentational only.

In HTML3: "Horizontal rules may be used to indicate a change in topic. In a speech based user agent, the rule could be rendered as a pause.".- which suggests it is structural
html4/4.01 said only: "The HR element causes a horizontal rule to be rendered by visual user agents"- which gives no clue, and if unfamiliar with the original purpose in HTML3 might suggest it was presentational
In html5: "The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book." - which, to me, makes it clear it is in the structural category.

I think the general use of a page <div>isions to create groupings of content is also wrong given they are a generic container that conveys no meaning - one of the issues addressed in html5 by the introduction of the new elements for sectioning content.

SuzyUk, the eg is clever - but I can't think of a scenario where you would need to use it given hr can take an image. Do you have a particular scenario/issue in mind ?

[milosevic]

Good points @alt131 - perhaps it's not a presentational element after all.

The idea about the use of border bottom for groups of paragraphs will definitely make more semantic sense with HTML 5 where you could specify that eg <section> <hgroup> etc have a bottom/top border to work like an HR.

[alt131]

Not to be picky milosevic, but I wonder if you are assuming that meaning inferred by a visual user is the same as semantic meaning. A border doesn't affect the document semantics even though a visual user might infer some message, eg, all paras with red borders are important. But a user would not identify that meaning by looking at the html alone, without the styles, or if using assistive technology. Unlike, for eg, <H>eading1, or <o>rdered<l>ist.

But I do think you make a good point about what presentational options will be developed once the new HTML5 elements are in common use. But useful to note that <hgroup> and <section> are sectioning content, while hr belongs to the next (lower?) level of grouping content - along with para, blockquotes, lists, etc. My (general) understanding is that hr is intended to signal/separate a change in theme that does not warrant the start of a new "section", new heading, etc. The interesting bit for me is that it does not affect the document outline.

[SuzyUK]

but I can't think of a scenario where you would need to use it given hr can take an image. Do you have a particular scenario/issue in mind ?

>scenario = just to make a pretty break :) - I'm with you on the divitis on this, don't particularly like it, you could use a span which would mean technically it remains inline - but that's probably splitting hairs.

Mainly it's as has been discussed in this thread - the cross browser nuances of the hr element make it less trouble to figure out what it can take, i.e. border, background, image, height etc.. than to just go with the flexibility of retaining the hr element as a "semantic" pause/break whatever and worrying about the styling later.

I use it, as per my example, in a site that been in use for over 5 years - there wasn't time back then to worry about an extra div/span, IE6 had more pressing issues ;) I think in my older site it might actually be working as a clearing element too - in a more recent site I've still coded it as above although I only actually use the hr element i.e. I don't hide it, hrule break is enough for this site, but the ability to add some style is there should I need it, it's a CMS template so I'm really not too bothered about the extras, it has plenty more extra that make me cringe without worrying about my wee class!

I think the HTML5 semantics of sections and headings would indeed remove the need for the <hr> as a semantic "pause" but given the time before full acceptance/support of this I'm still going with my easy "out"

[milosevic]

Good points @alt131, you are right that visual meaning is not the same as source code level semantic meaning.

I think though when used with HTML5 elements, the elements themselves supply the semantic meaning and the border is purely an aid to presentation.

I think what gives me reservations about using <hr>s (apart from browser issues which you have explained can be worked around) is that it's not a containing element and is inherently only connected to surrounding content by it's positioning in the source code - on it's own it has no meaning.

Looking at the HTML5 spec, it says about the <section> element:

"The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document."

I do feel that this is one area where the spec is lacking and this element covers too many bases, causing it to not have any clearly defined semantic meaning - which an element specifically to divide text content into 'chapters' would do. Yes, there's the <aside> but this is intended more for related 'boxout' content, lists of related content etc from what I understand than division of the main article.

[alt131]

... only connected to surrounding content by it's positioning in the source code - on it's own it has no meaning.

Arguably could be said for many html elements - a paragraph only makes sense if there are other para's, really. But one of the things that concerns me is that if assistive technology does not take any special action (such as the pause specified by html3), then it has no value for non-visual users.

Looking at the HTML5 spec, it says about the <section> element:
...
do feel that this is one area where the spec is lacking and this element covers too many bases, causing it to not have any clearly defined semantic meaning - which an element specifically to divide text content into 'chapters' would do.

Yes, I think <section> has the potential to become the "new div", despite the warnings in the draft. I also feel the nomenclature was a bit short-sighted, given the immediate adjective/noun confusion - "Is it correct to mark-up this section of my content as a <section>?".

I found the post at HTML5 Doctor [html5doctor.com] useful because it can be easy to miss that a section relates to a generic section of the document content, rather than being a generic element itself. In that regard I am not sure if a specific element for "chapter" would help as <section> is supposed to fill that role - a chapter is a "section" of a book. I think one of the big challenges will be the div/section/article confusion, and I hope the HTML5 draft authors clarify that some more.

there wasn't time back then to worry about an extra div/span, IE6 had more pressing issues

Many roads lead to Rome - which has seven hills so you can still end up in a different place. My introduction to hr was a few years before your site when I needed a separator to survive email clients. hr proved to be the most robust solution. ... which is toooo ironic ;)

[milosevic]

Thanks for the link to that article, good to read I guess I should have looked at the official spec - the w3schools page I quoted suggests the opposite!

With what I said about the HR element, I meant more that it's not a container - most other elements are given context by what they contain, they are inherently linked to a piece of content by containing it - where as the HR depends on being preceded and followed by text content in order to have a semantic meaning.

You have succeeded in convincing me that this is not really a true distinction however and there's no real world reason why HRs shouldn't be part of the semantic web.

The ideal way to use HRs for me would be with :before or :after selectors. Eg if you could use HTML in content rules (and search engines could parse it as part of the source):

article section:first-child:after {
content:'<hr>';
}

or

div.break:before {
content:'<hr>';
}

[SuzyUK]

good link alt131 :) don't think I would have got the "when is a section not a section" part of this without reading that!

So seeing as titles should come inside the section, indeed the heading level should (in section aware parsers) be dictated by the depth of the section then it is perhaps not right of me to be thinking that the separators/pause/hr should be attached to the section.. need to read more on this LOL - I already got confused reading Headings in HTML5 [brucelawson.co.uk]

"Is it correct to mark-up this section of my content as a <section>?".

oh the joys of trying to explain when/if to use that one, I particularly like the use of the word "blob" in the linked article :) Though come to think of it if you describe it .. "would you naturally pause (or put possibly even use an hr separator) before reading the next section" might be another way to help think of it, at the minute I'm thinking of them a little like nested lists :o after reading that, but I'll try again later

perhaps milosevic the :before and :after with image as their content would indeed be the way to visually separate if the section elements are to indicate a pause? Though it says section elements should not be used just to hook a CSS I presume they could be classed to provide visual separation..