CSS - IE10/IE9 vs. Chrome/Safari/Firefox

Hi

I have the weirdest problem with som CSS.

I have attached 2 screenshots:

Website shown with Chrome
Website shown with IE10

Internet Explorer 10
Chrome
Test your browser at http://www.dsts.org

Hope you can help.
LVL 1
jensjakobsenAsked:
Who is Participating?
 
Kim WalkerWeb Programmer/TechnicianCommented:
As I said before, the rounded corners did appear in IE9 when I was able to get to a computer with IE9. The gradient did NOT, but the only gradient I've found in your CSS is a -moz-linear-gradient which is only supported by Mozilla or Firefox browsers. Have you included any IE-compatible gradients?

Here is a good reference for CSS3 gradients which, interestingly enough, mentions IE10. There's a section titled "Trident (IE)" which has some good information about using filters for earlier versions of IE.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
I think you have to take IE9 out of compatibility mode to see CSS3 stuff. I've not seen IE10 yet.
0
 
jensjakobsenAuthor Commented:
Meaning? Please describe the suggested ind detail if possible.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Kim WalkerWeb Programmer/TechnicianCommented:
0
 
jensjakobsenAuthor Commented:
OK - according to the article a compatibility icon will appear if the website has issues with the browser.

According to my screnshot, this is not the case.

No compatibility view issues?
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Can you post a link to the page? Which styles did you use? There are CSS3 styles that work in most all CSS3-compatible browsers. There are -moz styles that work in Firefox only. There are -webkit styles that work in Safari and Chrome only. You can use them all and the browser will ignore the ones it doesn't recognize.
0
 
jensjakobsenAuthor Commented:
OK.

The page is www.dsts.org.

I appreciate your help a lot.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Sorry for the delay. This is the first opportunity I've had to view the page in IE9. I do get the compatibility view icon in IE9 and am able to see the rounded corners in normal mode, squared corners in compatibility view mode. I don't see the gradient background image in either.

I believe you may have modified your CSS since I viewed this in Firefox and Chrome. I'm only seeing the CSS3 border-radius style now which is all you need for modern browsers. But the only gradient background image I see is a -moz-linear-gradient which is primarily supported by Firefox browsers. But the gradient does appear in Firefox, Safari, and Chrome in Windows 7.

I've attached a screen capture of what I'm seeing in IE9 in normal view mode.
IE9 normal (non-compatibility view) mode
0
 
jensjakobsenAuthor Commented:
I haven't modified the code.

Is there any issues with the new IE10 and CSS?
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Frankly, I didn't know there was a version 10. When I go to Microsoft to download the latest version it takes me to IE9.
0
 
jensjakobsenAuthor Commented:
Sorry - I meant IE9.
0
 
jensjakobsenAuthor Commented:
It appears that there is no solution to this :(
0
 
jensjakobsenAuthor Commented:
Thx for your anwser - I'll check tomorrow. I'm quite sure I've seen IE9 browsers handle the rounded corners I've specified in my CSS.
0
 
jensjakobsenAuthor Commented:
This answer was able to show me why CSS works as it does in IE9.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.