I have a a conditional comment in my page to fix a double padding-top problem with IE7.
I am trying to add "padding-top:5px;" to a DIV only in IE7. The rest of the browsers (including IE6 and IE8) use "padding-top:10px;" contained in stylesheet.css.
stylesheet.css contains
.clImageSamplerText {padding-top:10px;}
stylesheet_ie7.css contains
.clImageSamplerText {padding-top:5px;}
If I use
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<style>.clImageSamplerText {padding-top:5px;}</style>
<![endif]-->
my code works no problem.
If I use
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<link href="stylesheet_ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
it does not work.
Anyone have any ideas?
Just a shot in the dark -- if you are using an XHTML doctype, you might find that closing your <link /> tags will fix the problem.
So try:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="stylesheet_ie7.css" />
<![endif]-->
I have included link elements in conditional comments without any problems before, so I don't think it matters that you do that instead of writing it out in a style element. My best guess is that the document is not finding stylesheet_ie7.css. Are you sure it got uploaded to the right place?
Related
I've created a mobile first responsive web page. It is working lovely in all the major browsers to my liking and is looking good on mobile phones and tablets too.
Last part is I want it to look decent in IE8.
I've read here on #3 (http://www.cognifide.com/blogs/mobile/responsibly-responsive-mobile-first-responsive-design-part-2/) you can simply serve a specific style sheet for IE9 and lower with the desktop version styles using conditional comments.
I created ie.css with my desktop styles and have added this conditional commenting to the head section however no luck, I still get the mobile styles in IE8 and lower.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<title>Page Title</title>
<link rel="stylesheet" href="style.css" media="all">
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
Any ideas on whats going wrong? I've double checked that my ie.css file is sitting there in the directory right next to my index.html just like style.css. Is there some other reason this would not work?
Thanks,
if i read that correctly, you just want to target ie8?
first off, place html5shiv above all of your style sheets...unless you have style sheets that literally have no styles for ie. html5shiv needs be rendered first so it can tell ie those are elements and it needs to style them accordingly.
i'm still confused about what you want exactly, and not sure if you are targeting less than ie8, so lets just fix ie8 issue(s):
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css" media="all">
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
EDIT
<!--[if lt IE 8]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->
<![if !IEMobile]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]>
all we've done is move html5shim above all of the style sheets. then comes the style sheet for every other browser. then comes a style sheet only for ie8. then comes the style sheet for less than ie 8 and not ie mobile.
take note: i changed the version from less than 9 to less than 8, so there's no chance of cross-referencing each other, cancelling/adding styles to each other.
again, i'm not clear thats what you wanted, but this fixes the issues i see. lmk if i misunderstood something.
EDIT: looks like the mobile not (if !IEMobile) needs different syntax, so i'm assuming trying them separate will fix it. here's reference: http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx
Use Respond.JS - a javascript polyfill to make css media queries work in IE8
You could have styles within your mobile stylesheet that aren't decalred within yout IE sheet. therefore they aren't getting overwritten. You could exclude the mobile stylesheet on non IE stylesheets.
<!--[if !(IE)]><!--> <link rel="stylesheet" href="style.css" media="all"> <!--<![endif]-->
<!--[if (lt IE 9)&(!IEMobile)]><link rel="stylesheet" href="ie.css" media="all"><![endif]-->
Hope it will help you, add some jQuery to remove your responsive stylesheet when web page load in a ie8 below versions, So add new style sheet for ie 8 and below versions
if (jQuery.browser.version >= 8.0) {
$('link[rel=stylesheet][href~="style.css"]').remove();
}
or if you need responsive for 1.e8 0r 7, make sure that you are added these meta tags and scripts below
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
The webpage at
http://144.76.221.141:8000
is showing correct CSS styling in Chrome and Safari, but refuses to show in Firefox or Chrome. I have already seen that adding a doctype is a common fix for this, however this did not help at all with my problem. Any pointers to a solution would be greatly appreciated..
The typeon your stylesheets need to be like the following:
<link type="text/css" href="/css/parent.css" rel="stylesheet">
<link type="text/css" href="/css/landing-page.css" rel="stylesheet">
<link type="text/css" href="/css/dropit.css" rel="stylesheet">
Removing the / at the begining.
Remove the slash in the type of your stylesheet declaration:
<link rel="stylesheet" href="/css/parent.css" type="/text/css" />
to
<link rel="stylesheet" href="/css/parent.css" type="text/css" />
For this declaration that links your CSS
<link href="/css/dropit.css" rel="stylesheet" type="/text/css"></link>
You need to remove the extra slash / on type="/text/css" should be
<link href="/css/dropit.css" rel="stylesheet" type="text/css"></link>
You can write IE only CSS by adding this to your style sheet.
<!--[if IE 8]>
<style>...</style>
<![endif]-->
For further reference you can visit http://www.quirksmode.org/css/condcom.html
Is there a way to load a different CSS file for a specific browser?
like (poor pseudo code):
if firefox
<link rel="stylesheet" type="text/css" href="includes/MyCssFirefox.css" />
if chrome
<link rel="stylesheet" type="text/css" href="includes/MyCssChrome.css" />
if Safari
<link rel="stylesheet" type="text/css" href="includes/MyCssSafari.css" />
Ideal solution you want does not exist:
Unfortunately, a cross browser solution does not exist IF you are trying to do it on the HTML itself. However, it will work for most versions of IE. Like such:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="includes/myIEGeneralStyle.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="includes/myIE6Style.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="includes/myIE7Style.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="includes/myIE8Style.css" />
<![endif]-->
So the best solution:
How about a Javascript solution like such: Browser Detection. Read a bit about this class to better clarify, what that file is basically doing is simply the concept like such:
var browser = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ? 'chrome' : 'other';
Obviously, it does more than just detect type of browser. In fact, it knows the version, OS, and much more detail that you can read about in that link. But, it does go and check all the types of browsers by replacing 'chrome' with 'mozilla', 'explorer' and so on...
Then to add your css files, just follow up with conditional statements like so:
if (BrowserDetect.browser.indexOf("chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="../component/chromeCSSStyles.css" />');
} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {
document.write('<'+'link rel="stylesheet" href="../component/mozillaStyles.css" />');
} else if (BrowserDetect.browser.indexOf("explorer")>-1) {
document.write('<'+'link rel="stylesheet" href="../component/explorerStyles.css" />');
}
Good luck and hope this helps!
You can use conditional comments to target IE browsers. Look at this: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/. To target firefox you can check this answer: https://stackoverflow.com/a/953491/1941910. But I think there's no need to target firefox, chrome or safari, they all do a good job applying CSS.
you can do this at the server end.
if(Request.UserAgent is chrome){
//here output chrome stylesheet
}
I coded a website, and obviously when uploaded it to test it, its messing up in IE.
Im trying to insert an IE only stylesheet, but its not working, the code I have is:
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ieonly.css" />
<![endif]-->
Whats going wrong?
Any one can help me, that would be amazing?
On IE everything is getting mis aligned.
Well your syntax seems ok.Try using the developer toolbar to check if the path to your CSS file is right
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
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).