SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HR tag doesn't seem to work in IE7

    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?

  2. #2
    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)
    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.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    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?

  4. #4
    SitePoint Member
    Join Date
    May 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Member
    Join Date
    May 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Phil Taylor View Post
    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...

  7. #7
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    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.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  8. #8
    SitePoint Member
    Join Date
    May 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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."

  13. #13
    SitePoint Member
    Join Date
    May 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Phil Taylor View Post
    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.

  15. #15
    SitePoint Member
    Join Date
    May 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 &gt; 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.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Glad you got to the bottom of it at last

    Quote Originally Posted by Phil Taylor View Post
    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.
    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.

  17. #17
    SitePoint Member
    Join Date
    May 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Paul; that was very encouraging. I'll keep on working and hopefully improve, in several ways.

  18. #18
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.

  19. #19
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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'!


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
  •