Jump to content
Killersites Forums

browser incompatability css question


Ant
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 by grabenair
Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...