Ruling Over The Horizontal Rule (Hr Tag)

Although HTML and Cascading Style Sheets are standards defined by the World Wide Web Consortium (the W3C), the standards are loosely defined such that browser vendors, Microsoft, Mozilla, Google, and the like, implement the standards differently.The HR tag is one such element that is implemented differently in different browsers. The HR tag specifies a horizontal rule, typically in black or with a 3D appearance, that goes across from one side of the page to the other. Setting the color of the horizontal rule is something that 'modern' web designers tend to discourage, because of the 'best practice' of separating markup from presentation appearance. The advantage of this separation enables the web designers to change the appearance of the web page by changing only the cascading style sheet file and without having to modify any of the markup. When you consider the development cycle of most web applications, this does make sense because the web designers make the markup for the application and send it across to the developers who break up the markup into various sections so tracing a particular tag or a div by browsing through several files can get tedious for the web designer, and there's the difficulty in being able to modify the markup and view the results in the browser because that would require setting up a test environment with a running webserver and database. By modifying only the cascading style sheet file, which is typically just a single file in a small web application, the web designer can easily change the look of the web site without requiring extensive knowledge of how the application is structured.When you, however, want to use the horizontal rule tag within your design, you can typically set the color of the horizontal rule using the color CSS property. When I use the word "typically", what I mean is that the color property works in almost all web browsers, except for Microsoft Internet Explorer. To get the horizontal rule to appear in a different color in Microsoft Internet Explorer, you have to set the background-color CSS attribute instead of the color attribute (though you can set both to set the colors across multiple browsers). However, the differences in HTML and cascading stylesheet implementations does not end there - there also exists a difference in the way different versions of Microsoft Internet Explorer implement the HTML and cascading stylesheet standards, so while the background-color attribute sets the color of the horizontal rule in older versions of Microsoft Internet Explorer, Internet Explorer 8 will not display a colored horizontal rule with either the color CSS attribute or the background-color CSS attribute. Internet Explorer 8 instead requires the border-color attribute to be specified. Frustrated? Well, perhaps that's why most folks decided to go the way of implementing a horizontal rule by means of creating a div instead of styling the horizontal rule. Despite having set the border color CSS attribute of the horizontal rule in Internet Explorer 8, the background color CSS attribute of the horizontal rule in older versions of Microsoft Internet Explorer, and the color CSS attribute of the horizontal rule in other web browsers, do not expect to have the horizontal rule look the same in all browsers or across browser versions because they may still be a difference between the way browsers render the markup and cascading style sheets. Internet Explorer 8, for example, displays the horizontal rule as a 3D line and this becomes more prominent when you set a color and compare the appearance of the horizontal rule across web browsers.Another difference between the implementation of the cascading stylesheets for the horizontal rule is in the positioning of the horizontal rule. Typically, you would want to have the horizontal rule positioned in the center and you would not have to change a thing to achieve the centering. However, when you do want the horizontal rule to appear to the left or to the right (perhaps to get a better formatted output when printing a page), you have to set the margin CSS property for most web browsers, but for Microsoft Internet Explorer you would have to set the text-align CSS property, just as you would set it for a paragraph tag.Having worked with the horizontal rule using cascading style sheets in different browsers, would you even bother with the horizontal rule? Browser makers and modern web designers want to discourage the use of the horizontal rule so it is unlikely that we would have many supporters as we petition for stricter standards defining the implementation of the horizontal rule in different browsers.