browser incompatability css question

[Ant]

How do I know what browsers will and will not render CSS properly. I'm not talking about testing things in all browsers, I mean is there like a list somewhere that will tell me X will not work in IE, X will not work in firefox, etc

 

I have an image placed using css and I am getting problems in I.E. The image is in front of everything else, as it should be, however in I.E. it's behind the navigation. But how do I go about figuring out what the problem is. Beside blindly changing the css.

 

Here's the css, but my guess is you will need to know all the other elements to see whats not playing nice in I.E. Lets see if just the following code is enough.

 

#floating_image_navigation {

background: url("http://linktoimage") repeat scroll 0 0 transparent;

display: block;

height: 145px;

left: -5px;

position: fixed;

text-indent: -9999px;

top: 580px;

width: 248px;

z-index: 100;

}

 

 

How would I learn all the incompatibility issue. Whats the terminology for the problems I'm having? "Hacks" I don't use conditional statements.(never read up on it) Maybe thats what I need to learn??

 

A.

[grabenair]

I would use conditional comment. Here is how you write it:

 

<!- -[if IE]>

<link rel=”stylesheet” type=”text/css” href=”whatever you named your style sheet”/>

<![endif]- ->

 

You write a separate style sheet with the css that you need to make what you want for IE. Then link it like this. What happens is this style sheet will over ride the rest of the css for the rest of the browsers making IE happy.

 

You do not have to write all of your css over only what you need to over ride for IE.

 

Had to sign back in forgot what I just wrote is a very simplified answer. Google conditional comment there is a bunch of info out there. Once you get used to using them it will not be that bad, just another IE pain.

Edited April 3, 2012 by grabenair

[Wickham]

I mean is there like a list somewhere that will tell me X will not work in IE, X will not work in firefox, etc

 

I have an image placed using css and I am getting problems in I.E. The image is in front of everything else, as it should be, however in I.E. it's behind the navigation.

 

Look at this http://caniuse.com/ and click on any item.

 

Always code and get it right in Firefox or Chrome or Safari first, then consider what you have to do in conditional comments for any or all IE versions. The conditional comment should be after your main stylesheet link to overide it. Conditional comments will not overide inline styles (those inside tags).

 

If the image is behind the navigation in IE, consider a position (absolute, relative or fixed) for the parent div of the image and also add a z-index for that. You have done it for the navigation and sometimes that's enough, but doing it for both with different z-index values may work.

Edited April 3, 2012 by Wickham

[Ant]

What do you guys do if your on a mac?

 

Do you have a pc available to view your sites on I.E.?

 

A.