Why Is Color Being Stripped From My HR?

  • Author
  • #659066

    I wanted to create a simple line that comes across a post.


    That’s the basic code. I can add anything I want to the code to restyle my horizontal line and it works… except colour. Changing the colour is kind of important because the page background is black and you can’t see it if I don’t change the colour, but every time I update the page, my code is exactly the same except the colour is stripped out. I’ve tried:

    <hr color="#996600" align="center" size="2px" width="80%" />
    <hr style="color: #996600" align="center" size="2px" width="80%" />
    <hr noshade="#996600" align="center" size="2px" width="80%" />
    <hr color="#996600" align="center" size="2px" width="80%">
    <hr style="color: #996600" align="center" size="2px" width="80%">
    <hr noshade="#996600" align="center" size="2px" width="80%">

    The first three are xhtml and the last three are just regular html. Another note, if I use a regular html HR tag, it changes it to an xhtml, which isn’t a big deal at all (and actually what I’d prefer to set it as). Also, I know you can’t set the noshade tag to a colour, but I decided to try it just for the hell of it anyway.

    What I don’t understand is I can change every single aspect of this EXCEPT the colour.

    Why? I mean I don’t understand why at all this would be an issue. It isn’t like it’s something that can be exploited like JS or something…

    The blog I need help with is metaledu.wordpress.com.



    Is this a CSS editing question or not?
    Does this question pertain to the blog using the Twenty Ten them linked to your username or not?


    WordPress is HTML5/CSS3 and the align, size, noshade and width attributes you are using were depreciated back in HTML 4.01. You need to use inline CSS instead. Example:

    <hr style="color: #996600; text-align: center; height: 2px; width: 80%;" />

    For “noshade” you would add a background color declaration

    <hr style="background-color: #996600; color: #996600; text-align: center; height: 2px; width: 80%;" />


    This is OBVIOUSLY not a CSS question because I posted code as it would be used on an ACTUAL post.

    The blog in question doesn’t matter, but no it’s not.

    It’s my Metal 101 blog. The particular page doesn’t matter and yes I have the CSS upgrade on that blog (the Metal 101 blog).

    More than likely I could edit the CSS to change ALL hr tags to a certain colour, but that’s only going to get highly annoying if I want to use multiple horizontal rules with different colours in different places on the same page.

    The point is, why would WordPress.com allow me to completely edit all aspects of a horizontal rule EXCEPT the colour?

    There’s absolutely no logical explanation for that.

    Even then, what if I were using a blog and was ACTUALLY fine with the layout completely, and just simply wanted to add a horizontal rule of a certain colour just once? I’d have to pay $30 per month just for ONE little thing?

    Do you see where I am going with this?


    Sacred path, that did actually work.

    Now, I know CSS3 and HTML5 aren’t totally new, but there’s still tons of people who are HIGHLY versed in HTML4.1 and CSS2 and have not yet learned CSS3 or HTML5.

    So why did WordPress decide to just completely run solely on CSS3/HTML5 and not both HTML 4 and 5 and CSS 2 and 3 as many other PROFESSIONAL sites do.

    That is typically what happens during transitional periods.

    I know you’re not the right person to ask about that though as you’re just an amateur support person on WordPress and don’t actually work FOR WordPress. I thought maybe you’d have some insight, but I’m not even going to bother hunting down somebody who actually works FOR WordPress.com because even when you can, they never answer you, and on the rare occasion they do, they just direct you to the amateur support forums, even if it’s a question the forums can’t answer that they suggested you contact WordPress.com staff about.


    Man this is really getting on my last nerve.

    Another thing I don’t get is there’s still a lot of HTML4 and CSS2 stuff that STILL works on WordPress.com that is actually technically deprecated in HTML5/CSS3, which makes EVEN LESS sense.



    Even then, only the MAJOR browsers like IE, Opera, Firefox, Google Chrome, etc. support the HTML5/CSS3.

    Not all of the smaller and lesser known browsers, while individually don’t have many users at all, the total of all these browsers and their users makes up at least 1/4 of the Internet market, and their browsers can’t yet handle HTML5 or CSS3. Hell, some of them STILL can’t even handle xhtml.


    Depreciation of HTML attributes has been going on since HTML2. It will continue. When CSS came around and became solid, the depreciation continued because using CSS to do the styling gave much greater flexibility.

    The web is a constantly changing thing. Standards change and add more flexibility and stuff so that we can all do more amazing things.

    Since about HTML3, the push has been to start moving all styling for HTML elements over and into CSS because it gives so much more control.

    There are always going to be stuff from older standards that still work in later standards, and that is more related to browsers than anything else. Browsers in general try to be as flexible as possible and will render many older things properly even though they are depreciated, or even obsolete and a newer DOCTYPE is declared. At some point though, the browsers drop support for the older stuff and then all of a sudden those sites still using that older stuff blow up and go blank.

    I just gave a potential client an estimate on updating two HTML2 websites because they are now having issues with things not rendering in modern browsers.

    The web moves on whether we like it or not.


    Well, I would dispute your 1/4 of browsers statement. IE, FF, Chrome, Safari and Opera hold 97.7% of the browser market share. “Other” is down at 1.06%.


    Another internet statics site has the browsers I listed above totaling out at 99.38% leaving “other” with only 0.62%.


    I’m going to have to do some more research since the CSS is being stripped out of my test HR tags when I publish the post.


    Well I just went with creating a div element anyway. I actually can have greater stylistic control and DIV elements seem to be those that are changing the least in the switch and are most supported.

    This is what I put in the post:
    <div class="line">ANY CHARACTER HERE</div>

    And this is in the CSS:

    .line {
    border-width:0 0 1px;
    margin:0 10% 32px;

    Probably not the most proper use of a div element, but hell, it’s better than people creating entire page layouts using tables. -_-*

    Anyway, this is the page showing the end result:

    Just scroll down past the legal definition to where the actual copyright information is listed and you’ll see it, the line comes between the listings for each page, and each page has a heading, etc.


    Yeah, that looks good, and a div works, so I would not worry about it.

    I’ve contacted staff on the HR thing because it is stripping out the inline CSS, and if you can’t use the depreciated attributes, and you cannot use the inline CSS, then there is no way to style a rule.

    I’ll post back here after I hear back from staff. Hopefully they will get this straightened out.



    I’d like to hear back on this, as well — especially since this seems like something basic that someone should be able to do without having to get the CSS upgrade. An hr element is pretty basic, and if the default is the same color as the background, that’s a problem, I think.



    It’s weird too, I was looking into CSS3 and HTML5 (and double checking xHTML), and HR’s still can’t be styled all that much, aside from size, width, colour, and whether or not it’s shaded.

    However, pretty much every other type of HTML element you can create can be styled in an almost innumerable amount of ways. Like creating a table, one that has a different border type size and colour on each cell, side, and so forth, with different backgrounds for different cells and so on.

    Yet HR is still basically the way it was in HTML2…

    Then again, nobody really uses them all that often, except kids in an 8th grade computer class…


    You can actually do quite a lot to them You can set a border on them and then set a color that matches the background of the theme and you have a rectangle. You can set the color to the same as the background and then put a dashed or dotted top border and a solid bottom border, you can even set a background image that will take the place of the normal rule.


    Yes, and all of that can be done with far more simple coding than basing it around an hr tag. XD

The topic ‘Why Is Color Being Stripped From My HR?’ is closed to new replies.