Do Web Designers Just Want To Yell At Microsoft For Creating Problems With Internet Explorer?

I am writing this hub in response to the Hub Pages member ChristinS who had a question that she could not get a beautiful website that looks great in Google Chrome and Mozilla Firefox, but the navigation fails to display well in Internet Explorer. I responded to the question asking Christin what version of Internet Explorer.

Well Christin, you are definitely not alone. You will be happy to know that most web designers complain about the bugs created by Microsoft for causing issues with Internet Explorer and creating more work for web designers to test their work and make corrections to HTML, CSS and jQuery. Furthermore, HTML 5 tags do not work and CSS 3 properties are also not working well in Internet Explorer.

Well, my fellow webmasters, do not blame Microsoft. It is not their fault and in 2007 when HTML5 and CSS 3 were hardly used or even published, they worked just fine.

Who Do You Really Blame This On?

  1. Do you blame it on the web surfers who are suffering because of the economy and do not have the money to upgrade their computers to a new one with Internet Explorer 9?
  2. Do you blame it on the web surfers who are not technical and do not know how to download a new web version of a simple web browser. Stop laughing, you guys!
  3. Do you blame it on the technology for leaving web browsers like Internet Explorer 7 and 8 in the dark?
  4. Do you blame it on Microsoft???
  5. Do you blame it on web designers for not keeping up with the technology and should know how to make their work available for ALL web browsers regardless?

Well, I am sure everyone reading this has different answers to that question depending on who they are. You could blame Microsoft, but then again, websites on those older browsers looked fine before all this great web technology like jQuery and CSS 3, so don't blame them.

My theory is that Microsoft tried to change the world with something other than Windows:

Why do I think this? Microsoft came out with Jscript when the rest of the world was using Javascript. Remember JScript? Microsoft came out with DHTML. That reigned for some time, but jQuery and other Javascript libraries crushed DHTML, because it was too hard to use and reference HTML elements. And finally, they came out with their own version of CSS, but most web designers just said Microsoft did it wrong. Hey, you cannot fault a company for thinking out of the box and trying to dominate the world. Apple did it successfully with some crazy device where you loaded MP3s and tucked it into your pocket. I think that was called the ipod, but I don't remember. It was so long ago. LOL

The fact remains that we, as web designers, must make our websites look good on all browsers. Otherwise, you will have an irrate client who happens to be one of those cheap, non-technical users with the dreaded, yup you guessed it, internet explorer 7. Hey, I still have Internet Explorer 7 on one of my PCs and Internet Explorer 9 on another. Mostly likely, if it does not look good on IE 8, it won't on 7 for sure.

Ok, so how do you really solve this issue with Internet Explorer? You need an Internet Explorer CSS style sheet!!!

To this day, most web design firms are not taking advantage of this and their websites look horrible on Internet Explorer.


This is from my HTML <HEAD> tags

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="/ie.css" />
<![endif]-->

In the first line, I call my regular style.css file. It works for ALL browsers including Internet Explorer 7, 8 and 9. Google Chrome, Firefox, Safari, Opera will all see this CSS and bind with your HTML.

The second line is telling your web browser to load an additional CSS file if any version of Internet Explorer less than 9 is detected. All you need to do in this ie.css file is change the styles that do not work. You don't need to load your entire style.css file. This will override any CSS from style.css that it encounters when your website visitors use IE 7 or 8.

My CSS styles that do not work in IE 7 or IE8

h2.widgettitle
{
	color:#f7941e;
	font-family:georgia, serif;
	font-size:14pt;
	margin-left:7px;
}

.widget_archive a
{
	color:#94bc3d;
	text-decoration:none;
	font-family:century gothic, serif;
	margin-left:-30px;
}

section.blog-section
{
	font-size:10pt; border-radius:10px; margin: 0px 0 30px 35px; padding:0px;
}

My entire ie.css file

h2.widgettitle
{
	color:#f7941e;
	font-family:georgia, serif;
	font-size:14pt;
	margin-left:-10px;
	margin-top:10px;
}

.widget_archive a
{
	color:#94bc3d;
	text-decoration:none;
	font-family:century gothic, serif;
	margin-left:-30px;
}

section.blog-section
{
	font-size:10pt; border-radius:10px; margin: 0px 0 30px 35px; padding:0px;
}

My ie.css is overriding any CSS from the style.css file above it. Any CSS that works is NOT added to the ie.css. The style.css styles will take effect in all versions of IE. You only need to override the styles that do not look good.

That's it. Christin, I hope we can help you make the nav look good in all web browsers.

More by this Author


Comments 4 comments

flashmakeit profile image

flashmakeit 4 years ago from usa

Thank you for the very useful technical information about CSS.


hotwebideas profile image

hotwebideas 4 years ago from New York Author

You're welcome. I am proud to develop this habit.


ChristinS profile image

ChristinS 4 years ago from Midwest

Thanks for this! Voted and shared and I will do a workaround for IE older versions... grumble grumble. Great info :)


hotwebideas profile image

hotwebideas 4 years ago from New York Author

You're welcome, Christin. Let me know how it goes ;)

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working