CSS - Frustration with Browser Vendors

Home Tutorials Reviews Weblog

Featuring: Frustration with Browser vendors is illustrated by <hr> tag + CSS stylings
Motivation: All of the major vendors stumplbe on simple CSS styling for <hr>

I have always wanted to use <hr> horizontal rule tags liberally throughout theOpenSourcery's web pages but I have been frustrated by the substantial margins and my fruitless efforts to apply CSS stylings that will work uniformly across all the browsers. The following CSS will show the source of my frustration:
hr { line-height: 3px; color: red; margin-top: -9px; margin-bottom: 0px;}


HTML Used

The following CSS will show the source of my frustration:<br>
<strong> hr { line-height: 3px; color: red; margin-top: -9px; margin-bottom: 0px;}</strong>
<hr>
<strong>HTML Used</strong><br> <br>


Here is what Dreamwever CS3 Shows

Notice that the CSS styling be used for <hr> is given at the very top of the screenshot. Note that the first <hr> tag seems to get the top-margin and bottom-margin slightly off; while the second <hr> tag muffs the top-margin very badly. But the thickness and color of the horizontal rule are right.

Here is what Apple's new Windows Safari 1.0 Browser Produces

I wish I could say Safari was right on but the screenshot was taken on identically the same cssfrustration.htm file. Safari does not get the color, thickness or the margins right. So far, Sofari off.

Here is what Microsoft IE6 - Internet Explorer 6 Delivers

It is ironic that Internet Explorer comes closest to delivering what I want in my CSS style. Now considering that Redmond and the IE team have thwarted CSS and general W3C Web standards for the past 6-8 years - especially CSS, JavaScript and DOM (see here for a summary), this result is notable. The margins are close to right on the button as are the color and thickness of the rule. I and millions of other Web developers wish that these results could be applied universally not just for IE but the full line of Microsoft Web development tools.

Here is what Mozilla's Firefox 2.04 Produces
This result looks remarkably a lot like Safari. It is missing the thickness and red color - and the margins are inconsistent. So much for Mozilla showing the standards way.

Here is what Opera 9 Produces

At least Opera 9 is consistent in getting the margins wrong but the like Safari and Firefox completely ignores the color and thickness requirements. Now I am sure there is some HTML hack which applies consistently across all browsers; but then again I may be engaging in wishful thinking.

The problem is that layered on top of Microsoft's deliberate sabotaging of Web and CSS standards, there is the inconsistent implementation of CSS by all the browser vendors. I could show users other misdeeds involving the <ul> <li> tags with CSS or treatment of margins and padding directives in CSS.

Now when the ship hits the fan, and users complain that a website is not displaying uniformly, its the Web developers that have to take the flak. But there are more times like this <hr> tag inconsistency where the browser vendors are at fault. Perhaps this is the problem with free software - you get what you pay for. Or conspiracy theorists might conclude, that since Redmond has been so destructive of Web standards, the attitude that "close like in horseshoes, is good enough" has permeated the Web industry. Its inconsistencies like this that permeate computing still 50 years after its take-off that make the field so frustrating. Yes, indeed there are rewards in IT, but the risk-reward profile is declining; just like enrollment in Computer Science. When you profession can't stick to and abide by its own standards, your profession is flawed, badly.

Beginning CSS by Richard York does a good job of covering the availability of CSS features in the variouis browsers.


Top of Page  Tutorials Home  CSS references