I’m a bit confused with one of the (supposedly) simplest of HTML elements: the <hr /> tag.
W3c says it works on all browsers, although the attributes of size, color and width have been removed with HTML5.
When I tried to use it in Firefox it seemed ok, and still accepted all three (with a little quirk with “size=”) but on Internet Explorer it doesn’t appear at all, unless I use some of the “deprecated” attributes. Anybody any clues on this? 
The HR never had ‘color’ and (only the core attributes were not deprecated in HTML 4.01) I don’t have IE7 on this machine but I’d be surprised if it didn’t show a default <hr /> as expected on a test page and typically CSS would be used to style such an presentational element.
I’ve never come across this problem. It may be that there is something else in the code that is causing the <hr> to be hidden – can you give us a link to the page where it’s happening?
Thanks for the response, Robert.
Yes, it would normally be styled, but I need to do this without styling, for a test-case, and I’m surprised also that there is no default showing. Firefox handles it as it should, with or without styling.
Try this snippet:
<p>
This is some text
</p>
<hr />
<p>
And some more
</p>
^10
Yes, Stevie, and thanks.
The url is http://htmlwithstyle.yolasite.com and it’s on the HTML/text page.
This is the piece I’ve placed there:
<p>
This is some text
</p>
<hr />
<p>
And some more
</p>
Well there’s something funny going on, because it’s showing up absolutely fine on browsershots, so I don’t know why you’re not getting it on your own computer…
HR works just fine in all versions of IE…but there is a bigger problem…I seriously hope that site is a joke and not actually trying to teach HTML/CSS…that must be a joke…Poorly coded HTML pages trying to teach HTML…does not speak well for the author…sorry if it offends but yeah quite bad.
No, Logic-Earth, it’s not a joke, but you can laugh if you like.
It’s actually an exercise for me as I try to recover from a small problem. It helps exercise the brain.
It has not been presented to the public (and probably never will be) except on this occasion to try to get an explanation of one of the many things I don’t understand. 
Personally, I’d avoid trying to style an <hr>. It’s handy for semantics, but not really a very pretty element at the best of times. So I’d set it to display: none, and instead use a bottom or top border on one of your block elements. That tends to look a lot nicer and is more reliable.
Which is exactly what I do with them…
The question itself here is flawed – since even in HTML 4 you have ZERO business saying the color of something in the markup – that’s CSS’ job! Problem is no two browsers accept color the same for it, which is why it got to be habit to say color, background-color and border-color all the same to get them to behave.
Though that’s a lot of what led people like Ralph and I to set them to display:none and style some other existing element instead… leaving the HR in place for it’s semantic purpose of indicating a change in topic without a numbered heading… like say before the page footer. (since it’s unlikely the content of the footer is a subsection of the numbered heading tag preceding it).
NONE of the presentational attributes – size, align, color, bgcolor – have ANY business being used in markup written after around 2001 (about when we kicked nyetscape 4 to the curb) – and by the specification should really have stopped using in 1998. It’s funny to think back and realize this is exactly WHY IE 5 and 6 became ‘the only browsers that mattered’ from '98 to around 2003… after all they literally were the most standards compliant browsers of their time!
Though of course one is still writing tranny the above is gibberish – nothing like being in transition from 1997 to 1998 and failing to grasp the entire point of HTML, the entire point of CSS, and such wonderful and practical concepts as separation of presentation from content, minimalist markup, etc etc… Not exactly a shocker though since this thread starts out as if it’s a HTML 5 ‘change’ (it isn’t) – the presence of 15 year out of date markup techniques is hardly a surprise. After all, that seems to be who HTML 5 was created for: the people who never really embraced or understood STRICT, semantic markup, or the dozen other modern coding techniques that result in clean efficiently coded easy to maintain, fully accessible sites.
The hr shows fine in IE7.
There is a problem in applying css to it as mozilla uses background colour to colour the hr and IE uses foreground colour which means it’s best to use both to be sure of the right result. Also note that in IE there is no way to collapse the default margins on the hr which makes it unreliable if pixel precision is required.
… and don’t forget border color for versions of KHTML from before Apple got their grubby little mits on it and renamed it webkit. 
That’s a joke, that would be like supporting netscape 4 at this point.
But it is what I meant by “which is why it got to be habit to say color, background-color and border-color all the same to get them to behave.”
Thanks to all for the feedback.
I accept all the admonitions, and the fact that my website is crap- but it’s MY crap, and written for my benefit.
I don’t want or need an appraisal, I just want to know why this snippet:
<p>
This is some text
</p>
<hr />
<p>
And some more
</p>
doesn’t show up on IE (on my computer, on an otherwise blank page).
Can anybody explain (in simple terms) why this is so, when it shows as a normal line in Firefox?
Hi,
The problem is that the code above will render fine in IE (or as well as can be expected as already mentioned) so there must be something else going on that we can’t see. The page you linked to also seems to display the hr in IE7 also.
Can you provide a screenshot showing the missing hr and perhaps that will give us a clue as to what’s wrong? It’s always hard to debug something when you can’t actually see the problem yourself. IE7 has many bugs and the most likely culprit would be “haslayout” but we’d need to see an example of where the hr is missing to confirm.
Hi Paul, and thanks for the response.
After some experimentation, I think I’ve found the culprit: Me.
I was using entities to show the coding for the hr (among other things) and neglected to use an > entity. I’ve gotten away with this in the past, but apparently IE doesn’t like it.
When I made a test page with this fragment on it, I looked in IE and still had no line, even after refreshing the page. But after closing IE then going back in and re-refreshing it was there.
As Logic_Earth pointed out so clearly, there are many errors on the pages, and these will be addressed one by one. The site is “not open to the public”; it’s only for my own benefit.
Thanks again. 
Glad you got to the bottom of it at last
Don’t let logic’s comments put you off as we all have room for improvement and while its good to point out errors (otherwise we never learn) there is a polite way of saying so (and even then most authors will still feel slightly aggrieved). The important point is that you know you have work to do and to continue to improve.
Thanks again Paul; that was very encouraging. I’ll keep on working and hopefully improve, in several ways.
Phil, the first Web site I created was based on a slew of handwritten notes I had made for myself about PC operation. I turned them into a “troubleshooting guide” as both an exercise in first-time Web design and in compiling info for helping me and whoever else wandered by with aspects of PC function. I never pretended to be a PC or computing expert, nor was I an expert at Web design. (I’m still not, in both instances.) As my knowledge and skills improved, both the content and the design/code of the site improved. Neither one hit expert level by any stretch, but it was a tremendous learning experience for me, and in later years I was pleased and humbled when people let me know that my site had helped them, too.
It doesn’t matter if your site is perfect, or even particularly “good” at this point. It’s the method you’re using to teach yourself design and code. It serves its purpose. You have nothing to be ashamed of, and nothing to feel bad about. I know exactly what you’re doing and why you’re doing it, and you should feel proud of it.
Don’t hesitate to keep coming in with questions about your site. I came to this very site years ago with the same situation, and similar questions. Some forum denizens get a bit snippy at times, but it’s (usually) meant to give assistance and not mock or vilify the folks asking for help. (If it gets near that point, you can be sure it gets shut down!) One of the biggest points of pride for the SitePoint community is to be a community that welcomes “newbies” and novices. We’re more than glad to help with whatever question you want answered.
I too applaud the effort, Phill.
Some take aways from this thread:
HR are difficult to style due to the fact that different browsers use different properties to achieve the “visuals” you see.
However HRs do have SEMANTIC MEANING.
You can use “display:none;” or “visibility:hidden” to hide the HR ( thus keeping the semantics) and the just style the TOP of the next element
TIP: if you write clean code, you can just do HR+ELEMENT {}
TIP: KILL THE TABLES ( for anything else but tabular data, and use ULs for navigation menus instead)
Keep on codin’!