Different CSS when using different browsers problems? - html

<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="iemaster.css" />
<![endif]-->
<![if !(IE 5)]>
<link rel="stylesheet" type="text/css" href="master.css" />
<![endif]>
to load a different stylesheets depending on whether or not it is IE. The problem is that i have button bar going across the top. In IE I need the padding at 0 and other wise i need it at 200px, but no matter what I do to the values, the bar in IE doesn't seem to change. It changes for chrome though. The only thing that seems to work is if I make the class affecting it a different name then the non-IE one. Of course this means my non-IE wouldn't load properly. Other then this the CSS seems to load perfectly. Why is this?

That's not how you should be doing it.
Nobody is using IE5, so forget about that.
Do it like this instead:
<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->
Your master stylesheet will get loaded in every browser.
Are you sure you care about IE6? If so, put IE6 specific rules inside ie6.css.
Put IE7 specific rules inside ie7.css.
You shouldn't need a separate stylesheet at all for IE8 or IE9. Those browsers are compliant enough to handle the same stylesheet as the other browsers.

Your bottom block is not actually a comment (it doesn't begin with <!--) so all browsers will read the master stylesheet. Also, check your logic: IE6 is both greater than IE5 and != IE5, so the main stylesheet will get loaded for some versions of IE anyway.

If you reverse the order that you link to the stylesheets that should fix it. What's happening is the IE-specific style sheet is being set first, but the master.css is overwriting it after.
Also, I don't think you need <![if !(IE 5)]> and <![endif]> around the non-IE one.

Related

Parallax Website - fix Background images for Interent Explorer 10 mobile

For iPad and other devices I disabled the scrolling of background images, because of performance problems. All works fine.
How can I disable scrolling for IE10 and IE10 mobile (Tablet)?
Use conditional commenting in your HTML file.
If the browser agent is/is not equal to IE10 then include/exclude a CSS File
<head>
<![if !IE]>
<link rel="stylesheet" type="text/css" href="nonIE.css" />
<![endif]>
[if IE]>
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="shared.css" />
</head>
Then within each browser specific css file, you can enable any features as required.
Or use a "display:none;" on an css element, to completely hide it from a browser within your conditional css.
Note: Conditional comments are an IE-only feature, other browsers treat them as ordinary HTML tags.
The above snippet borrowed from here: http://codebox.org.uk/pages/articles/conditional-comments and the article goes in to much more detail than I have. It's a good little read.

Link to Relative StyleSheet tag not working

I am creating a website based from tumblr that seems to work fine on google chrome, but has a issue with the ad box that I have assigned to the right of the page.
I have searched google and found this related question, but the answer given does not work for me.
I have tried the following.
Just adding a html class="ie9" tag with the proper if statements.
Clearing my cache.
And checking the browser mode.
It seems to be just one element of the page. The right side does not show up correctly, but I fiddled with the customization in IE 9 and I have the exact margin reqs. However I can't seem to link the stylesheet.
Is this because I'm linking a static file in this manner?
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
Does this have anything to do with the fact that I am linking this stysheet from a different domain instead of the hosted domain?
Also is there anyway I can just single out the line that needs to be adjusted?
Is it possible for me to place a if statement in the css portion of my site
<!--[if IE 9]<style>#Content-right{margin:-1000}</style>
<![endif]-->
it's not working because you didn't close your comment tag. It has nothing to do with cross-domain css file fetching, which is entirely legal.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
should be <!-- [if IE 9] -->
Also... what engine is supposed to be acting on this IF?
There is a very interesting article on just this topic. It addresses the need/desire to isolate browser specific CSS without having to create an entire CSS file. There are also a number of benefits to the approach. I have utilized it for a number of years due to my own needs and was unaware until recently that such analysis had been performed on the technique.
Here is the link: Conditional Stylesheets vs. CSS Hacks
Other Things of Note:
Positioning of your Stylesheets is very important in CSS. Since we can't see your other calls and you are using a separate stylesheet, it is important that you place the conditional statement under your standard stylesheet.
Example
<link rel="stylesheet" href="path/to/standard.css" />
<!--[if IE 9]-->
<link rel="stylesheet" href="http://path/to/ie9.css" />
<!--[endif]-->
This is because CSS uses the styles that were loaded last if there is a conflict. I only mention this because it could be affecting you results as it is a common mistake.
Try this code
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
<![endif] -->
I hope you work it

IE8 text-shadow issue with Google Font

I have a site http://test.printavo.com that renders terribly in IE8 but fine in IE7 and IE9. I'm not sure if IE8 has different standards for some reason but the main issue is that the text-shadow for 'Open Sans' Google font looks terrible...
Anyone have a fix for this? Maybe convert all fonts to Arial, I tried to text-shadow:none !important for IE but that didn't work (check out my source)
EDIT:
Is there a better way to take off all text-shadows in IE?
http://www.useragentman.com/blog/2011/06/29/full-css3-text-shadows-even-in-ie/
It would seem there are a variety of choices to choose from. The link above should give you some options. I should note they say IE8 can display text-shadow unpredictably and you should look the caveats section (link below) to try some fixes.
http://www.useragentman.com/blog/2011/04/23/css-blurred-text-shadow-in-ie-part-i/#caveats
EDIT:
In request to your browser specific css styling, you can target IE styling using conditional comments, just add this line to the >head< tags of your HTML file:
<!--[if IE 6]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="http://mysite.com/path/to/ie7.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="http://mysite.com/path/to/ie8.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if IE 9]><link rel="stylesheet" href="http://mysite.com/path/to/ie9.css" type="text/css" media="screen, projection"><![endif]-->

How to resolve css incompabilities/differences between different versions of IE?

I am having an issue wherein my web application behaves different in (IE5 & IE6) as compared with (IE7 & IE8)
There is some CSS Issue but I do not want to get in a situation where I make some changes in CSS File and web application would work fine in (IE5 & IE6) and not in (IE7 & IE8) and so my question is:
How should I approach problem to resolve CSS incompatibities or differences between different version of IE ?
Any guidance and suggestions would be highly appreciated.
Create a cascade of style sheets like so:
<link id="stylesheet1" rel="stylesheet" href="css/style.css" type="text/css" media="all" /
<!--[if IE]>
<link id="stylesheet2" rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
<![endif]-->
<!--[if lte IE 6]>
<link id="stylesheet3" rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
<![endif]-->
<!--[if lte IE 5]>
<link id="stylesheet4" rel="stylesheet" href="css/ie5.css" type="text/css" media="all" />
<![endif]-->
style.css:
.myclass{
width:100px;
}
ie.css:
/* override class from style.css */
.myclass{
width:105px;
}
ie6.css:
/* override class again from ie.css */
.myclass{
width:110px;
}
ie5.css:
/* if necessary, override class again from ie6.css */
.myclass{
width:115px;
}
You only need to over-ride what needs to be over-ridden.
Pekka is right, you need to take each problem/bug/display-difference on a case-by-case basis. So if something isn't showing up right in IE6, you need to adjust it in ie6.css. If even after that, it's not showing up right in IE5, you need to adjust it in ie5.css.
If you practice a little, you will understand better.
Explanation:
<!--[if IE]>
only Internet Explorer browsers (all versions) will see HTML between these statements
<![endif]-->
<!--[if lte IE 6]>
only Internet Explorer 6 or lower browsers will see HTML between these statements
<![endif]-->
<!--[if lte IE 5]>
only Internet Explorer 5 or lower browsers will see HTML between these statements
<![endif]-->
Use conditional comments. Put IE version specific css in specific files only included for the particular version in question.

Firefox loading all css files referenced in conditional comments

I have a regular CSS file plus two IE specific CSS files. In Firebug in Firefox I noticed the same <div> is getting properties from the three files.
Why is Firefox loading iestyle.css & ie6style.css?
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="iestyle.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="ie6style.css" />
<![endif]-->
Addition
This should definitely be working. Are you sure there isn't an unclosed <!-- or <![CDATA[ hanging around in head?
I think that isn't all the relevant code. Do you perhaps #include those files somewhere else?
Are the conditional comments in the HEAD element or in the BODY element? I haven't tried it, but it's possible that FF only ignores conditional comments if they are in the HEAD element (where they should be).