Coding & scripting forum: Issues with IE

Thanks for the help you guys! It looks like my work computer has IE8 and that was the issue. Guess its not compatible with it. Should I worry about that?

Surely you have to worry. That means that everybody who still has Windows XP and uses IE can't see your site. That's a sizable part of your customers.
Microsoft even just a few month ago started a campaign to convince people still on IE6 to upgrade.

Time to press F12 and find out what's wrong.

Kees

Thats exactly why I'm posting here. I have limited knowledge when it comes to things being compatible across all the different browsers. Just looking for some help.

IE does use different components to other browsers, eg IE uses ActiveX but most other browsers do not. Basic HTML is the same, but even then IE uses its own proprietary HTML tags.

However, in recent years Microsoft has moved to standardise its HTML rendering and I am a little surprised that your IE8 doesn't see the page. I see that Kees' IE8 doesn't see it either so that tends to rule out any problems with your own IE8.

Are you using XP? If so you cannot install IE9. But if you are using Vista/Win 7/Windows 8 you can upgrade to it, but as Kees says, many users still use IE8 or below so it does need sorting out.

How about using the HTML Validator site at http://validator.w3.org/ to validate this code and see what errors are reported, if any.

Does that help?

Mark

I have used IE9 at home, and the site looks fantastic. Im starting to think it might be due to something in the CSS stylesheet? These are the errors that popped up in the CSS validator site. I have no clue about CSS though. HTML i seem to be able to weasel through.. CSS is a whole nother can of worms though...

Sorry! We found the following errors (16)
URI : http://www.msppartybus.com/test/css/style.css
14 body Parse Error repeat-x
14 body Parse Error repeat-y
16 .css3 Property border-radius doesn't exist in CSS level 2.1 but exists in [css3] : 8px
16 .css3 Property -moz-border-radius doesn't exist : 8px
16 .css3 Property -webkit-border-radius doesn't exist : 8px
16 .css3 Property box-shadow doesn't exist in CSS level 2.1 but exists in [css3] : 0 0 4px rgba(0,0,0,0.4 )
16 .css3 Property -moz-box-shadow doesn't exist : 0 0 4px rgba(0,0,0,0.4 )
16 .css3 Property -webkit-box-shadow doesn't exist : 0 0 4px rgba(0,0,0,0.4 )
138 #ContactForm .button Property box-shadow doesn't exist in CSS level 2.1 but exists in [css3] : 0 0 6px rgba(256,256,256,0.5 )
138 #ContactForm .button Property -moz-box-shadow doesn't exist : 0 0 6px rgba(256,256,256,0.5 )
138 #ContactForm .button Property -webkit-box-shadow doesn't exist : 0 0 6px rgba(256,256,256,0.5 )
139 #ContactForm .button:hover Property box-shadow doesn't exist in CSS level 2.1 but exists in [css3] : 0 0 6px rgba(152,103,190,0.5 )
139 #ContactForm .button:hover Property -moz-box-shadow doesn't exist : 0 0 6px rgba(152,103,190,0.5 )
139 #ContactForm .button:hover Property -webkit-box-shadow doesn't exist : 0 0 6px rgba(152,103,190,0.5 )
URI : http://www.msppartybus.com/test/
123 Property overflow-x doesn't exist in CSS level 2.1 but exists in [css3] : hidden
123 Property overflow-y doesn't exist in CSS level 2.1 but exists in [css3] : hidden

Like with you, CSS is a complete mystery to me, I've tried but so far I haven't been able to get my head around it.

But that list of errors you see is telling you that some of the CSS is too new for older versions of browsers and that likely means IE8 and before.

Other errors there show different things, eg "16 .css3 Property -moz-box-shadow doesn't exist : 0 0 4px rgba(0,0,0,0.4 )" - I take that to mean there is no such thing as moz-box-shadow. However, box-shadow does exist, example and explanation here;http://www.css3.info/preview/box-shadow/

It seems as if that template is using CSS3 where as older versions of browsers may not be able to handle that.

What happens if you disable those CSS codes in your testing?

Mark

That are features that initially only worked in mozilla and webkit based browsers. IE9 supports them also. IE8 most likely doesn't. So you shouldn't use them if you want people with IE8 to enjoy the full beauty of your site.

More on one of them (just as an example): http://www.css3.info/preview/rounded-border/

I doubt if it explains all the issues with your site in IE8, but certainly some. So maybe it's time to go back to the drawing board.

Kees

this is an answer to the OP, not to you. Just let me add your diagnosis was fully right.

Kees

and thanks for adding more, because my knowledge of CSS is woefully inadequate.

Mark