Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2012-03-16
14
513 Views
Last Modified: 2012-06-27
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.
0
Comment
Question by:jensjakobsen
  • 8
  • 6
14 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 37731138
I think you have to take IE9 out of compatibility mode to see CSS3 stuff. I've not seen IE10 yet.
0
 
LVL 1

Author Comment

by:jensjakobsen
ID: 37731176
Meaning? Please describe the suggested ind detail if possible.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 37731188
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 1

Author Comment

by:jensjakobsen
ID: 37731204
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
 
LVL 22

Expert Comment

by:Kim Walker
ID: 37731229
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
 
LVL 1

Author Comment

by:jensjakobsen
ID: 37731244
OK.

The page is www.dsts.org.

I appreciate your help a lot.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 37740467
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
 
LVL 1

Author Comment

by:jensjakobsen
ID: 37742111
I haven't modified the code.

Is there any issues with the new IE10 and CSS?
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 37742168
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
 
LVL 1

Author Comment

by:jensjakobsen
ID: 37846177
Sorry - I meant IE9.
0
 
LVL 1

Author Comment

by:jensjakobsen
ID: 38056760
It appears that there is no solution to this :(
0
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 38057339
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
 
LVL 1

Author Comment

by:jensjakobsen
ID: 38127191
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
 
LVL 1

Author Closing Comment

by:jensjakobsen
ID: 38131427
This answer was able to show me why CSS works as it does in IE9.
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question